react navigation会在所有注册路由页面的props里面注入navigation，其使用方法：1、通过“const main = createstacknavigator({...})”方式创建主路由；2、通过“createbottomtabnavigator”创建底部标签栏；3、通过“createswitchnavigator”创建特殊switch路由等。
本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react navigation方法怎么用？
react-navigation 常用方法
react-navigation是rn项目使用路由管理器；除了提供路由history管理，还有导航器的ui组件！；
react-navigation会在所有注册路由页面的props里面注入navigation!!!
1.创建主路由；
createstacknavigator
其中包括项目中所使用的基本所有的页面路由；
const main = createstacknavigator({ tab: { screen: tab, navigationoptions:{ header:null } } 。。。},{ initialroutename :'tab', })
2.创建底部标签栏；
createbottomtabnavigator
即app首页底部的几个tab分页
const tab = createbottomtabnavigator({ home: { screen: home, navigationoptions:{ header:null, title:'最热', tabbaricon:({focused,tintcolor})=>{ return ( <mcicon name="chili-hot" size={16} color = {focused?tintcolor:'#404040'}></mcicon> ) } } }, 。。。},{ initialroutename :'home', tabbaroptions:{ activetintcolor:'#1d85d0' }})
3.创建特殊switch路由； 跳转之前的页面将不会进入history堆栈；
createswitchnavigator//欢迎页跳转不可返回const navigation = createswitchnavigator({ init:init, main:main},{ initialroutename :'init'})
4.创建顶部tab页标签，会占用导航栏位置
creatematerialtoptabnavigatorexport default class home extends component { render() { const tabnav = creatematerialtoptabnavigator({ tab1:{ screen: tab1, navigationoptions:{ title:'tab1', header:null } }。。。 },{。。。}) return ( <tabnav/> ) }}
5.navigationoptions常用的配置属性
headerttile: 页面标题
headertitlestyle： 标题文字的样式
headerstyle:标题整块的样式
6.tab部分的参考属性
tabbaroptions - 具有以下属性的对象:activetintcolor -活动选项卡的标签和图标颜色。activebackgroundcolor -活动选项卡的背景色。inactivetintcolor -"非活动" 选项卡的标签和图标颜色。inactivebackgroundcolor -非活动选项卡的背景色。showlabel -是否显示选项卡的标签, 默认值为 true。showicon - 是否显示 tab 的图标，默认为false。style -选项卡栏的样式对象。labelstyle -选项卡标签的样式对象。tabstyle -选项卡的样式对象。allowfontscaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。safeareainset - 为 <safeareaview> 组件重写 forceinset prop， 默认值：{ bottom: 'always', top: 'never' }； top | bottom | left | right 的可选值有： 'always' | 'never'。
bottomtabbar组件也可以草考这个属性
7.制作返回功能
通常我们在需要返回的页面上使用 this.props.navigation 获取到navigation 的props对象；
可以使用
this.props.navigation.goback()
来返回页面；但是这样做的前提是 this.props.navgation必须是当前页面的navigation;即可以查看 this.props.navigation.state.routename 来判断：
某些特殊的情况下，比如安卓返回键的返回判断有可能返回事件不是在该页面捕获，因为回退事件backhandler是会向上传递的； 那么this.props.navigation可能就不是需要回退的压面的navigation对象了；所以已使用go.back()是不会成功的；或者有些情况下naviagtion对象不一定有goback()方法 也会造成这个问题；
例如;
home页面是一级路由，detail页面是二级路由，两个页面都设置了backhandler的回调函数；若detai里面的backhandler没有被当前页面捕获的话就会传递给home里面的backhandler回调函数；那么在home里的 this.props.navigation就是指的home页面的，而不是detail，所以调用goback也不会成功！！！
解决方法：
使用navigationactions ；
所有navigationactions返回可以使用navigation.dispatch()方法发送到路由器的对象。
支持以下操作：
navigate - 导航到另一条路由
back - 回到之前的状态
set params - 设置给定路由的参数
init - 用于在状态未定义时初始化第一个状态
具体看文档：https://reactnavigation.org/docs/zh-hans/navigation-actions.html
通过：
dispatch(navigationactions.back());
就可以实行返回操作了；
注意：
dispatch()方法是在 this.props.navigation里面的
推荐学习：《react视频教程》
以上就是react navigation方法怎么用的详细内容。