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"
  },
相关推荐
千码君20161 天前
React Native:为什么带上version就会报错呢?
javascript·react native·react.js
xiangzhihong81 天前
XTransfer 开源 XRN 框架:基于 React Native 的跨三端开发实践与鸿蒙 NEXT 攻坚
react native
wayne2142 天前
ReactNative性能优化实践方案
react native·react.js·性能优化
默默地离开2 天前
小白学习react native 第一天
前端·react native
默默地离开3 天前
React Native 入门实战:样式、状态管理与网络请求全解析 (二)
前端·react native
木西6 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(完结篇)
react native·web3·智能合约
冰冷的bin7 天前
【React Native】文本跑马灯组件MarqueeText
react native·typescript
木西8 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(兑换-前端部分)
react native·web3·solidity
小仙女喂得猪10 天前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
XTransfer技术10 天前
RN也有微前端框架了? Xtransfer的RN优化实践(一)多bundle架构
前端·react native