命令装置
// 装置根底包 ^6.0.6yarn add @react-navigation/native -S// 装置路由包 ^6.2.5yarn add @react-navigation/native-stack -S//RN版本0.65.1 React版本17.0.2"react": "17.0.2","react-native": "0.65.1",路由配置
包援用
import { NavigationContainer, useNavigation } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';const Stack = createNativeStackNavigator<RootStackParamList>();const Navigator = Stack.Navigator;const Screen = Stack.Screen;路由列表
// 路由页面配置<NavigationContainer> <Stack.Navigator initialRouteName={Views.Home} screenOptions={{ headerShadowVisible: false, // android 导航去暗影 headerTitleAlign: 'center', // 题目居中 // 设置导航栏字体款式 headerTitleStyle: { fontSize: 17, color: '#333333', fontFamily: 'PingFangSC-Semibold', fontWeight: '700', }, headerLeft: () => headerLeft(), }} > <Stack.Screen name={Views.Home} component={Home} options={{ title: '每日工作' }} /> <Stack.Screen name={Views.NewTask} component={NewTask} options={{ title: '老手工作' }} /> <Stack.Screen name={Views.Redeem} component={Redeem} options={{ title: '积分兑换' }} /> <Stack.Screen name={Views.Rule} component={Rule} options={{ title: '积分兑换规定' }} /> </Stack.Navigator></NavigationContainer>属性参数详解
Stack.Navigator
导航全局配置，再次配置的参数在所有路由页面的导航下面全副失效，具体属性如下
initialRouteName: //指定路由首页 类比React的跟路由页面// 用于导航器中屏幕的默认选项screenOptions: { headerShadowVisible: false, // android 导航去暗影 默认true开启状态 headerTitleAlign: 'center', // 题目居中 默认 'left' headerTitle: '题目', //全局题目 在此设置是不失效的 默认展现路由页面的name // 设置导航栏字体款式 headerTitleStyle: { fontSize: 17, color: '#333333', fontFamily: 'PingFangSC-Semibold', fontWeight: '700', }, headerTintColor: 'red', // 导航栏字体色彩设置 如果设置了headerTitleStyle则此处设置不失效 statusBarStyle: 'light' //"inverted" | "auto" | "light" | "dark" | undefined 状态栏配置 headerLeft: React.ReactNode, //导航左侧区域按钮配置 不配置默认展现左箭头返回图标 headerRight: React.ReactNode //导航右侧区域配置 默认无}以上根底配置基本上能满足绝大多数业务的日常开发了
Stack.Screen
页面导航配置，此处的配置会笼罩全局配置，具体属性参数如下：
const Home = lazy(() => import('./views/home'));name= 'Home' //指定的路由页面的名称 必填属性component= Home // 路由React页面挂载 必填属性initialParams={{ itemId: 42 }} //页面初始化参数// 路由页面导航配置 此处的配置会笼罩全局的screenOptionsoptions={{ title: '积分兑换规定', //路由页面题目 headerLeft: React.ReactNode, //导航左侧区域按钮配置 不配置默认展现左箭头返回图标 headerRight: React.ReactNode //导航右侧区域配置 默认无}}路由应用
因为新版本的RN基本上都采纳Hooks+TypeScript的形式来开发，在应用时好多都须要做类型申明
申明文件
首先增加一个全局申明文件，不便前面的自定义hooks（上面会具体介绍）的调用；
自己的工程开发目录如下：
首先在types上面加一个全局的ts申明文件index.ts 内容如下：
import { RouteProp } from '@react-navigation/native'; // 获取route的props// 枚举进去所有的路由页面的Nameexport enum Views { Home = 'Home', NewTask = 'NewTask', Redeem = 'Redeem', Rule = 'Rule',}interface NewTaskProps { title: string; action: string; funcName: string; params: any;}// 定义每个路由页面须要传达到下个页面的参数 在目标页面外面申明要承受的参数export type RootStackParamList = { [Views.Home]: undefined; [Views.NewTask]: | { /** @description 申明往子组件外面的传参 */ item: NewTaskProps; callback: () => void; } | undefined; [Views.Redeem]: | { /** @description 监听页面返回回调父页面 */ callback: () => void; } | undefined; [Views.Rule]: undefined;};// 定义申明每个子路由界面接管的具体数据类型useRoute 前面详解应用export type RootRouteType = RouteProp<RootStackParamList>;// This registers which makes navigation fully type-safe.// https://reactnavigation.org/docs/typescript#specifying-default-types-for-usenavigation-link-ref-etc// 全局申明useNavigation自定义hooks办法的参数declare global { namespace ReactNavigation { interface RootParamList extends RootStackParamList {} }}自定义hooks
目前react-navigation提供了自定义hooks办法useNavigation、useRoute等，重点解说一下路由的应用
useNavigation
1、返回监听navigation.goBack()
import { useNavigation } from '@react-navigation/native';// 左侧返回按钮const headerLeft = () => { // hooks外面获取导航器对象 const navigation = useNavigation(); return ( <TouchableOpacity onPress={() => { // 如果无奈在应用路由退出后 调用native协定敞开以后RN容器 navigation.canGoBack() ? navigation.goBack() : Alert.alert('路由首页'); }} > <Image style={{ height: 25, width: 25, }} source={require('./images/back.png')} /> </TouchableOpacity> );};2、路由跳转navigation.navigate
import React, { FC } from 'react';import { useNavigation } from '@react-navigation/native';import { Views } from '@types'; //此处配置了alias 能够间接应用@const Home: FC = () => { // 自定义hooks外面调用导航对象 const navigation = useNavigation(); // 一般不带参数跳转 const jumpNewTask = () => { //不带参数的一般跳转 如果没有全局的ReactNavigation申明 按文档调用会报如下谬误一的问题 navigation.navigate(Views.NewTask); } // 带参数跳转 const jumpNewTask = () => { //如果不再目标页面做入参的申明会有如下报错（谬误二） navigation.navigate(Views.NewTask, { item: { title: '弹窗', action: 'CSTShowDialog', funcName: 'dialog', params: { title: '舒适提醒', content: '请上传证件照，否则发帖须要扣费10元', btns: [ { color: '#ff552e', text: '确定' }, { color: '#000000', text: '勾销' }, ], }, }, callback: () => { // 老手工作返回首页 拉取积分信息 getTaskInfo(); }, }); }}报错一
报错二
3、重写导航navigation.setOptions
import React, { FC, useLayoutEffect, useEffect } from 'react';import { View, Text, TouchableOpacity } from 'react-native';import { useNavigation, useRoute } from '@react-navigation/native'const Redeem: FC = () => { const navigation = useNavigation(); const headerRight = () => { return ( <TouchableOpacity onPress={() => { navigation.navigate(Views.Rule); }} > <Text style={styles.headerRight}>兑换规定</Text> </TouchableOpacity> ); }; useLayoutEffect(() => { navigation.setOptions({ headerRight: () => headerRight(), }); }, []);}4、路由页面内赋值参数navigation.setParams
import React, { FC, useLayoutEffect } from 'react';import { View, Text } from 'react-native';import { useNavigation } from '@react-navigation/native';const NewTask: FC = () => { const navigation = useNavigation(); useLayoutEffect(() => { // 初始化赋值 navigation.setParams({ testParam: 'test' }); }, []);}export default NewTask;// 页面内赋值个别要应用?:可选参数的形式申明 否则上个页面的路由跳转会报如下谬误//谬误申明[Views.NewTask]: | { /** @description 申明往子组件外面的传参 */ item: NewTaskProps; testParam: string; callback: () => void; } | undefined;// 正确的申明形式[Views.NewTask]: | { /** @description 申明往子组件外面的传参 */ item: NewTaskProps; testParam?: string; callback: () => void; } | undefined;5、其余
其余API暂不做详解
useRoute
路由页面参数接管自定义hooks
1、路由参数接管route.params
import React, { FC, useLayoutEffect } from 'react';import { View, Text } from 'react-native';import { useNavigation, useRoute } from '@react-navigation/native';import { RootRouteType } from '@types';const NewTask: FC = () => { const navigation = useNavigation(); // @react-navigation/native自定义hooks外面获取路由参数对象 // 谬误 未声明间接应用报错如下 图一 // const route = useRoute(); // 正确应用形式 先申明后应用RootRouteType如上types外面的申明 const route = useRoute<RootRouteType>(); useLayoutEffect(() => { // 初始化赋值 navigation.setParams({ testParam: 'test' }); // 路由返回时触发调用父页面传入的callback办法，模仿路由回调 return () => { route.params?.callback(); }; }, []); // 路由参数获取 const getParams = () => { // 页面获取到的路由参数如下：（图二所示）有父页面路由跳转的传参，有本页面类本人注册的路由页面参数testParam const params = route.params; console.log(params); };}export default NewTask;图一
图二
2、其余
总结
以上是自己业务开发中罕用的性能总结，有更深层次的应用，欢送留言；总结不易，转载请赋原文链接。