react导航;在标题中使用图像?

IT技术 reactjs react-native react-navigation
2021-04-09 00:57:58

我在react本机项目中使用react导航,我想用图像自定义标题。

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

3个回答

更新:

由于库的 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} />,
  }
});

这将导致:

@jskidd3 这个答案是一年多以前,图书馆在那段时间发生了很大变化。在撰写本文时,这行得通。我将使用库 v2 的解决方案更新我的答案。
2021-05-24 00:57:58
不起作用。图像横跨整个屏幕,不适合导航栏。
2021-05-30 00:57:58
如果仍然需要我的后退按钮怎么办?
2021-06-17 00:57:58
不应受此影响,因为它只是一个背景,原始标题在顶部
2021-06-17 00:57:58
上面的例子抛出一个警告“'headerBackground: <SomeElement />' 将在未来的版本中被删除。使用 'headerBackground: () => <SomeElement />' 代替”
2021-06-18 00:57:58

根据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>

React Navigation v5 更新!(制作此帖子以供将来参考)

对于react导航 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'
我也在使用第 5 版,但它不起作用,没有错误,但没有显示任何内容
2021-05-24 00:57:58