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

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

---

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

更新：

由于是库的v2，因此有一个用于设置标题背景的特殊选项，即

headerBackground

此选项接受React组件，因此当设置为

图像

组件时，它将使用该组件

例如：

导出默认createStackNavigator({
主页：{
屏幕：主屏幕
},
}, {
导航选项：{
头部背景：(
),
}
});

工作示例：

---

旧答案，适用于仍然使用React Navigation v1时：

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

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

重要的是将默认标题的

backgroundColor

设置为

transparent

const ImageHeader=props=>(
);

然后将该组件用作标题：

const SimpleStack=StackNavigator({
主页：{
屏幕：我的主屏幕，
},
}, {
导航选项：{
标题样式：{color:'#fff'}，
标题：（道具）=>，
}
});

这将导致：

---

更新React导航v5！（将此帖子作为未来参考）

对于react navigation 5，我找到了这个解决方案

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

---

根据react navigation v5的官方文件，可按如下方式实施：

（//应用程序徽标
),
headerTitleStyle:{flex:1，textAlign:'center'}，
}}
/>

如果仍需要“我的后退”按钮怎么办？不应该受此影响，因为它只是一个背景，顶部的原始标题不起作用。图像在整个屏幕上延伸，不适合放在导航栏中。@jskidd3如果从一年前开始，图书馆在那个时候发生了很大的变化，那么这个答案是正确的。在写这篇文章时，它起了作用。我将用库v2的解决方案更新我的答案。@Koen非常感谢！

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

import { Image } from 'react-native'

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