React Native导航器React Navigation

简介

React Native在0.44版本中将Navigator从核心库中删除,主要推荐使用于今年一月份开源的React-navigation库,据称有原生般的性能体验效果,可能成为未来React Native导航组件的主力军,下面我们来介绍下该组件的主要属性和方法.

这个库主要包含三类组件:

1. StackNavigator: 用来跳转页面和传递参数

2. TabNavigator: 类似底部导航栏,用来在同一个屏幕下切换不同界面

3. DrawerNavigator: 侧滑菜单导航栏,用于设置带抽屉导航的屏幕

官方文档: https://reactnavigation.org/docs/intro/

使用

1. 属性介绍:

1. StackNavigator属性介绍

navigationOptions：配置StackNavigator的一些属性。  
    title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用  
    header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null  
    headerTitle：设置导航栏标题，推荐  
    headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null  
    headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"  
    headerRight：设置导航条右侧。可以是按钮或者其他视图控件  
    headerLeft：设置导航条左侧。可以是按钮或者其他视图控件  
    headerStyle：设置导航条的样式。背景色，宽高等  
    headerTitleStyle：设置导航栏文字样式  
    headerBackTitleStyle：设置导航栏‘返回’文字样式  
    headerTintColor：设置导航栏颜色  
    headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0  
    gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭  
StackNavigator(RouteConfigs, StackNavigatorConfig) 构造函数:
RouteConfigs: 主要是来配置页面路由的,所有的界面都必须配置在里面.
    screen：对应界面名称，需要填入import之后的页面  
StackNavigatorConfig: 主要是配置整个路由的，包括跳转动画，跳转方式等.
    initialRouteName: 初始化哪个界面为根界面，如果不配置，默认使用RouteConfigs中的第一个页面当做根界面
    initialRouteParams: 初始化根界面参数，主要是给根视图传递一些参数，通过this.props.navigation.state.params可以取到
    navigationOptions: 配置默认的navigationOptions
    mode: 跳转方式，一种是card，默认的，在iOS上是从右到左跳转，在Android上是从下到上，都是使用原生系统的默认跳转方式。一种是modal，只针对iOS平台，模态跳转。
    headerMode: 跳转过程中，导航条的动画效果，有三个值，float表示会渐变，类似于iOS的原生效果，screen表示没有渐变。none表示隐藏导航条
    cardStyle: 可以统一定义界面的颜色，例如背景色
    transitionConfig：配置页面跳转的动画
    onTransitionStart: 页面跳转动画即将开始的回调
    nTransitionEnd: 页面跳转动画结束的回调

Navigation Prop
    navigate：路由方法，主要来启动另一个页面
    state：状态，其实StackNavigator内部维护了两个路由栈，一个名为newState，是当前显示页面之前的所有页面，包括当前界面。一个名为lastState，当然，通过state还能拿到很多参数。
    setParams: 设置参数，记住，一定不要在render方法中调用此方法。
    goBack: 返回
    dispatch: 给当前界面设置action，会替换原来的跳转，回退等事件
    
navigate
    这个方法可以传递三个参数: navigate(routeName, params, action)
    routeName: 页面名称，一定要在路由配置中配置。
    params: 传递参数到下一个页面
    action: action
setParams
    设置当前页面的参数，记住，调用此方法一定要在componentDidMount
    componentDidMount() {
    var {setParams} = this.props.navigation;
    setParams({'haha':'abc'});
}
goBack
    回退到指定界面，如果什么都不传，回退到上一个界面，传null，回退到任意界面。传key，可以回退到指定界面
    this.props.navigation.goBack();
    this.props.navigation.goBack(null);
    this.props.navigation.goBack('Profile');

2. TabNavigator在iOS上默认类似于TabBar，在Android中类似于TabLayout:

构造方法:
TabNavigator(RouteConfigs, TabNavigatorConfig)

RouteConfigs: 配置路由,也可以配置navigationOptions,但是,在这里配置的优先级比在页面中配置的优先级高，所以，我们一般在单个页面中配置所有的navigationOptions。
    screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。  

TabNavigatorConfig:
    1. tabBarComponent: 默认两种方式，TabBarBottom和TabBarTop，可以通过如下代码导入：import {TabBarBottom,TabBarTop} from 'react-navigation';，这两者的区别主要是样式和位置的区别，iOS上默认使用TabBarBottom，Android上默认使用TabBarTop。
    2. tabBarPosition: 配置tab的位置，top和bottom
    3. swipeEnabled: 是否可以滑动切换tab
    4. animationEnabled: 点击选项卡切换界面是否需要动画
    5. lazy: 是否懒加载界面，默认一次加载所有的界面，我们最好设置为true
    6. tabBarOptions: tab的样式等配置，我们下面详细说
    7. initialRouteName，第一次初始化哪个界面，默认初始化第一个。
    8. order，tab排序，默认使用配置路由的顺序
    9. paths: 配置path
    10. backBehavior，当Android点击返回键的时候，做的处理，initialRoute返回到初始化的界面，none退出应用
