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。

先看效果

一、先安装相关依赖：

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

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

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

三、清除一下缓存：

npx react-native start --reset-cache

四、代码编写：

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

五、对应版本：

 "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"},