React Native中导航组件react-navigation跨tab路由处理详解


Posted in Javascript onOctober 31, 2017

前言

大家应该都有所体会,我们在一般应用都有跨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账单首页了.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js与运算符和或运算符的妙用
Feb 14 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
ES6解构赋值实例详解
Oct 31 #Javascript
js 获取json数组里面数组的长度实例
Oct 31 #Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
canvas绘制爱心的几种方法总结(推荐)
Oct 31 #Javascript
ES6扩展运算符用法实例分析
Oct 31 #Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 #Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
求PHP数组最大值,最小值的代码
2011/10/31 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php使用PDO方法详解
2014/12/27 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
什么是索引指示器
2012/08/20 面试题
模具毕业生推荐信
2014/02/15 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
导游词之日本富士山
2020/01/06 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
java实现web实时消息推送的七种方案
2022/07/23 Java/Android