前提
本人入坑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）的博客。
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
