反应导航；在标题中使用图像？

Question

我在反应原生项目中使用反应导航，我想用图像自定义标题。

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

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

Answer 1

更新：

由于库的 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

---

旧答案，当仍在使用 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} />,
  }
});

这将导致：

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

Answer 2

根据react-navigation v5的官方文档，可以这样实现：

https://reactnavigation.org/docs/headers/#replacing-the-title-with-a-custom-component

 <Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    // title: 'App Name'
    options={{
     headerTitle: (props) => ( // App Logo
      <Image
        style={{ width: 200, height: 50 }}
        source={require('../assets/images/app-logo-1.png')}
        resizeMode='contain'
      />
    ),
    headerTitleStyle: { flex: 1, textAlign: 'center' },
    }}
  />
</Stack.Navigator>

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