溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
大家應該都有所體會，我們在一般應用都有跨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賬單首頁了.
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
