且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

React Native:React Navigation - 在每个屏幕中使用相同的标题组件?

更新时间:2022-03-24 03:11:48

这就是我实现这一目标的方式.像这样创建一个 CustomHeader 组件:

This is how I'm achieving this. Create a CustomHeader component like this:

const MyHeader = (navigation) => {
return {
    header: props => <MyCustomHeader {...props} />,
    headerStyle: { backgroundColor: '#fff' },
    headerTintColor: '#000',
};
}

然后将其包含在堆栈导航器的 defaultNavigationOptions

Then include it in defaultNavigationOptions in your stack navigator

const AppNavigator = createStackNavigator(
{
    Launch: {
        screen: LaunchComponent,
    }
},
{
    initialRouteName: "Launch",
    defaultNavigationOptions: ({ navigation }) => {
        return MyHeader(navigation)
    }
}
)