真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

ReactNative中導(dǎo)航組件react-navigation跨tab路由處理詳解

前言

站在用戶的角度思考問題,與客戶深入溝通,找到長汀網(wǎng)站設(shè)計(jì)與長汀網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋長汀地區(qū)。

大家應(yīng)該都有所體會,我們在一般應(yīng)用都有跨tab跳轉(zhuǎn)的需求, 這就需要特別處理下路由,所以 下面是使用react-navigation作為路由組件的一種方式.

具體情境是:app分三大模塊Home主頁, Bill賬單和Me我的, 對應(yīng)三個tab. 現(xiàn)在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill賬單首頁.

方法如下:

首先選擇路由結(jié)構(gòu), 選擇使用最外層是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}) => (),
  },
  }
 },
 Bill: {
  screen: Bill,
  path:'app/bill',
  navigationOptions: {
  tabBar: {
   label: '賬單',
   icon: ({tintColor}) => (),
  },
  }
 },
 Me: {
  screen: Me,
  path:'app/me',
  navigationOptions: {
  tabBar: {
   label: '我',
   icon: ({tintColor}) => (),
  },
  }
 }
 }, {
 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頁面后, 點(diǎn)擊BillTwo的左上角導(dǎo)航按鈕返回就能返回到Bill賬單首頁了.

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對創(chuàng)新互聯(lián)的支持。


本文名稱:ReactNative中導(dǎo)航組件react-navigation跨tab路由處理詳解
URL網(wǎng)址:http://weahome.cn/article/gijppg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部