react-navigation-draw抽屉导航

心得写在前面分享给大家：

我的实现方法，并没有完全安装官网来做，而是进行了简化，效果是一样的。没有按照官网说的修改metro.config.js文件，同时也没有 react-native-gesture-handler 的安装后，我们需要有条件地导入它。为此，请创建 2 个文件的内容部分。同时顺便说一下react-navigation-draw和react-native-drawer-layout是不一样的东西。一个叫做抽屉导航器，一个叫做抽屉布局。如果你想将抽屉布局（react-native-drawer-layout）与 React Navigation 的导航系统集成，例如想要在抽屉中显示屏幕并能够使用navigation.navigate在它们之间导航，请使用react-navigation-draw。

先看效果

一、先安装相关依赖：

javascript 复制代码

npm install react-native-reanimated
npm install @react-navigation/drawer
npm install react-native-gesture-handler

二、修改配置：babel.confug.js文件

javascript 复制代码

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  //下面plugins里内容
  plugins: [
      'react-native-reanimated/plugin'
    ]
};

三、清除一下缓存：

javascript 复制代码

npx react-native start --reset-cache

四、代码编写：

javascript 复制代码

import React ,{useEffect}from 'react';
import {ScrollView,StatusBar,StyleSheet,Text,View} from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {createStaticNavigation,useNavigation} from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from './src/pages/Home/Home';
import Food from './src/pages/Food/Food';

const MyDrawer = createDrawerNavigator({
  screens: {
    Home: Home,
    Food: Food,
  },
});

const Navigation = createStaticNavigation(MyDrawer);
export default function App() {
  useEffect(()=>{
  })
  return <SafeAreaProvider><Navigation /></SafeAreaProvider>;
}

五、对应版本：

javascript 复制代码

 "dependencies": {
    "@react-navigation/bottom-tabs": "^7.3.10",
    "@react-navigation/drawer": "^7.3.9",
    "@react-navigation/native": "^7.1.6",
    "@react-navigation/native-stack": "^7.3.10",
    "@react-navigation/stack": "^7.2.10",
    "react": "19.0.0",
    "react-native": "0.79.1",
    "react-native-gesture-handler": "^2.25.0",
    "react-native-reanimated": "^3.17.5",
    "react-native-safe-area-context": "^5.4.0",
    "react-native-screens": "^4.10.0",
    "react-native-vector-icons": "9.2.0"
  },