React Navigation 5 - 带有自定义 header 的原生堆栈导航器，它有一个搜索栏

Question

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

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

Answer 1

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

Answer 2

在您的组件中传递 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 3

使用 headerRight 选项解决了它并传递给它一个完整的自定义 header 组件。