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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
常用的js方法合集
Mar 10 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 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
收藏的一个php小偷的核心程序
2007/04/09 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Pycharm中如何关掉python console
2020/10/27 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
应届中专生自荐书范文
2014/02/13 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
优秀党员个人总结
2015/02/14 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript