React Native 速成 005 — React Navigation 之 Tab Navigator

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

可以看到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 是選中狀態。

修改目錄結構

增加 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/