13518219792
本篇内容介绍了“react navigation方法如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
成都创新互联专注于企业成都全网营销、网站重做改版、泸州网站定制设计、自适应品牌网站建设、H5页面制作、成都商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为泸州等各大城市提供网站开发制作服务。
react navigation会在所有注册路由页面的props里面注入navigation，其使用方法：1、通过“const Main = createStackNavigator({...})”方式创建主路由；2、通过“createBottomTabNavigator”创建底部标签栏；3、通过“createSwitchNavigator”创建特殊switch路由等。
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 (
3.创建特殊switch路由； 跳转之前的页面将不会进入history堆栈；
createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
Init:Init,
Main:Main
},{
initialRouteName :'Init'
})
4.创建顶部tab页标签，会占用导航栏位置
createMaterialTopTabNavigator
export default class Home extends Component {
render() {
const TabNav = createMaterialTopTabNavigator({
Tab1:{
screen: Tab1,
navigationOptions:{
title:'tab1',
header:null
}
}
。。。
},{。。。})
return (
5.navigationOptions常用的配置属性
headerTtile: 页面标题
headerTitleStyle： 标题文字的样式
headerStyle:标题整块的样式
6.tab部分的参考属性
tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标，默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
safeAreaInset - 为
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 - 用于在状态未定义时初始化第一个状态
通过：
dispatch(NavigationActions.back());
就可以实行返回操作了
注意：dispatch()方法是在 this.props.navigation里面的。
“react navigation方法如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
