reactjs - React Native - React Navigation 在每个页面上显示页眉和页脚

Question

您好，我正在使用此软件包进行导航:

https://github.com/react-community/react-navigation

首先这是我的代码:

export default MainNavigator =
    StackNavigator(
        {
            header: {
                screen: StackNavigator({
                    footer: {
                        screen: TabNavigator({
                            welcome: {screen: WelcomeScreen},
                        },
                            {
                                tabBarPosition: 'bottom',
                                swipeEnabled: false,
                                lazy: true,
                                tabBarOptions:{
                                    style: {background: '#fff'}
                                }
                            }
                        )
                    }
                }),
            },
            auth: {screen: AuthScreen},
            login: {screen: LoginScreen},
        },
        {
            headerMode: 'none',
        },
    );

这就是我想要实现的目标:我想在除身份验证和登录之外的所有主屏幕上显示页眉和页脚。

使用我当前的代码，是的，它可以正常工作，但我认为这不是一个好的做法，因为我声明了用于显示顶部栏和底部栏的新路线(页眉、页脚)。我说得对吗？

如果不是，我如何才能仅将页眉或页脚(如果我需要制作自定义组件)包含到除登录和身份验证之外的所有页面？

谢谢

Answer 1

您可以通过传递 header null 来隐藏 header。

export const Router = StackNavigator({
   auth: {
      screen: Auth,
      navigationOptions: ({ navigation }) => ({ header: null, })
   },
   test: {
      screen: Test,
      navigationOptions: ({ navigation }) => ({ header: <Text>Hi</Text> }) 
   }
});

您可以在这里阅读更多相关信息:https://reactnavigation.org/docs/navigators/stack