收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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账单首页了.

总结

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

详解RequireJs官方使用教程
§1.使用§1.1加载JavaScript文件RequireJS的目标是鼓励代码的模块化,它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码,但其主要

CheckBox多选取值及判断CheckBox选中是否为空的实例
实例如下:varchk_value=[];//定义一个数组//name是CheckBox的name属性定义的名称$('input[name="time"]:checked').each(function(){chk_value.push($(this).val());});if(chk_value.length1){a

js原生日历的实例(推荐)
突然发现日期对象可以进行加减,利用这个特性写了一个可以说是对只要会JavaScript的就可以写的日历;没有各种算法,只有一些逻辑相信只要懂javascript

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号