React Native，通过Navigation Drawer为整个应用程序修复页眉和页脚

5ssjco0h 于 2022-12-14 发布在 React

关注(0)|答案(2)|浏览(104)

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

现在我需要把一个固定的页眉和页脚为整个应用程序（抽屉必须覆盖页眉和页脚时，打开），其中页眉必须显示一个汉堡菜单按钮内的主页，和一个后退按钮附近的汉堡内的其他屏幕（页脚保持相同的所有应用程序）。我该怎么做？

react-native

来源：https://stackoverflow.com/questions/56650214/react-native-fixed-header-and-footer-for-entire-app-with-navigation-drawer

2条答案

按热度按时间

t1qtbnec1#

您可以使用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}
});

赞(0）回复(0）举报 2022-12-14

2lpgd9682#

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

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;

赞(0）回复(0）举报 2022-12-14

我来回答

React Native，通过Navigation Drawer为整个应用程序修复页眉和页脚

2条答案

相关问题

热门标签

最新问答