reactjs – React Navigation;在标题中使用图像？

从库的v2开始,有一个用于设置标题背景的特殊选项,即headerBackground.

此选项接受React组件,因此当设置为Image组件时,它将使用它.

例如：

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },},{
  navigationOptions: {
    headerBackground: (
      <Image
        style={StyleSheet.absoluteFill}
        source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
      />
    ),}
});

工作示例：https://snack.expo.io/@koenpunt/react-navigation-header-background

旧答案,仍然使用React Navigation v1：

使用图像创建自定义标头实际上非常简单.

通过使用视图包装Header并在该视图中放置绝对定位的图像,图像将缩放到其父级大小.

重要的是将默认标题的backgroundColor设置为transparent.

const ImageHeader = props => (
  <View style={{ backgroundColor: '#eee' }}>
    <Image
      style={StyleSheet.absoluteFill}
      source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
    />
    <Header {...props} style={{ backgroundColor: 'transparent' }}/>
  </View>
);

然后使用该组件作为标头：

const SimpleStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,{
  navigationOptions: {
    headerTitleStyle: { color: '#fff' },header: (props) => <ImageHeader {...props} />,}
});

这将导致：