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

【问题标题】：React Native - React Navigation show header and footer on every pageReact Native - React Navigation 在每个页面上显示页眉和页脚
【发布时间】：2017-05-08 07:08:48
【问题描述】：

您好，我正在使用这个包进行导航：

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

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

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

如果不是，我如何才能将页眉或页脚（如果我需要制作自定义组件也可以）只包含在我的所有页面中，除了 login 和 auth？

谢谢

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

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

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

【讨论】：