【免费下载链接】react-native-routerAwesome navigation for your React Native app.项目地址https://gitcode.com/gh_mirrors/re/react-native-router点击查看免费下载react-native-router是一款为 React Native 应用提供导航栏与页面跳转的轻量路由库Awesome navigation for your React Native app官方 README 已明确标注deprecated并建议改用 React Navigation。如果你的老项目里还在用它这篇迁移指南帮你理清它是什么、和 React Navigation 差在哪、以及 4 个步骤如何平滑迁移。react-native-router 是什么为什么被废弃react-native-router是 React Native 早期生态中最经典的导航组件之一核心思路只有一条用Router firstRoute{...} /声明一个「首屏路由」页面内调用this.props.toRoute()推入下一页、this.props.toBack()返回、this.props.reset()回到栈底自带一条带标题、返回按钮、左右角落按钮的自定义导航栏项目入口是 index.js它基于 React Native 内置的Navigator组件把路由状态route.name/route.index、侧滑返回手势边缘 28px 内滑动超 30px 触发pop()和页面渲染统一封装起来// index.js 中的核心动作 onBack: navigator.pop(); // 返回上一页 onForward: navigator.push(route); // 跳转下一页 goToFirstRoute: navigator.popToTop() // 回到首页它由三个导航栏组件协作完成均带标题、返回按钮的渐变淡入动画components/NavBarContainer.js导航栏容器同时渲染「上一页 当前页」两条导航栏做过渡components/NavBarContent.js标题、leftCorner/rightCorner布局components/NavButton.js默认 Back 文字返回按钮仓库还附了一个仿 Twitter 的示例应用展示完整的导航栏定制自定义返回箭头、右侧搜索/发布按钮twitter-example/index.js入口组装Router与全局headerStyletwitter-example/pages/HomePage.js首页列表点击条目toRoute带data跳转详情页twitter-example/components/Tweet.js列表条目组件为什么废弃根本原因是它的地基——React Native 内置Navigator组件——在 RN 0.46 起被标记弃用、0.56 直接移除。同时代码使用老版React.createClass写法、依赖react-tween-state0.0.5package.json无法在新版 RN 与 Class Component 退役后继续工作。官方给出的唯一出路就是迁移到 React Navigation。react-native-router 与 React Navigation 对比维度react-native-router旧React Navigation新技术基础RN 内置Navigator已移除跨平台导航框架与 RN 版本解耦导航模式单一 Stack推/弹栈Stack、Tabs、Drawer、Bottom Tabs 等可自由组合API 风格firstRoutethis.props.toRoute()注入式 propscreateNativeStackNavigatoruseNavigation()Hook导航栏定制headerStyle/titleStyle/leftCorner/rightCorner/backButtonComponent统一optionsheaderTitle、headerLeft、headerRight、theme数据传递路由对象里的data字段路由params页面内route.params读取手势返回仅 Stack 边缘滑动逻辑写死在index.jsgestureEnabled等内置手势支持可配置动态导航栏toRoute传headerStyle重渲染navigation.setOptions()运行时更新类型支持无官方 TypeScript 类型维护状态已废弃最后版本 0.2.1活跃社区持续迭代一句话总结旧库是「带导航栏的Navigator薄封装」React Navigation 是「完整的导航解决方案」。平滑迁移 4 步走第 1 步确认版本安装 React Navigation先确认项目的 React Native 版本RN 0.56旧代码还能跑可从容规划迁移节奏RN ≥ 0.56内置Navigator已被移除react-native-router直接不可用属必须迁移在工程目录安装新方案npm install react-navigation/native react-navigation/native-stack react-native-screens react-native-safe-area-context第 2 步替换 Router 入口建立路由配置旧写法参考 README.md 的基本用法var firstRoute { name: Welcome!, component: HelloPage }; var MyApp () ( Router firstRoute{firstRoute} headerStyle{headerStyle} rightCorner{Compose} / );新写法const Stack createNativeStackNavigator(); function App() { return ( NavigationContainer Stack.Navigator initialRouteNameHome Stack.Screen nameHome component{HomePage} options{{ title: Home }} / Stack.Screen nameDetail component{DetailPage} / /Stack.Navigator /NavigationContainer ); }映射关系Router→NavigationContainerStack.NavigatorfirstRoute→initialRouteNameScreen列表全局headerStyle/titleStyle→options与theme。第 3 步翻译导航动作页面内原来靠this.props注入的动作全部换成useNavigation()// 旧 this.props.toRoute({ name: Detail, component: DetailPage, data: item }); this.props.toBack(); this.props.reset();// 新 const navigation useNavigation(); navigation.navigate(Detail, { item }); // 跳转并携带数据 navigation.goBack(); // 返回上一页 navigation.popToTop(); // 回到首页导航栏角落按钮与动态标题// 自定义返回按钮替代 backButtonComponent useLayoutEffect(() { navigation.setOptions({ headerLeft: () BackButtonIcon onPress{() navigation.goBack()} / }); }, [navigation]); // 动态改标题 / 导航栏样式替代 toRoute 里传 headerStyle navigation.setOptions({ title: New Title });完整 API 映射速查react-native-routerReact Navigationthis.props.toRoute(route)navigation.navigate(name, params)this.props.toBack()navigation.goBack()this.props.reset()navigation.popToTop()路由data字段navigation.navigate(name, { ... })route.paramsleftCorner/rightCorneroptions.headerLeft/options.headerRight或setOptionstitleComponent/nameoptions.headerTitle字符串或组件backButtonComponentoptions.headerLeft自定义组件headerStyle/titleStyleoptionsNavigationContainer的themecustomAction(xxx)导航栏按钮内直接写回调第 4 步验证与收尾逐页面切换路由调用用旧 Twitter 示例做回归twitter-example/pages/HomePage.js 的列表 → 详情跳转 数据传递、twitter-example/index.js 的自定义返回按钮与右侧双按钮在 iOS 模拟器 / Android 真机验证边缘侧滑返回、导航栏标题与背景色过渡全量替换后卸载旧依赖react-native-router连带清理react-tween-state可参照 package.json 中的依赖列表迁移常见坑与最佳实践⚠️不要混用旧Router和新NavigationContainer同屏会出现两层导航栏、手势返回互相打架务必一次性替换入口⚠️深嵌套组件的跳转旧库要求动作「冒泡」到顶层路由才能调toRouteREADME 中的说明新库直接用useNavigation()该问题天然消失建议用独立分支或 feature flag 分页面灰度迁移git tag打好旧版快照便于回滚老项目中React.createClass等写法可借机一起升级减少技术债需要 Tab / 抽屉等复合导航时React Navigation 支持StackBottomTabsDrawer任意嵌套这是旧库无法覆盖的能力迁移检查清单已确认 React Native 版本与 React Navigation 兼容并安装依赖所有页面已在Stack.Navigator中注册firstRoute→initialRouteNametoRoute→navigatetoBack→goBackreset→popToTop导航栏按钮leftCorner/rightCorner/backButtonComponent改用headerLeft/headerRight路由data改为params传递与读取侧滑返回、动态标题回归测试通过已移除react-native-router及其依赖需要动手研究旧实现时可直接从仓库主入口 index.js 与示例应用 twitter-example/ 入手。迁移本身并不复杂——真正花时间的是逐页核对导航栏细节按清单推进即可平稳落地。赞分享【免费下载链接】react-native-routerAwesome navigation for your React Native app.项目地址https://gitcode.com/gh_mirrors/re/react-native-router点击查看免费下载相关推荐React Native Firebase Vertex AI 已弃用迁移至 Firebase AI Logicreact-native-firebase/ai完整指南React Native Firebase Vertex AI 已弃用迁移至 Firebase AI Logicreact native firebase移动开发后端Refine v5 迁移指南从 refinedev/react-router-v6 平滑升级到 React Router v7Refine v5 迁移指南从 refinedev/react router v6 平滑升级到 React Router v7 本指南基于 document前端企业应用FormKit Drag and Drop 插件开发指南从零构建自定义拖放功能FormKit Drag and Drop 插件开发指南从零构建自定义拖放功能 FormKit Drag and Drop 是一个轻量级声明式拖放库专为现代创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考