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

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/@koenpunt/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} />,
  }
});

这将导致:

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>

Answer 3

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'