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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
Javascript中replace()小结
Sep 30 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
Python对象体系深入分析
2014/10/28 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
爱心捐款倡议书
2014/04/14 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Python实现滑雪小游戏
2021/09/25 Python
nginx共享内存的机制详解
2022/03/21 Servers
教你如何用cmd快速登录服务器
2022/06/10 Servers
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL