命令install//安装基础包^6.0.6yarnadd@react-navigation/native-S//安装路由包^6.2.5yarnadd@react-navigation/native-stack-S//RNversion0.65.1Reactversion17.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';constStack=createNativeStackNavigator();constNavigator=Stack.Navigator;constScreen=Stack.Screen;路由列表//路由页面配置headerLeft（）,}}>Stack.Navigator导航全局配置详解，需要配置的参数再次对所有路由页面的导航生效，具体属性如下initialRouteName://指定路由主页类比为React和路由页面//导航器中屏幕的默认选项screenOptions:{headerShadowVisible:false,//Android导航去除阴影默认为true，状态为启用。headerTitleAlign:'center',//标题默认居中。'left'headerTitle:'Title',//全局标题在这里无效。默认显示路由页面名称//设置导航栏字体样式headerTitleStyle:{fontSize:17,color:'#333333',fontFamily:'PingFangSC-Semibold',fontWeight:'700',},headerTintColor:'red',//headerTitleStyle为导航栏字体颜色设置不生效设置statusBarStyle:'light'//"inverted"|“自动”|“光”|“黑暗”|undefined状态栏配置headerLeft:React.ReactNode,//导航左侧区域按钮配置未配置，默认显示左箭头返回图标headerRight:React.ReactNode//导航右侧区域默认无}的以上基本配置基本可以满足大部分商家的日常需求。Stack.Screen页面导航配置已经开发。这里的配置会覆盖全局配置。具体属性参数如下：constHome=lazy(()=>import('./views/home'));name='Home'//需要指定路由页面的名称Attributescomponent=Home//路由React页面挂载所需属性initialParams={{itemId:42}}//页面初始化参数//路由页面导航配置这里的配置会覆盖全局的screenOptionsoptions={{title:'积分兑换规则',//路由pagetitleheaderLeft:React.ReactNode,//导航左侧区域按钮配置未配置，默认显示左箭头返回图标。headerRight:React.ReactNode//导航右侧区域的配置默认为none。为了开发，在使用的时候需要做很多类型的声明文件。首先，添加一个全局声明文件，方便自定义钩子的调用（下面详细介绍）；我的项目开发目录如下：首先在types下添加全局声明文件ts声明文件index.ts内容如下：import{RouteProp}from'@react-na旅行/本地';//获取路由的props//枚举路由页面的所有NameexportenumViews{Home='Home',NewTask='NewTask',Redeem='Redeem',Rule='Rule',}interfaceNewTaskProps{title：细绳;动作：字符串；函数名：字符串；params:any;}//定义每个路由页面需要传递给下一个页面的参数在目标页面中声明要接受的参数exporttypeRootStackParamList={[Views.Home]:undefined;[Views.NewTask]：|{/**@description声明将参数传递给子组件*/item:NewTaskProps;回调：（）=>无效；}|不明确的;[浏览量.兑换]:|{/**@description监控页面返回回调父页面*/callback:()=>void;}|不明确的;[Views.Rule]:undefined;};//定义和声明每个子路由接口接收的具体内容数据类型useRoute后面会用exporttype说明RootRouteType=RouteProp;//这个寄存器做导航完全类型安全。//https://reactnavigation.org/docs/typescript#specifying-default-types-for-usenavigation-link-ref-etc//global声明useNavigation自定义hooks方法的参数declareglobal{namespaceReactNavigation{interfaceRootParamListextendsRootStackParamList{}}}自定义hooks目前react-navigation提供了自定义hooks方法useNavigation、useRoute等，重点介绍路由的使用useNavigation1、returnmonitoringnavigation.goBack()import{useNavigation}from'@react-navigation/native';//左边的返回按钮constheaderLeft=()=>{//在钩子中获取导航器对象constnavigation=useNavigation();return({//如果使用路由退出后无法调用native协议关闭当前RN容器navigation.canGoBack()?navigation.goBack():Alert.alert('路由主页');}}>);};2.路线跳转导航。导航importReact,{FC}from'react';导入{useNavigation}from'@react-navigation/native';从'@types'导入{Views};//这里配置alias，可以直接使用@constHome:FC=()=>{//在自定义hooks中调用导航对象constnavigation=useNavigation();//不带参数的普通跳转constjumpNewTask=()=>{//不带参数的普通跳转，如果没有全局的ReactNavigation声明，按照文档调用，会报如下错误1navigation。导航（Views.NewTask）；}//带参数跳转constjumpNewTask=()=>{//如果没有在目标页面声明入参，会报如下错误（错误2）navigation.navigate(Views.NewTask,{item:{title:'Popup',action:'CSTShowDialog',funcName:'dialog',params:{title:'Reminder',content:'请上传身份证照片，否则将收取10元发布',btns:[{color:'#ff552e',text:'OK'},{color:'#000000',text:'Cancel'},],},},callback:()=>{//新手任务返回首页拉取积分信息getTaskInfo();},});}}错误1错误23.重写导航navigation.setOptionsimportReact,{FC,useLayoutEffect,useEffect}from'react';import{View,Text,TouchableOpacity}from'react-native';import{useNavigation,useRoute}from'@react-navigation/native'const兑换：FC=()=>{constnavigation=useNavigation();constheaderRight=()=>{return({navigation.navigate(Views.Rule);}}>交换规则);};useLayoutEffect(()=>{navigation.setOptions({headerRight:()=>headerRight(),});},[]);}4.在路由页面赋参数navigation.setParamsimportReact,{FC,useLayoutEffect}来自'react';从'react-native'导入{View,Text};从'@react-navigation/native'导入{useNavigation}；常量NewT问：FC=()=>{constnavigation=useNavigation();useLayoutEffect(()=>{//初始化赋值navigation.setParams({testParam:'test'});},[]);}exportdefaultNewTask;//页面中的赋值一般使用?:可选参数的声明，否则上一页的路由跳转会报如下错误//Errordeclaration[Views.NewTask]:|{/**@description声明子组件内部传递的参数*/item:NewTaskProps;测试参数：字符串；回调：（）=>无效；}|undefined;//正确的声明方式[Views.NewTask]:|{/**@description在子组件中声明参数传递*/item:NewTaskProps;测试参数？：字符串；回调：（）=>无效；}|不明确的;5、其他API暂时不做详细说明。useRoute路由页面参数接收自定义hooks1，路由参数接收route.paramsimportReact,{FC,useLayoutEffect}from'react';import{View,Text}from'react-native';import{useNavigation,useRoute}from'@react-navigation/native';从'@types'导入{RootRouteType};constNewTask:FC=()=>{constnavigation=useNavigation();//@react-navigation/native自定义hooks获取路由参数对象//错误没有声明，直接用于报错如图1//constroute=useRoute();//正确的使用方式是先声明UseRootRouteTypeasdeclaredintheabovetypesconstroute=useRoute();useLayoutEffect(()=>{//初始化赋值navigation.setParams({testParam:'test'});//路由返回时触发调用父页面传入的回调方法模拟路由回调return()=>{route.params?.callback();};},[]);//获取路由参数constgetParams=()=>{//获取页面路由参数如下：（如图2）有父页面路由跳转参数，路由页面参数testParamconstparams=route.params=route.params;控制台日志（参数）；};}导出默认的NewTask；图1图22.其他总结以上是我业务开发中常用的功能总结。如果有更深层次的使用，欢迎留言；总结不易，转载请提供原文链接。
