前言:
react-navigation是一款导航组件,之前用navigationIos虽然是纯原生,但是并不支持android端。我们当然是希望能够双平台尽量少写代码,提高复用率。在这样的情况下,发现了react-navigation。facebook也推荐此库。经过大体摸索,这个库已经具备基本导航功能,还提供了一些跳转动画,个人认为值得学习,可以使用在一般项目。导航在iOS开发中是页面跳转的灵魂,所以我们先从navigation来学起。
几大模块:
此库按UI可以分为三个部分StackNavigator,TabNavigator,DrawerNavigator.
其中,StackNavigator
可以理解为iOS开发中的UINavigator
,上方的导航栏。TabNavigator
可以理解为iOS中的TabBarController.DrawerNavigator
是一种抽屉效果,侧边滑出。
重要属性:
tabBarPosition: 设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom')
swipeEnabled:是否允许在标签之间进行滑动。
animationEnabled:是否在更改标签时显示动画。
lazy:是否根据需要懒惰呈现标签,而不是提前制作,意思是在app打开的时候将底部标签栏全部加载,默认false.
initialRouteName:'', // 设置默认的页面组件
backBehavior:'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
tabBarOptions:{
// iOS属性
// 因为第二个tabbar是在页面中创建的,所以前景色的设置对其无效,当然也可以通过设置tintColor使其生效
activeTintColor:'black', // label和icon的前景色 活跃状态下(选中)。
inactiveTintColor:'orange', // label和icon的前景色 不活跃状态下(未选中)。
activeBackgroundColor:'blue', //label和icon的背景色 活跃状态下(选中) 。
inactiveBackgroundColor:'white', // label和icon的背景色 不活跃状态下(未选中)。
showLabel:true, // 是否显示label,默认开启。
具体可以看这个简单的demo。有问题欢迎留言。其中tabbar有3种加载方式,借鉴了一篇csdn博客的(忘记保存了,记不清名字)。我选用了其中一种,nav包viewcontroller的方法,这种和iOS思想比较相近。还有2种,一种可以在外层app.js写具体属性,一种是nav直接在viewcontroller里写。