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

总结

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