RN 使用react navigation3.x 的一个坑

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 300+累计阅读 341平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄9年

关注

原创最新推荐文章于 2026-09-16 12:17:02 发布 341 阅读 AI 写同款· GEO 优化 ›

React-Navigation各版本安装步骤对比 1.x和2.x版本 yarn add react-navigation # or with npm # npm install --save react-navigation 3.x版本 yarn add react-navigation # or with npm # npm install react-navigation yarn add react-native-gesture-... 阅读详情

解决方法

这是android/settings.gradle文件

把反斜杠修改成正斜杠就行 (如下图)

修改后的文件

收录于

当前文章被以下社区和专栏收录：

标签

#RN #Js #reac-native

React Navigation 5.x Stack的用法及Bottom-Tab，Drawer的Demo 前言生命周期对于Hooks写法，生命周期方法要简单些，但是注意的是，如果我们要在RN中使用useEffect的话，我们需要将事件发送给订阅了他们页面组件。写法上会有些麻烦，因此@react-navigation/core 提供了useFocusEffect 钩子，可以让我们更加方便的书写，demo如下： useFocusEffect( useCallback(() => { ... 阅读详情

相关推荐

React Native路由实战：React Navigation深度解析与生产级落地

在移动跨端开发中，路由系统是决定应用稳定性与用户体验的核心基础设施。React Navigation作为React Native生态事实标准的导航解决方案，其本质是一套基于导航容器、导航器、屏幕和路由状态四层协同的运行时系统，而非简单的页面跳转API。它通过统一抽象屏蔽iOS与Android平台差异，在Tab状态保持、深链接唤起、返回拦截、安全区适配等关键场景提供可预测的行为保障。尤其在中大型项目中，合理组织Stack与BottomTab嵌套结构、规范参数传递边界、利用useIsFocused与before

weixin_34187862的博客 415

react-navigation 3.x 使用

官网文档：https://reactnavigation.org/docs/zh-Hans/getting-started.html 1、安装react-navigation yarn add react-navigation # or with npm # npm install --save react-navigation 2、安装 react-native-gesture-...

随风而逝 7384

React Navigation 5.x详解

React Navigation简介在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不再被官方推荐使用。此时，我们可以选择由React Native社区开源的一款路由导航库React Navigati

xiangzhihong8的专栏 1359

react-navigation 3.x版本的使用

安装配置请看： react-navigation 3.x版本的安装以及react-native-gesture-handler配置 2.0以前版本： StackNavigator - 一次只渲染一个页面，并提供页面之间跳转的方法。当打开一个新的页面时，它被放置在堆栈的顶部 TabNavigator - 渲染一个Tab选项卡，让用户可以在几个Tab页面之间切换 Draw...

weixin_30877227的博客 242

XTDrone——无人机基于2D激光Lidar进行二维运动规划（细节提醒以及相关报错解决）

本文介绍了在Ubuntu 20.04系统无人机基于ROS Noetic实现HectorSLAM二维激光建图与运动规划的完整流程。主要内容包括：安装必要ROS依赖库；修改HectorSLAM的launch文件，解决坐标系转换问题；配置地图发布参数以避免覆盖已建地图；启动PX4仿真环境与XTDrone通信模块；最后通过2D导航目标点实现无人机运动规划。文中详细说明了各步骤的关键配置修改，并提供了处理常见错误（如TF转换超时）的解决方案。实现了从激光SLAM建图到路径规划的过程。

weixin_45390670的博客 994

【商业化】【msix打包】Python 应用打包为 MSIX 的正确流程：入口点问题与解决方案

发现用msix打包工具打包python做的exe时总找不到程序入口点，后来理了一下才发现自己误会了，需要先生成一个基本的setup.exe，msix的打包是基于这个初始的安装程序进行的。只需要点击Buile-》Compile，然后Open Output Folder就可以得到exe安装程序了。可以使用免费工具inno setup来创建初始安装包。其中{group}这样的变量会自动匹配，不用自己指定。如果点击Run会运行安装程序。

每日出拳老爷子的博客 1103

react-navigation升级3.x 问题解决方案

背景最近把之前的RN项目更新了，react-native升级到了0.58，react-navigation升级到了3.3.0。我们项目结构是TabNavigation，有A/B/C三个Tab，根据用户的权限来决定展示几个Tab，会有四种情况，ABC、AC、BC、C（C是一直存在的）。用createAppContainer创建了四个TabNavigation 升级按照旧版本的实现，创建三...

weixin_34037515的博客 657

工创赛智能搬运小车实战：视觉定位、底盘控制与RTOS调度

智能搬运系统是嵌入式控制与机器视觉融合的典型工程实践，其核心在于视觉定位精度、运动控制稳定性与实时任务调度能力。在有限算力（如STM32H7）、低功耗约束和结构化场景下，传统CV方法（如FAST+RANSAC）比轻量级深度学习更具鲁棒性与实时性；而底盘控制需穿透PID表层，直击死区补偿、编码器硬件滤波与负载自适应等物理层细节；RTOS则不是炫技工具，而是保障多模块时序确定性的刚需——尤其在视觉-控制-执行强耦合链路中，任务优先级、事件组通信与栈安全直接影响系统存活。本文聚焦全国大学生工程训练竞赛（工创赛）真

weixin_29194693的博客 266

React Native react-navigation3.x问题总结

目标版本.react-navigation3.x 1.createBottomTabNavigator中，键盘返回键返回第一个tab页解决方案: 在 createBottomTabNavigator 的 drawConfig 参数中设置 backBehavior:'none' 就可以解决 ...

wyk的博客 374

瑞芯微RK3568与RK3566芯片选型指南：从接口差异到应用场景深度解析

在嵌入式系统与边缘计算领域，芯片选型是决定产品成败的关键一步。其核心在于理解芯片的架构、接口扩展能力与系统可靠性之间的平衡。以瑞芯微（Rockchip）的RK3568和RK3566为例，这两款同为四核A55架构的芯片，在基础算力上相近，但其面向的应用赛道却因接口配置而截然不同。RK3568凭借其双千兆网口、PCIe 3.0高速接口以及全链路ECC内存支持，在技术价值上更侧重于构建高可靠、高扩展性的系统，如边缘计算网关、工业控制器和网络视频录像机（NVR）。相比之下，RK3566则以其精简的接口配置，精准服务

weixin_33314040的博客 478

基于单片机的智能温控风扇设计

该智能温控风扇系统的设计目标是根据环境温度自动控制风扇的转速或开关状态，确保用户始终处于舒适的温度范围内。实时温度监测：通过温度传感器（如DS18B20或DHT22）实时监控环境温度。风扇控制：根据温度变化自动调节风扇的转速，温度过高时风扇加速，温度适中时风扇转速降低，达到节能与舒适平衡。LCD显示：通过LCD屏幕实时显示温度信息。无线通信：通过Wi-Fi或蓝牙模块将温度数据发送至手机或云平台，支持远程控制风扇的开关或调节转速。报警功能：温度过高或过低时，蜂鸣器发出警报，提示用户注意。

2201_76125393的博客 1153

【React-native】react-navigation 3.x 自定义切换动画

继我们接入了react-navigation 作为导航，并且实现android从右往左滑，那我现在又想各个页面切换的时候动画自定义，那该怎么搞？【往期：android从右往左滑：https://blog.csdn.net/qq934235475/article/details/99436772】这就需要我们对 router 的配置文件进行更改了，总体思路就是，跳转时传入一个参数（暂且...

冯一朔 - 不想当CTO的程序员不是一个好哲学家 2716

安装openclaw时出现npm error code ENOENT npm error syscall spawn git报错的解决方案

本文主要介绍了安装openclaw时出现npm error code ENOENT npm error syscall spawn git报错的解决方案，希望能对使用openclaw的同学们有所帮助。文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 12万+

ReactNative路由：react-navigation 6.x 的基本使用

每天对自己多问几个为什么，总是有着想象不到的收获。一个菜鸟小白的成长之路（copyer） react-native官网的主推方案就是一个单独的导航库react-navigation 官网地址 https://reactnavigation.org/ react-navigation有很多的版本，并且版本的变动还是很大的，对我我刚接触react-native还是从最新的版本开始学习，最近的版本就是 6.x版本安装 yarn add @react-navigation/native .

copyer_xyf的博客 4312

【声呐技术】基于人工智能的拖曳阵声呐声学数据处理系统 SEA公司AI辅助拖曳阵系统

KraitSense是SEA公司开发的紧凑型被动拖曳阵声呐系统，核心传感器为KraitArray细线拖曳阵列。该系统专为小型舰艇、无人水面艇（USV）和无人潜航器（UUV）设计，通过人工智能与机器学习技术实现水下声学数据的自动化采集、处理与分类。系统与Mind Foundry公司开发的软件平台深度集成，形成端到端的智能反潜战（ASW）解决方案。

u012133341的博客 957

Python 爬虫高级实战：HTTPS 证书忽略与代理抓包配置

本文深入解析了HTTPS加密与SSL证书校验机制在爬虫开发中的核心问题及解决方案。文章首先剖析了HTTPS协议架构和证书校验流程，指出爬虫开发中常见的证书异常场景及其负面影响。随后详细介绍了Python主流请求库（requests、httpx、aiohttp）的证书忽略配置方法，包括同步/异步模式下的实现方案。针对代理环境，文章系统比较了HTTP、HTTPS、SOCKS5等代理类型的特性差异，并提供了完整的代理配置示例。特别对中间人抓包场景，阐述了Mitmproxy的工作原理和配置要点。最后提出了工程级爬虫

2503_91057718的博客 85

react-native 项目集成react-navigation3.x

很多刚刚接触React Native开发的小伙伴，都会有使用跳转页面的需求，在web中可以使用localtion.href来跳转，但在 react-navigation 中，需要使用导航器跳转页面，react-navigation 组件是 React Native 今后主推的一个组件，下面详细介绍如何集成 react-navigation3.x， react-navigation github...

wyk的博客 793

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

ReactNative学习----3react-navigation实现App的顶部菜单

官方文档： https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html 效果图：项目结构：安装模块： cd 到项目目录下 yarn add react-navigation@2.18.3 源代码： TopIndex 配置路由，Tab1,Tab2,Tab3分别是一个页面 TopIndex代码： import React ...

翟浩浩Android专栏 797

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版【x86|x64】

React Navigation 5.x 的安装使用遇到的坑

文章基于：https://blog.csdn.net/cream66/article/details/104650082/ **官方文档：reactnavigation 直接简单粗暴进入正题。 1.安装react-navigation/native npm install @react-navigation/native //yarn yarn add @react-navigation/native 2.添加依赖库 npm install react-native-reanimated react-.

森白的博客 1537

复分析阿尔福斯(Ahlfors) 第三版答案英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

ReactNative使用 react-navigation 详解

react-navigation是官方主推的导航组件，致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。最新版本为3.x，大多文档介绍的是 1.x 或 2.x 的用法，本文使用3.x实现 1、主要内容 StackNavigator顶部导航条，用来跳转页面和传递参数。 TabNavigator 底部标签栏，用来区分模块。 DrawerNav...

a82022424的博客 282

React Navigation 5.x的依赖安装和基本使用

React Navigation 5.x 一、简介 React Navigation是React Native用来进行屏幕页面切换的导航方案，替代了废弃的Navigator。配置React Navigation比配置Navigator要简单很多。React Navigation 5.x版本是目前最新的稳定版本。二、安装安装react-navigation/native npm instal...

cream66的博客 5503

用React Navigation实现RN组件间的跳转

传统的单页面应用，基于url的hash值进行路由跳转，hybrid App的跳转原理与此不同，其原理更像是web浏览器的前进后退。在 web 浏览器中,使用<a>标签作为锚点，链接到不同的页面。当用户单击某个链接时, 该 URL 就会被推送到浏览器历史记录堆栈。浏览器通过两个栈实现前进后退。一个栈X，一个栈Y。每次跳转到新页面时将此页面压入X，并清空Y；当点击后...

feiyu_may的博客 2959

ReactNative学习----2react-navigation实现App的底部菜单

官方文档： https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html 效果图：项目结构：安装模块： cd 到项目目录下 yarn add react-navigation@2.18.3 源代码： BottomIndex 配置路由，Home1,Home2,Home3分别是一个页面 BottomIndex 代码： imp...

翟浩浩Android专栏 476

ReactNative学习----4react-navigation实现页面跳转以及数据传递

官方文档：https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html 项目结构：安装模块： cd 到项目目录下 yarn add react-navigation@2.18.3 源代码： ConFigIndex配置路由，One把数据传给Two,Two在回传给One ConFigIndex代码： import React f...

翟浩浩Android专栏 721

React Native 集成@ant-design/react-native 3.X

React-Native 集成@ant-design/react-native 3.X 1、安装 #安装 npm install @ant-design/react-native --save #链接所有图标 react-native link @ant-design/icons-react-native 2、按需加载 1):安装babel-plugin-import #安装打包插件 npm ...

战丶后风！！的博客 1万+

RN 导航。react-navigation 3X 问题

错误代码：error: "The component for route must be a a React Component" 提示引用页面不是reactComponet。 import Home from '../home' screen：Home 改为 screen：()=><Home> 查找问题中，也有提示进行如下更改的。对我这个无效。可能针对其他版本有效...

ant1239的专栏 392

上一篇： vue自定义v-model实现表单数据双向绑定【超级简单】

下一篇： mui禁用下拉刷新，只要上拉加载问题

React Native路由实战：React Navigation深度解析与生产级落地

weixin_34187862的博客

06-20

415