react-native - React Navigation 5 - 带有自定义标题的本机 Stack Navigator，它有一个搜索栏

Question

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

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

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>);
    }
}