ReactNavigateDrawerWithBottomTab

使用React Navigation V6导航抽屉内的底部选项卡视图

作者

使用React Navigation V6导航抽屉内的底部选项卡视图

这是导航抽屉/侧边栏中的底部选项卡视图与 React Native 中的 React Navigation 的示例。 在这个例子中，我们将使用react-navigation来制作导航抽屉和选项卡。 我希望您已经看过我们关于 React Native 导航抽屉的文章，因为在这篇文章中，我们只是扩展了上一篇文章以显示导航抽屉内的底部选项卡视图。

在此示例中，我们有一个导航抽屉，导航菜单中有 3 个屏幕，并且导航抽屉的第一个屏幕上有一个底部选项卡。 当我们打开 Screen1 时，底部选项卡将可见，而在其他选项上，该底部选项卡将不可见。

推荐：使用React Navigation V6在屏幕之间导航

创建抽屉导航器

<NavigationContainer>
  <Drawer.Navigator>
    <Drawer.Screen
      name="HomeScreenStack"
      options={{ drawerLabel: 'Home Screen Option' }}
      component={HomeScreenStack} />
    <Drawer.Screen
      name="SettingScreenStack"
      options={{ drawerLabel: 'Setting Screen Option' }}
      component={SettingScreenStack} />
  </Drawer.Navigator>
</NavigationContainer>

创建底部选项卡导航器

<Tab.Navigator initialRouteName="HomeScreen">
  <Tab.Screen
    name="HomeScreen"
    component={HomeScreen}
    options={{tabBarLabel: 'Home Screen'}}  />
  <Tab.Screen
    name="ExploreScreen"
    component={ExploreScreen}
    options={{tabBarLabel: 'Explore Screen'}} />
</Tab.Navigator>

在此示例中，我们将在抽屉导航器中创建一个选项卡导航器，所以让我们开始吧。

制作 React Native 应用程序

React Native 入门将帮助您更多地了解如何制作 React Native 项目。 我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。 尝试卸载 cli 并使用 npx 运行 cli。

这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。

安装依赖项

对于导航，我们需要添加 react-navigation 和其他支持依赖项。

要安装依赖项，请打开终端并跳入您的项目

cd ProjectName

1. 安装 react-navigation

npm install @react-navigation/native --save

2.其他支持库 react-native-screens 和 react-native-safe-area-context

npm install react-native-screens react-native-safe-area-context --save

react-native-screens 软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。 编辑 MainActivity.java 文件位于 android/app/src/main/java/<your package name>/MainActivity.java。

将以下代码添加到正文中 MainActivity 班级：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

并确保在此文件顶部的包声明下方添加以下导入声明：

import android.os.Bundle;

需要进行此更改，以避免与 View 状态在 Activity 重新启动期间未一致持久相关的崩溃。
3. 对于抽屉导航器安装

npm install @react-navigation/drawer --save

4.现在我们需要安装并配置install react-native-gesture-handler 和 react-native-reanimated 抽屉导航器所需的库：

npm install react-native-gesture-handler react-native-reanimated --save

配置 react-native-reanimated 将 Reanimated 的 Babel 插件添加到您的 babel.config.js （重新启动的插件必须列在最后。）

module.exports = {
  presets: (
    ...
  ),
  plugins: (
    ... ,
    'react-native-reanimated/plugin'
  ),
};

配置 react-native-gesture-handler，在条目文件的顶部添加以下内容（确保它位于顶部并且前面没有其他内容），例如 index.js 或者 App.js

import 'react-native-gesture-handler';

注意：如果您正在为 Android 或 iOS 进行构建，请不要跳过此步骤，否则即使您的应用程序在开发中运行良好，也可能会在生产中崩溃。 这不适用于其他平台。

5. 对于底部导航器安装

npm install @react-navigation/bottom-tabs --save

6. 这些步骤对于抽屉导航和底部选项卡导航来说已经足够了，但在本例中，我们还在屏幕之间移动，因此我们还需要 Stack Navigator

npm install @react-navigation/native-stack --save

CocoaPods 安装

请使用以下命令安装CocoaPods

npx pod-install

项目结构

要开始此示例，您需要创建一个名为的目录 页面 在您的项目中并创建三个文件 ExploreScreen.js, 主屏.js， 和 设置屏幕.js。

导航抽屉式顶部选项卡结构

代码

现在在任何代码编辑器中打开 App.js 并将代码替换为以下代码

应用程序.js

// React Navigate Drawer with Bottom Tab
// https://aboutreact.com/bottom-tab-view-inside-navigation-drawer/

import 'react-native-gesture-handler';

