心得寫在前面分享給大家：

我的實現方法，并沒有完全安裝官網來做，而是進行了簡化，效果是一樣的。沒有按照官網說的修改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"},

?