tabBarOptions: 这个参数主要配置样式，针对TabBarBottom和TabBarTop。
    TabBarBottom: 
        activeTintColor: 选中的文字颜色
        activeBackgroundColor: 选中的背景色
        inactiveTintColor： 未选中的文字颜色
        inactiveBackgroundColor: 未选中的背景色
        showLabel: 是否显示标题，默认显示
        style: 定义item的样式
        labelStyle: 标题的样式
    TabBarTop:
        activeTintColor: 选中的文字颜色
        inactiveTintColor： 未选中的文字颜色
        showIcon: 是否显示图标，默认显示
        showLabel: 是否显示标题，默认显示
        upperCaseLabel: 使用大写字母
        pressColor: 定义颜色，大约Android5.0的一种按压效果
        pressOpacity: 按压下去的透明度，在iOS或者Android5.0之前
        scrollEnabled: 是否能够滚动，类似于今日头条的标题头
        tabStyle: 定义item的样式
        indicatorStyle: 指示器的颜色
        labelStyle: 文字的样式
        iconStyle: 图标的样式
        style: 定义tab的样式
NavigationOptions: 配置tabBarItem的相关属性:
    title: 标题
    tabBarVisible: 是否可见
    tabBarIcon: 配置图片，当然，完全可以不使用图片
    tabBarLabel: 也是配置标题，只不过title既能配置tab的标题，也能配置navigation的标题

3. DrawerNavigator属性介绍:

navigationOptions: 配置侧滑显示的具体属性(必须写成这个名字),有以下参数
    title：通用标题，当你不写drawerLabel时，使用此参数作为侧滑标题，通常都不写
    drawerLabel：侧滑标题
    drawerIcon：侧滑的标题图标，这里会回传两个参数，{focused: boolean, tintColor: string}，focused表示是否是选中状态，tintColor表示选中的颜色，这个颜色是我们自己在根视图定义的。当然，你也可以使用其他的组件来作为图标，比如Text组件。
    
打开侧滑方法: this.props.navigation.navigate('DrawerOpen')
关闭侧滑方法: this.props.navigation.navigate('DrawerClose')

构造方法:
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig) 接收两个参数，一个为页面路由配置，一个为显示的配置.
RouteConfigs: 配置所有的界面
    screen: 对应界面名称，可以在其他页面通过这个screen传值和跳转

DrawerNavigatorConfig  
    drawerWidth: 侧滑栏的宽度，如果你不想写死，可以使用Dimensions获取屏幕的宽度，动态计算
    
    drawerPosition: 侧滑的方向，left和right，默认left
    
    contentComponent - 用于呈现抽屉内容的组件，例如导航项 接收抽屉的导航。 默认为DrawerItems,可以自定义侧滑页
    
    contentOptions: 主要配置侧滑栏条目的属性，针对DrawerItems,可以通过这个属性来设置颜色,背景颜色等
    
    initialRouteName - 初始路由的routeName  
    
    order - 定义抽屉项目顺序的routeNames数组。 
    路径 - 提供routeName到路径配置的映射，它覆盖routeConfigs中设置的路径。
    
    backBehavior - 后退按钮是否会切换到初始路由？ 如果是，设置为initialRoute，否则为none。 默认为initialRoute行为  
  
   DrawerItems的contentOptions属性  
  
    activeItemKey: 定义当前选中的页面的key
    
    activeTintColor - 选中条目状态的文字颜色  
    
    activeBackgroundColor - 选中条目的背景色  
    
    inactiveTintColor - 未选中条目状态的文字颜色 
    
    inactiveBackgroundColor - 未选中条目的背景色  
    
    onItemPress: 选中条目的回调，这个参数属性为函数，会将当前路由回调过去
    
    内容部分的样式样式对象  
    labelStyle - 当您的标签是字符串时，要覆盖内容部分中的文本样式的样式对象  

二: 界面跳转,传值,取值

在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过this.props.navigation获取并进行一些操作。

1. 通过navigate函数实现界面之间跳转:

this.props.navigation.navigate('Mine');

参数为我们在StackNavigator注册界面组件时的名称。同样也可以从当前页面返回到上一页：

this.props.navigation.goBack();  

2. 跳转时传值:

this.props.navigation.navigate('Mine',{info:'传值过去'});  

第一个参数同样为要跳转的界面组件名称，第二个参数为要传递的参数，info可以理解为key，后面即传递的参数。

3. 获取值:

{this.props.navigation.state.params.info}  

通过state.params来获取传来的参数，后面为key值。此处为info。