React Native中导航组件react

React Native中导航组件react

前言

大家应该都有所体会，我们在一般应用都有跨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: ({tinthttp://Color}) => (),

},

}

},

Bill: {

screen: Bill,

path:'app/bill',

navigationOptions: {

tabBar: {

label: 'hGJUMFg账单',

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页面后, 点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。