导航组件react-navigation如何使用

来源：动视网责编：小采时间：2020-11-27 20:08:16

导航组件react-navigation如何使用

导航组件react-navigation如何使用:这次给大家带来的是导航组件react-navigation如何使用，大家应该都有所体会，我们在一般应用都有跨tab跳转的需求，这就需要特别处理下路由，这篇文章就给大家好好分析一下。具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现

推荐度：

点击下载本文 文档为doc格式

导读导航组件react-navigation如何使用:这次给大家带来的是导航组件react-navigation如何使用，大家应该都有所体会，我们在一般应用都有跨tab跳转的需求，这就需要特别处理下路由，这篇文章就给大家好好分析一下。具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现

这次给大家带来的是导航组件react-navigation如何使用，大家应该都有所体会，我们在一般应用都有跨tab跳转的需求，这就需要特别处理下路由，这篇文章就给大家好好分析一下。

具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页.

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

相信看了以上介绍你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

导航组件react-navigation如何使用

推荐度：

点击下载本文 文档为doc格式

标签：使用导航使用导航

热门焦点

导航组件react-navigation如何使用

导航组件react-navigation如何使用

导航组件react-navigation如何使用

最新推荐

猜你喜欢

热门推荐