前言
站在用戶的角度思考問題,與客戶深入溝通,找到長汀網(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)的支持。