使用 createStackNavigator、React Native 的标题透明背景

Question

我使用 CRNA 创建了一个使用 React-Navigation 的项目。在其中一个屏幕中，我有一个覆盖整个屏幕的背景图像，我想包括标题。

像这张图片：

我应该隐藏标题并使用包含我想要的元素的视图吗？如果是，这会在深度链接的情况下造成任何麻烦吗？

解决方案

React Navigation 提供了一个很酷的 props，叫做 headerTransparent，可以用来在 header 下渲染一些东西。

所以代码应该是这样的：

 static navigationOptions = {
    headerTransparent: true
  }

原文由 t97 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要达到此效果，您需要执行以下步骤：

1. 使用绝对位置、透明背景和无边框更改导航标题的样式。
2. 将 ImageBackground 组件用作屏幕的父组件，并将您要用作背景的图像。
3. 将填充顶部添加到此 ImageBackground 以修复重叠。

因此，您的代码应该类似于以下内容：

 import React, {Component} from 'react';
import {
  StyleSheet,
  Button,
  ImageBackground,
  Platform,
} from 'react-native';
import {
  createStackNavigator,
} from 'react-navigation';

class HomeScreen extends Component {
  render() {
    return (
        <ImageBackground
            style={styles.container}
            source={require('./images/bg.png')}
        >
          <Button
              onPress={() => {}}
              title="Just a button"
          />
        </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 60 : 80,
  }
});

const App = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      headerStyle: {
        position: 'absolute',
        backgroundColor: 'transparent',
        zIndex: 100,
        top: 0,
        left: 0,
        right: 0,
        elevation: 0,
        shadowOpacity: 0,
        borderBottomWidth: 0,
      }
    },
  }
})

export default App;

原文由 Naoufal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在使用 React Navigation 5，我们可以做这样的事情：

 {
    headerShown: true,
    headerTransparent: true,
}

例如：

 const Screen = ({ navigation }) => {
  navigation.setOptions({
    headerShown: true,
    headerTransparent: true,
  });

  return (
    <View>
      <Text>Render your component</Text>
    </View>
  );
};

原文由 Abraham Calf 发布，翻译遵循 CC BY-SA 4.0 许可协议