Reactnative react Navigation 在标题中使用图像

发布于05月21日

我在react-native 项目中使用react-navigation ，我想用一个图像自定义标题.

对于 colored颜色，我可以使用简单的样式，但因为react native不支持背景图像，所以我需要一个不同的解决方案.

推荐答案

Update:

由于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/@koen/react-navigation-header-background

Old answer, for when still using React Navigation v1:

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

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

重要的是将默认标题的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} />,
  }
});

这将导致: