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

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

Answer 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}
});

使用导航抽屉反应整个应用程序的本机，固定的页眉和页脚

1 个答案: