Question

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

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

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：

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

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

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

哪会导致：

Answer 2

React Navigation v5的更新！（发布此帖子以供将来参考）

对于反应导航5，我找到了此解决方案。

在StackNavigator.js类中，您可以为每个页面（Stack.Screen）设置不同的图像：

<Stack.Screen 
    name='Home' 
    component={HomeScreen} 
    options={{ 
      title: <Image style={{ width: 250, height: 50 }}
      source = require('../images/yourimage.png')}/> 
    }}
 />

然后，您必须调整图像的宽度，高度和位置，但是可以！我认为这是最简单的方法。这是输出（是的，是调整前的我的图像）。

别忘了导入图片！

import { Image } from 'react-native'

Answer 3

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>

反应导航;在标题中使用图片？

3 个答案: