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

Question

我需要创建一个带有导航抽屉的 React 本机应用程序，但我遇到了一些问题。

我有 3 个不同的屏幕："主屏幕"，"屏幕一"，"屏幕二"，"屏幕三"，这就是我的导航器代码：

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

上面的导航器特定于主屏幕，用户可以通过点击其中的某些元素导航到屏幕一或屏幕二。下面的导航器适用于整个应用程序：

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 属性通过反应导航配置标头。在堆栈导航器中添加导航选项，然后堆栈导航器中的所有屏幕都应包含固定标题。

例：

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

Answer 2

只需在App.js文件或导航器上方和下方的NavigationContainer中添加页眉和页脚，如本零食或以下示例所示。

import * as React from 'react';
import { View, Button, Text, Dimensions, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to One"
        onPress={() => navigation.navigate('One')}
      />
      <Button
        title="Go to Two"
        onPress={() => navigation.navigate('Two')}
      />
    </View>
  );
}
function OneScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>One Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="Go to Two"
        onPress={() => navigation.navigate('Two')}
      />
    </View>
  );
}
function TwoScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Two Screen</Text>
      <Button
        title="Go to One"
        onPress={() => navigation.navigate('One')}
      />
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}
const Stack = createNativeStackNavigator();
function App() {
  const width = Dimensions.get('window').width;
  return (
    <NavigationContainer>
      <StatusBar />
      <View
        style={{
          backgroundColor: '#007AFF',
          height: 50,
          width: width,
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: StatusBar.currentHeight,
        }}>
        <Text>Header</Text>
      </View>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="One" component={OneScreen} />
        <Stack.Screen name="Two" component={TwoScreen} />
      </Stack.Navigator>
      <View
        style={{
          backgroundColor: '#007AFF',
          height: 50,
          width: width,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Footer</Text>
      </View>
    </NavigationContainer>
  );
}
export default App;