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"
  },
相关推荐
wen's10 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
朝阳3920 小时前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
冰冷的bin1 天前
【React Native】自定义倒计时组件CountdownView
react native
朝阳3911 天前
React Native【实用教程】(含图标方案,常用第三库,动画,内置组件,内置Hooks,内置API,自定义组件,创建项目等)
react native
朝阳3911 天前
React Native【实战范例】同步跟随滚动
react native
朝阳3913 天前
React Native【详解】动画
react native
朝阳3914 天前
React Native【详解】内置 API
react native
xx240614 天前
React Native学习笔记
笔记·学习·react native
朝阳3914 天前
React Native【实战范例】弹跳动画菜单导航
react native
草明15 天前
解决: React Native iOS webview 空白页
react native·react.js·ios