import * as React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import HomeScreen from './pages/HomeScreen';
import ExploreScreen from './pages/ExploreScreen';
import SettingScreen from './pages/SettingScreen';

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const BottomTabStack = () => {
  return (
    <Tab.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{headerShown: false}}>
      <Tab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home Screen',
          /*tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="home"
              color={color}
              size={size}
            />
          ),*/
        }}
      />
      <Tab.Screen
        name="ExploreScreen"
        component={ExploreScreen}
        options={{
          tabBarLabel: 'Explore Screen',
          /*tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="settings"
              color={color}
              size={size}
            />
          ),*/
        }}
      />
    </Tab.Navigator>
  );
};

const HomeScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="BottomTabStack" component={BottomTabStack} />
    </Stack.Navigator>
  );
};

const SettingScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="SecondPage"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="SettingScreen" component={SettingScreen} />
    </Stack.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e', //Set Header color
          },
          headerTintColor: '#fff', //Set Header text color
        }}>
        <Drawer.Screen
          name="HomeScreenStack"
          options={{
            drawerLabel: 'Home Screen Option',
            title: 'Home Screen',
          }}
          component={HomeScreenStack}
        />
        <Drawer.Screen
          name="SettingScreenStack"
          options={{
            drawerLabel: 'Setting Screen Option',
            title: 'Setting Screen',
          }}
          component={SettingScreenStack}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

主屏.js

在任何代码编辑器中打开pages/HomeScreen.js，并将代码替换为以下代码。

// React Navigate Drawer with Bottom Tab
// https://aboutreact.com/bottom-tab-view-inside-navigation-drawer/

import * as React from 'react';
import {Button, View, Text, SafeAreaView} from 'react-native';

const HomeScreen = ({navigation}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 16}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}>
            Home Screen
          </Text>
          <Button
            onPress={() => navigation.navigate('SettingScreenStack')}
            title="Go to Setting Screen"
          />
          <Button
            onPress={() => navigation.navigate('ExploreScreen')}
            title="Go to Explore Screen"
          />
        </View>
        <Text
          style={{
            fontSize: 18,
            textAlign: 'center',
            color: 'grey'
          }}>
          React Navigate Drawer with Bottom Tab
        </Text>
        <Text
          style={{
            fontSize: 16,
            textAlign: 'center',
            color: 'grey'
          }}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default HomeScreen;

ExploreScreen.js

在任何代码编辑器中打开pages/ExploreScreen.js，并将代码替换为以下代码。

// React Navigate Drawer with Bottom Tab
// https://aboutreact.com/bottom-tab-view-inside-navigation-drawer/

import * as React from 'react';
import {Button, View, Text, SafeAreaView} from 'react-native';

const ExploreScreen = ({navigation}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 16}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}>
            Explore Screen
          </Text>
          <Button
            onPress={() => navigation.navigate('SettingScreen')}
            title="Go to Setting Screen"
          />
          <Button
            onPress={() => navigation.navigate('HomeScreen')}
            title="Go to Home Screen"
          />
        </View>
        <Text
          style={{
            fontSize: 18,
            textAlign: 'center',
            color: 'grey'
          }}>
          React Navigate Drawer with Bottom Tab
        </Text>
        <Text
          style={{
            fontSize: 16,
            textAlign: 'center',
            color: 'grey'
          }}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default ExploreScreen;

设置屏幕.js

在任何代码编辑器中打开pages/SettingScreen.js，并将代码替换为以下代码。

// React Navigate Drawer with Bottom Tab
// https://aboutreact.com/bottom-tab-view-inside-navigation-drawer/

import * as React from 'react';
import {Button, View, Text, SafeAreaView} from 'react-native';

const SettingScreen = ({navigation}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 16}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}>
            Setting Screen
          </Text>
          <Button
            onPress={() => navigation.navigate('HomeScreenStack')}
            title="Go to Home Stack"
          />
          <Button
            onPress={() => navigation.navigate('HomeScreen')}
            title="Go to Home Screen"
          />
          <Button
            onPress={() => navigation.navigate('ExploreScreen')}
            title="Go to Explore Screen"
          />
        </View>
        <Text
          style={{
            fontSize: 18,
            textAlign: 'center',
            color: 'grey'
          }}>
          React Navigate Drawer with Bottom Tab
        </Text>
        <Text
          style={{
            fontSize: 16,
            textAlign: 'center',
            color: 'grey'
          }}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default SettingScreen;

运行 React Native 应用程序

再次打开终端并使用跳转到您的项目。

cd ProjectName

1.启动Metro Bundler

首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。 要启动 Metro 捆绑程序，请运行以下命令

npx react-native start

一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。 让 Metro Bundler 在自己的终端中运行。 打开一个新终端并运行该应用程序。

2.启动React Native应用程序

在 Android 虚拟设备或真实调试设备上运行项目

npx react-native run-android

或在 iOS 模拟器上运行（仅限 macOS）

npx react-native run-ios

输出截图

这就是如何使用 React Native 中的 React Navigation 在导航抽屉/侧边栏中添加底部选项卡视图。 如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。

推荐：如何在Ubuntu Linux中安装Firefox

发表评论