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"
  },
相关推荐
张元清2 天前
从零开始编写 useWindowSize Hook
react native·react.js
_一两风4 天前
React性能优化深度指南:从基础到高级技巧
react native·性能优化
谢尔登6 天前
【React Native】路由跳转
javascript·react native·react.js
Carson带你学Android7 天前
都2025了,【跨平台框架】到底该怎么选?
android·flutter·react native
谢尔登9 天前
【React Native】布局和 Stack 、Slot
javascript·react native·react.js
Misha韩9 天前
React Native 基础tabBar和自定义tabBar - bottom-tabs
android·react native
wayne21410 天前
从零开始学习 Redux:React Native 项目中的状态管理
学习·react native·react.js
OEC小胖胖10 天前
React Native 在 Web 前端跨平台开发中的优势与实践
前端·react native·react.js·前端框架·web
henujolly10 天前
react native学习record one month
学习·react native·react.js
wayne21411 天前
跨平台移动开发技术深度分析:uni-app、React Native与Flutter的迁移成本、性能、场景与前景
react native·架构