React Native中导航组件react-navigation跨tab路由处理详解
作者：hello老文
这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
前言
大家应该都有所体会，我们在一般应用都有跨tab跳转的需求， 这就需要特别处理下路由，所以 下面是使用react-navigation作为路由组件的一种方式.
具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页.
方法如下：
首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件.
const Components = {
HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' },
HomeThree: { screen: HomeThree, path:'app/HomeThree' },
BillTwo: { screen: BillTwo, path:'app/BillTwo' },
BillThree: { screen: BillThree, path:'app/BillThree' },
}
const Tabs = TabNavigator({
Home: {
screen: Home,
path:'app/home',
navigationOptions: {
tabBar: {
label: '首页',
icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),
},
}
},
Bill: {
screen: Bill,
path:'app/bill',
navigationOptions: {
tabBar: {
label: '账单',
icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),
},
}
},
Me: {
screen: Me,
path:'app/me',
navigationOptions: {
tabBar: {
label: '我',
icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),
},
}
}
}, {
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazyLoad: false,
backBehavior: 'none',
tabBarOptions: {
activeTintColor: '#ff8500',
inactiveTintColor: '#999',
showIcon: true,
indicatorStyle: {
height: 0
},
style: {
backgroundColor: '#fff',
},
labelStyle: {
fontSize: 10,
},
},
});
const Navs = StackNavigator({
Home: { screen: Tabs, path:'app/Home' },
Bill: { screen: Tabs, path:'app/Bill' },
Me: { screen: Tabs, path:'app/Me' },
...Components
}, {
initialRouteName: 'Home',
navigationOptions: {
header: {
style: {
backgroundColor: '#fff'
},
titleStyle: {
color: 'green'
}
},
cardStack: {
gesturesEnabled: true
}
},
mode: 'card',
headerMode: 'screen'
});
在HomeTwo里使用react-navigation自带的reset action就可以重置路由信息了:
// push BillTwo
this.props.navigation.dispatch(resetAction);
// 使用reset action重置路由
const resetAction = NavigationActions.reset({
index: 1, // 注意不要越界
actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
NavigationActions.navigate({ routeName: 'Bill'}),
NavigationActions.navigate({ routeName: 'BillTwo'})
]
});
从HomeTwo push 到 BillTwo页面后, 点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。