React Navigation 路由导航库升级 5.x

2024-05-15 19:37:45

当前版本：3.0.0

升级版本：5.12.8

安装依赖

$ yarn add @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

上述依赖中按照当前项目进行合理安装即可

修改范围

react-native-gesture-handler

在入口文件的顶部进行初始化:

import 'react-native-gesture-handler'

createAppContainer

在 React Navigation 5 中，已经没有用于提供导航上下文的 createAppContainer 了。现在需要 NavigationContainer 包装。

import { NavigationContainer } from '@react-navigation/native';

createStackNavigator

在 React Navigation 3 中，我们通过静态方式调用 createStackNavigator 来配置 navigator，其中，第一个参数是包含路由信息的对象，第二个参数是 navigator 的配置 options。在 React Navigation 5 中：<

React Navigation 路由导航库升级 5.x相关推荐

React Navigation——底部导航栏设计
项目使用的框架是React Native,适配app.移动web.pcweb,记录一下自己遇到的坑 1.如何使底部导航栏的宽度随着pc web的宽度变化而变化不能使用React native 的Di ...
RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...
React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
react实现路由跳转拦截功能（导航守卫）
react实现路由跳转拦截功能(导航守卫) 背景方法1:通过Prompt组件实现react路由跳转拦截功能 Prompt组件介绍 Prompt组件示例自定义Prompt组件的提示弹窗方法2:通过 ...
React Navigation 基本使用
React Navigation 基本使用参考资料 https://reactnavigation.org/docs/ 环境搭建 Minimum requirementsreact-native & ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
【React】路由详解
文章目录 Router 介绍 Router 原理 Router 安装 Router 使用 Link 和 NavLink Route 属性 path 属性 exact 属性 Route 组件 compo ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...

最新文章

热门文章