Question

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

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

Answer 1

在组件中通过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>);
    }
}

Answer 2

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

Answer 3

使用headerRight选项解决了该问题，并向其传递了完整的自定义标头组件。

React Navigation 5-具有自定义标题且具有搜索栏的本机Stack Navigator

3 个答案: