React Native 速成 005 — React Navi

React Navigation 是一个易于扩展且易于使用的APP导航解决方案。
Github: https://github.com/react-community/react-navigation
Home: https://reactnavigation.org/

之前的几节里，我们发现App的顶栏并没有看到常见的导航条，一般导航条由三个部分组成，左边的button icon，中间的文字，和右边的button icon。顶栏左侧的button一般是用作唤出侧边栏或者返回上一页。右边的button通常是功能性按键。

npm install --save react-navigation

Android Stack iOS Stack

可以看到React Navigation可以兼容安卓和iOS的导航，你无需编写两套导航代码。

react navigation 总共提供了三种 navigation 形式，分别是 Stack Navigator，Tab Navigator 和 Drawer Navigator。

Stack Navigator 就是普通导航，每次页面都会叠在原本页面上方。
Tab Navigator 就是底部Tab导航，点击不同tab到不同页面。
Drawer Navigator 就是侧边抽屉导航，你可以通过侧滑或点击button唤出它。
并且三种可以相互组合。

我们更改一下项目的目录结构。之前所有的view或者是screen都是放在 views/ 文件夹中的，但是有的是 tab view，有的是普通 view，有的是 drawer view，所以我们得区分开来。

tab view 就是在这个 view 中 相应的 tab icon 是选中状态，drawer view 也是在这个 view 中相应的 drawer icon 是选中状态。

Drawer Nav Tab Nav

修改目录结构

增加 tabs 目录，里面放 tab 相关的 view，之前的几个 view 都可以修改为相应的 Tab

Tab Navigator

首先介绍Tab Navigator。Tab Navigator就是最常见的在App下方的导航。之前在004中也已经讲过采用 react-native-elements 的方法创建 TabView。但是这种方法只适合非常简单的应用，如果不同Tab间需要跳转，或者与其他view需要跳转，这种方法管理就会比较困难。React Navigation 中引入了非常简单的 router 机制，可以通过声明的方法创建 Tab。

官方文档在此：https://reactnavigation.org/docs/navigators/tab

首先，导入 react-navigation 中的 TabNavigator

import { TabNavigator } from 'react-navigation';

然后，重新写我们的 Tab

import React from 'react';
import { Icon, View } from 'react-native-elements';
import { TabNavigator } from 'react-navigation';

import { HomeTab } from './tabs/HomeTab'
import { UserTab } from './tabs/UserTab'
import { ShopTab } from './tabs/ShopTab'

const App = TabNavigator(
  {
    HomeTab: {
      screen: HomeTab,
      path: '/home',
      navigationOptions: {
        tabBarLabel: '首页',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name='whatshot'
            size={30}
            type="MaterialIcons"
            color={tintColor}
          />
        ),
      }
    },
    ShopTab: {
      screen: ShopTab,
      path: '/shop',
      navigationOptions: {
        tabBarLabel: '面膜',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name='face'
            size={30}
            type="MaterialIcons"
            color={tintColor}
          />
        ),
      }
    },
    UserTab: {
      screen: UserTab,
      path: '/user',
      navigationOptions: {
        tabBarLabel: '用户',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name='account-circle'
            size={30}
            type="material-community"
            color={tintColor}
          />
        ),
      }
    }
  },{
    initialRouteName: 'HomeTab',
    animationEnabled: false,
    swipeEnabled: false,
    tabBarOptions: {
      activeTintColor: '#e91e63',
    },
  }
)

export default App;

下一节，我们将在 Tab 的基础上添加 Stack Navigator。

icons 可以参见 https://oblador.github.io/react-native-vector-icons/