React Native，使用 Navigation Drawer 为整个应用程序固定页眉和页脚答案

【问题标题】：React Native, fixed header and footer for entire app with Navigation DrawerReact Native，使用 Navigation Drawer 为整个应用程序固定页眉和页脚
【发布时间】：2019-11-01 03:54:59
【问题描述】：

我需要使用 Navigation Drawer 创建一个 React 本机应用程序，但我遇到了一些问题。

我有 3 个不同的屏幕： “HomeScreen”、“ScreenOne”、“ScreenTwo”、“ScreenThree”，这就是我的导航器代码：

export const HomeNavigator = createStackNavigator({
    Home : { screen : HomeScreen },
    One: { screen : ScreenOne},
    Two : { screen : ScreenTwo }
},{
    unmountInactiveRoutes : true,
    headerMode: 'none'
});

上面的导航器是特定于 HomeScreen 的，用户可以通过点击其中的一些元素来导航到 screenOne 或 screenTwo。下面的导航器适用于整个应用程序：

export const AppDrawerNavigator = createDrawerNavigator({
    HomePage : {
        screen:HomeNavigator,
        navigationOptions: {
            drawerLabel: 'Homepage',
            drawerIcon : ({tintColor}) =>(
                <Icon name="home" color={tintColor}/>
            )
        }
    },
    One: {
        screen:ScreenOne,
        navigationOptions: {
            drawerLabel: 'One'
        }
    },    
    Two: {
        screen:ScreenTwo,
        navigationOptions: {
            drawerLabel: 'Two'
        }
    },    
    Three: {
        screen:ScreenThree,
        navigationOptions: {
            drawerLabel: 'Three'
        }
    },{
        initialRouteName: 'HomePage',
        unmountInactiveRoutes : true,
        headerMode: 'none'
    }
});

现在我需要为整个应用程序放置一个固定的页眉和页脚（抽屉必须在打开时覆盖页眉和页脚），其中 header 必须在 HomePage 内显示一个 Hamburger 菜单按钮，并在另一个屏幕内的 Hamburger 附近显示一个 BackButton（页脚在整个应用程序中保持相同）。我该怎么办？

【问题讨论】：

标签： react-native navigation react-native-navigation

【解决方案1】：

您可以使用 navigationOptions 属性配置带有反应导航的标题。在堆栈导航器中添加 navigationOptions，然后堆栈导航器中的所有屏幕都应该包含一个固定的标题。

例子：

 {

      navigationOptions: ({ navigation }) => ({
        headerRight: (
          <View>
            <TouchableOpacity
              onPress={() => navigation.openDrawer()}
            >
              <Image source={hamburgerIcon} style={{ height: 15, width: 15 }} />
            </TouchableOpacity>
          </View>
        ),
        headerTintColor: 'color',
        headerTitle: (

          <Text>
           title
          </Text>

        ),
        headerStyle: {
          backgroundColor: '#fff',
        },
      }),
    });

对于固定页脚，您可以使用 Tab 导航。

例子：

const TabNavigator = createBottomTabNavigator({
   Home: { screen: HomeScreen },
   Settings: { screen: SettingsScreen },
   Gallery: { screen: Gallery}
});

【讨论】：

这对于标题是可以的。页脚呢？
您可以使用标签导航。