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

Question

我在 React Native 项目中使用 React 导航，我想用图像自定义 header。

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

Answer 1

更新：

从库的 v2 开始，有一个用于设置 header 背景的特殊选项，即 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 实际上非常简单。

通过用视图包裹 Header 并在该视图中放置绝对定位的图像，图像将缩放到其 parent 大小。

重要的是将默认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>
);

然后将该组件用作 header:

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

这将导致：

Answer 2

React Navigation v5 更新！（制作此 post 以备将来参考）

对于 React Navigation 5，我找到了这个解决方案。

在StackNavigator.js中class您可以为每个页面设置不同的图像(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>

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

React Navigation; use image in header?

reactjs

react-native

react-navigation