关键词：
React Navigation官方文档：https://reactnavigation.org/docs/getting-started/
安装react-navigation：
npm install @react-navigation/native
或
npx yarn add @react-navigation/native
安装react-native-screens和react-native-safe-area-context：
npm install react-native-screens react-native-safe-area-context
或
npx yarn add react-native-screens react-native-safe-area-context
安装native stack：
npx yarn add @react-navigation/native-stack
使用方法：
创建ui文件夹，并创建两个页面PageOne和PageTwo以测试跳转：
修改APP.js:
import React from 'react';
import NavigationContainer from '@react-navigation/native';
import createNativeStackNavigator from '@react-navigation/native-stack';
import PageOne from './ui/PageOne';
import PageTwo from './ui/PageTwo';
const Stack = createNativeStackNavigator();
const App = () =>
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="PageOne" component=PageOne />
<Stack.Screen name="PageTwo" component=PageTwo />
</Stack.Navigator>
</NavigationContainer>
);
export default App;
PageOne.js:
import React from "react";
import
SafeAreaView,
StatusBar,
StyleSheet,
Text,
View,
from 'react-native';
export default class PageOne extends React.Component
constructor(props)
super(props);
toPageTwo()
this.props.navigation.navigate('PageTwo');
render()
return (
<SafeAreaView>
<StatusBar barStyle='dark-content' backgroundColor='#fff' />
<View style=styles.container>
<Text style= color: '#000', fontSize: 30, fontWeight: 'bold' onPress=() => this.toPageTwo()>PageOne</Text>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create(
container:
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
height: '100%',
width: '100%'
);
PageTwo.js:
import React from "react";
import
SafeAreaView,
StatusBar,
StyleSheet,
Text,
View,
from 'react-native';
export default class PageTwo extends React.Component
constructor(props)
super(props);
render()
return (
<SafeAreaView>
<StatusBar barStyle='dark-content' backgroundColor='#fff' />
<View style=styles.container>
<Text style= color: '#000', fontSize: 30, fontWeight: 'bold' >PageTwo</Text>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create(
container:
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
height: '100%',
width: '100%'
);
跳转主要方法：
this.props.navigation.navigate('PageTwo');
‘PageTwo’ 即你在App.js中的Stack.Screen中定义的name！
传参：
this.props.navigation.navigate('PageTwo','data':'test');
目标页面通过props.route.params接收：
constructor(props)
super(props);
console.log("props>>" + JSON.stringify(props));
console.log("data>>" + props.route.params.data);
考虑到你可能要自定义导航栏，希望隐藏默认导航栏，这当然可以实现，只需要隐藏导航栏即可：
<Stack.Screen name="PageOne" component=PageOne options= headerShown: false />
<Stack.Screen name="PageTwo" component=PageTwo options= headerShown: false />
如果你需要底部bottomTab，你可以安装 @react-navigation/bottom-tabs：
const Tab = createBottomTabNavigator();
export default function App()
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component=HomeScreen />
<Tab.Screen name="Settings" component=SettingsScreen />
</Tab.Navigator>
</NavigationContainer>
);
当然，它是支持图标自定义的，包括使用bottomTab时页面路由配置，官方文档上都是非常详细的了：
https://reactnavigation.org/docs/tab-based-navigation
reactnative入门——导航和路由(代码片段)
ReactNavigation官方文档：https://reactnavigation.org/docs/getting-started/安装react-navigation：npminstall@react-navigation/native或npxyarnadd@react-navigation/native安装react-native-screen 查看详情
reactnative入门——导航和路由(代码片段)
ReactNavigation官方文档：https://reactnavigation.org/docs/getting-started/安装react-navigation：npminstall@react-navigation/native或npxyarnadd@react-navigation/native安装react-native-screens和react-native-safe-area-context：npminstallreact-native-screensreact-nati... 查看详情
flutter入门-底部导航+路由(代码片段)
*StatefulWidget如果想改变页面中的数据就要用到StatefulWidget，之前自定义组件继承的StatelessWidget是不能动态修改页面数据的//自定义有状态组件classHomePageextendsStatefulWidgetHomePage(Keykey):super(key:key);@override_HomePageStatecreateState()=>_HomePage... 查看详情
reactnative导航和状态管理
ReactNavigationvsRouters(我应该用什么？)ReduxvsReduxToolKit(应该用什么？)我应该用什么在屏幕之间导航Reac†导航或路由器，对于应用程序内部的状态管理，什么应该是有用的redux或redux工具？ 查看详情
reactnative入门基础(代码片段)
一、前言ReactNative是Facebook推出的使用React和平台原生功能来构建Android和iOS应用的开源移动跨平台框架;-视图（Views）和移动开发在Android和iOS移动应用中，一个视图是UI的基本组成部分：屏幕上的一个小矩形元素、... 查看详情
reactnative入门-环境搭建,创建第一个helloworld(代码片段)
CreateReactNativeApp 是开始构建新的ReactNative应用程序的最简单方法。它允许您启动项目而无需安装或配置任何工具来构建本机代码-无需安装Xcode或AndroidStudio。先安装Node.Js，则可以使用npm来安装create-react-native-app命令行实用程序... 查看详情
match的reactnative入门之旅(代码片段)
这是一篇学习笔记，注意事项的文章。文中的资料绝大部分出自React中文网一搭建开发环境运行react-nativeinitAwesomeProjectcdAwesomeProjectreact-nativerun-android三State（状态）我们使用两种数据来控制一个组件：props和state。pr... 查看详情
11flutter--路由和导航(代码片段)
路由导航在本章中不仅仅会谈到页面的渲染，还会阐述数据是如何进行传递的。页面跳转基本使用页面跳转发送数据页面跳转返回数据页面跳转基本使用在Flutter中页面的跳转称之为路由，它们由导航器Navigator组件管理。导航器... 查看详情
reactnative入门——入门小结(代码片段)
1.js跳转Activity后，按home键再切回应用白屏：解决方案：修改MainActivity或目标Activity启动方式，总之不能全部为SingleTask。2.代码报错修改后无法链接nodejs服务了？解决方案：尝试在nodejs服务框内按Ctrl+V。3.... 查看详情
reactnative入门——入门小结(代码片段)
1.js跳转Activity后，按home键再切回应用白屏：解决方案：修改MainActivity或目标Activity启动方式，总之不能全部为SingleTask。2.代码报错修改后无法链接nodejs服务了？解决方案：尝试在nodejs服务框内按Ctrl+V。3.... 查看详情
reactnative自定义路由管理(代码片段)
...oid还是iOS，它们都有一个默认的路由路由栈管理类。由于ReactNative官方没有提供路由管理的组件，所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由。Stack.Navigator使用的命名路由，所谓命名路由，指的是路由需... 查看详情
reactnative入门——js与native互相通信(代码片段)
使用AndroidStudio打开项目中的android目录：并等待GradleBuild完成，首次Build会花费不少时间，耐心等待！编译成功后如图：首先我们来介绍js调用native方法：1.新建文件夹mymoudles和myreactpackage；2.在mymoudles中... 查看详情
reactnative入门——js与native互相通信(代码片段)
使用AndroidStudio打开项目中的android目录：并等待GradleBuild完成，首次Build会花费不少时间，耐心等待！编译成功后如图：首先我们来介绍js调用native方法：1.新建文件夹mymoudles和myreactpackage；2.在mymoudles中... 查看详情
reactnative入门基础知识总结(代码片段)
中秋在家闲得无事，想着做点啥，后来想想，为啥不学学reactnative。在学习 ReactNative时，需要对前端（HTML，CSS，JavaScript）知识有所了解。对于JS，可以看看阮一峰老师的《ECMAScript6入门》这篇文章。里面涉及很多ES6的新特性... 查看详情
reactnative入门认识flexbox布局(代码片段)
...W3C在09年提出的在Web端取代CSS盒子模型的一种布局方式。ReactNative实现了Flexbox布局的大部分功能。 Flexbox布局所使用的属性，基本可以分为两大类：决定子组件排列规则的属性，例如：flexDirection,flexWrap,justifyContent,alignItems等。... 查看详情
路由守卫和拦截器(代码片段)
一：路由拦截器（beforeEach：路由守卫）vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。（在路由跳转时触发） 我们主要介绍的是可以验证用户登录状态的全局前置守卫，当一个导航触发时，全局前置守卫按... 查看详情
reactnative入门编写helloworld(代码片段)
在前期环境已经搭好的前提下，是不是已经有点迫不及待想要开始自己的第一个Demo之旅呢，那么从HelloWorld开始吧。如未搭建好环境，请参照：https://blog.csdn.net/u012721519/article/details/80520331 Ok,话不多说，Let'sc... 查看详情