React Native 抽屉导航组件

在本文中，我们将了解如何在 react-native 中实现抽屉导航。为此，我们将使用 createDrawerNavigator 组件。它基本上是显示导航菜单的 UI 面板。默认情况下它是隐藏的，但当用户从屏幕边缘滑动手指时会出现。如今，移动应用程序由单个屏幕组成，因此在 React Native 中创建各种导航组件。我们想使用 React Navigation。

句法：

const Drawer = createDrawerNavigator();

   
   
 

打开和关闭抽屉的方法：

• navigation.openDrawer()：用于打开抽屉。
• navigation.closeDrawer()：用于关闭抽屉。
• navigation.toggleDrawer()：用于切换抽屉。

现在让我们从实现开始：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init myapp

• 第 3 步：现在进入您的项目文件夹，即 myapp

  cd myapp

• 第 4 步：现在将 react-navigation 安装到您的项目中。 React Navigation 用于在一个页面到另一个页面之间导航。使用以下命令安装它。

  npm install @react-navigation/native

• 第 5 步：现在使用以下命令将依赖项安装到您的 react-native 项目中。

  npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

• 第 6 步：现在从 react-navigation 安装抽屉。

  npm install @react-navigation/drawer

对于 React 选项卡导航：这也可以在 React Native 中使用

https://reactnavigation.org/docs/drawer-based-navigation/

项目结构：

示例：现在让我们实现抽屉导航。

App.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { createDrawerNavigator } 
         from '@react-navigation/drawer';
import { NavigationContainer } 
         from '@react-navigation/native';
  
function HomeScreen() {
  return (
    
        Home page
    
  );
}
  
function NotificationsScreen() {
  return (
    
      Notifications Page
    
  );
}
  
function AboutScreen() {
  return (
    
      About Page
    
  );
}
const Drawer = createDrawerNavigator();
  
export default function App() {
  return (
    
      
        
        
        
      
    
  );
}

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/navigation#react-navigation