React Native踩坑日记（三）—— react-navi

前提

本人入坑RN的时候, RN已经是0.46版本了. 按照RN中文网上的提示，今年年初(0.44版本)以后的RN导航条控制，官方已经不推荐使用原先的navigator组件。
在没有历史包袱的情况下，直接接触了官方推荐的 react-navigation

说是官方提供的组件，但很奇怪的是，我们在初始化RN工程的时候，node_modules默认是不会安装这个组件的，需要我们cd到工程目录，然后运行下面这句代码

npm install --save react-navigation

react-navigation（以下简称r-nav）包含三个导航模块。这一点是让我觉得很有亲和力的。特别是抽屉效果，我们iOS实现抽屉效果比较常用的就是RESideMenu，回调和代理太多，用起来还是比较笨重的。r-nav提供了一个很好的DrawerNavigator框架，文章后面会讨论（暂时先忽略）

• StackNavigator
• TabNavigator
• DrawerNavigator

参考文章

参考部分主要有两块，官方文档和一篇总结的非常好（带有demo）的博客。

• 官方文档
• 博客参考
  这篇博客中很好的总结了具体的用法及参数的含义。这里就不赘述了。
  比较麻烦的是用react-navigation时候，要设置的参数特别多

StackNavigator组件的用法和ios中的差异 —— 设计思路

iOS的情况

我们iOS中常用的 navigationController, 经常会遇到一些情况，不管是用代码创建的还是用storyboard，都会有一些设置，是针对整个导航栏的.比如整个导航栏的tintColor,backgroundColor等等，再比如我们希望在一些特定的页面，我们希望navigationBar.hidden = YES.

为了实现类似的功能，StackNavigator中引入了一个navigationOptions的变量, 包含了以下变量

• title: 这个即可以作为头部标题，也可以作为返回标题和Tab标题
• header: 可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
• headerTitle: 设置导航栏标题，推荐
• headerBackTitle: 回退标题
• headerTruncatedBackTitle: 当回退标题不能显示的时候显示此属性的标题，比如回退标题太长了
• headerRight: 定义导航栏右边视图
• headerLeft: 定义导航栏左边视图
• headerStyle: 定义导航栏的样式，比如背景色等
• headerTitleStyle: 定义标题的样式
• headerBackTitleStyle: 定义返回标题的样式
• headerTintColor: 定义导航条的tintColor，会覆盖headerTitleStyle中的颜色
• gesturesEnabled: 定义是否能侧滑返回，iOS默认true，Android默认false
  样式示意图.png

  注，在安卓中， 我们的标题会变成靠左，这时候需要添加以下代码来设置

      headerTitleStyle: { fontSize: 18, color: '#232323', alignSelf: 'center',
               marginLeft: Platform.OS === 'ios' ? 0 : -25,
        },//标题颜色/样式
  

而其实可以设置navigationOptions的地方有三处，下面分别来说明

• 在设置路由的时候，就可以设置分页面的nav属性,

navigationOptions: {}; 此处设置了, 会覆盖组件内的 static navigationOptions 设置)

• 在新建的组件中，通过 static navigationOptions = {}来设置。
  

  设置nav的路由

• 在设置初始化页面中设置根分页的navigationOptions
  

  设置跳转属性和初始页面的属性.png

---

踩坑一 —— 自动补全（文章这块后续会持续修改）

TBD