国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

React Native中導航組件react-navigation跨tab路由處理詳解

2019-11-19 15:01:29
字體:
供稿:網(wǎng)友

前言

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

具體情境是: app分三大模塊Home主頁, Bill賬單和Me我的, 對應三個tab. 現(xiàn)在需求是 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 BillTwothis.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賬單首頁了.

總結

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對武林網(wǎng)的支持。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 长乐市| 潜山县| 虎林市| 于都县| 宽城| 蒲江县| 会同县| 肇州县| 彭阳县| 宁武县| 新余市| 许昌县| 辽源市| 即墨市| 安吉县| 疏附县| 佛坪县| 江川县| 凤台县| 茂名市| 大厂| 西藏| 卢氏县| 普宁市| 开平市| 右玉县| 汉川市| 饶阳县| 庆安县| 绥化市| 泗水县| 孝义市| 山丹县| 仙游县| 焉耆| 西丰县| 额尔古纳市| 资溪县| 额敏县| 锦屏县| 正蓝旗|