React Navigation 5-带有自定义标题的Native Stack Navigator，该标题具有搜索栏

Question

我目前在一个项目中，由于React Navigation 5的性能有所提高，我们正在将其与本机堆栈导航器一起使用。我们需要在标题中添加一个搜索栏，因为客户不希望它在其他地方。有什么方法可以制作自定义页眉吗？使用options={｛headerShown:false}｝不是一个选项，因为在本机堆栈导航器中，我们有一个底部堆栈导航器，在这个底部选项卡导航器中有一个顶部堆栈导航器和屏幕。因此，在屏幕中使用headerShown:false和自定义标头只会在顶部选项卡下方呈现它，这是不可接受的。关于如何制作这个有什么想法吗？使用带有自定义react元素的通用堆栈导航器作为标头道具是唯一的解决方案吗？

非常感谢任何关于如何解决此问题的想法。

Answer 1

使用headerRight选项解决它，并向它传递一个完整的自定义标头组件。

Answer 2

看看https://reactnavigation.org/docs/en/stack-navigator.html您可以将header传递给options道具并使用自定义标头。

Answer 3

在组件中传递navigationOptions

export default class Test extends Component{
static navigationOptions = ({ navigation }) => ({
headerTitle: "Test",
headerStyle: {
backgroundColor: #f1f1f1,
elevation: 0
},
headerTintColor: "#000",
});
render(){
return(<View><Text>Test App</Text></View>);
}
}