带有导航抽屉的整个应用程序的 React Native，固定页眉和页脚

Question

我需要创建一个带有 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'
    }
});

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

Answer 1

您可以使用 navigationOptions 属性通过 React 导航配置您的 header。在堆栈导航器中添加 navigationOptions，然后堆栈导航器中的所有屏幕都应包含固定的 header.

示例：

 {

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

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

示例：

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

带有导航抽屉的整个应用程序的 React Native，固定页眉和页脚

React Native, fixed header and footer for entire app with Navigation Drawer

navigation

react-native

react-native-navigation