RN应用中的路由导航

React-Navigation模块（第三方模块）的使用：

官网：https://reactnavigation.org/

①下载必需的第三方模块

npm install @react-navigation/native

npm install react-native-screens

npm install react-native-safe-area-context

npm install @react-navigation/native-stack

②必须重新构建一遍当前的App安装文件

npx  react-native   run-anroid

  重新安装手机中的App

③创建路由词典

路由器(Router) >  路由列表(Routes)  >  路由(Route)*N

导航容器(NavigationContainer) >  导航器(Navigator) >  屏幕(Screen)*N

let  {Navigator,  Screen} = createNativeStackNavigator( )

<NavigationContainer>

<Navigator>

<Screen name="屏幕名称" component={组件名称}/>

.....

</Navigator>

</NavigationContainer>

  使用注意事项：

①默认情况下，第一个Screen就是首页；除非为Navigator指定了initialRouteName

②路由列表中无需配置“*”路由，因为RN项目中没有浏览器

③配置路由列表时可以为每个页面的标题栏指定标题、样式：

<Screen name="" component={}  options={{ title:'标题', 背景颜色...文字颜色...}}/>

  如果希望动态修改标题栏内容，可以使用：

props.navigation.setOptions({title:'标题', 背景颜色...文字颜色...})

④页面跳转 和 导航返回

props.navigation.navigate('屏幕名称')      

props.navigation.goBack( )

⑤跳转时传参

Page1：props.navigation.navigate('Page2', {k1:v1, k2:v2})

Page2：let {k1, k2} = props.route.params

对比： React：V18.2，一个MVVM框架 React Native：V0.69，一个基于React框架的UI组件库 React Navigation：V6.x，一个基于ReactNative的路由导航模块