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 相关文章推荐
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
几种tab切换详解
Feb 03 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
js中arguments对象的深入理解
May 14 Javascript
详解JavaScript作用域 闭包
Jul 29 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP高级OOP技术演示
2009/08/27 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
js微信分享API
2020/10/11 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
数学教学随笔感言
2014/02/17 职场文书
三好学生评语大全
2014/12/29 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
Redis特殊数据类型bitmap位图
2022/06/01 Redis