接著上篇react-native-navigation步步深入之Android、ios配置篇，該篇會一步步開始構建一個app的主要架構，一個tab導航。

修改入口文件

找到項目根目錄下的index.android.js或者ios平臺對應的index.ios.js，修改里面的代碼，在react-native(0.49)之前的版本，所有的示例代碼都是直接寫在index文件里面的，清空入口文件的所有內容，改成如下：
index.android.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('navigation', () => App);

提示：但是在0.49之后的版本，默認把android和ios的入口都寫到了一個index.js里面，而且里面已經寫好了如下代碼，就無需做任何修改，但是0.49版本之后的版本，我們需要把index.js復制兩份，分別命名為index.android.js和index.ios.js。因為react-native-navigation還沒有及時更新過來，還是默認從index.android.js和index.ios.js打包的。

編輯App.js

同樣，不同的版本有些許區別，0.49之前的版本需要在跟目錄創建App.js，而0.49之后的版本默認就存在，并且0.49之前版本index.android.js和index.ios.js中的代碼在這里進行了綜合。清空App.js，添加如下代碼：

import { Navigation } from 'react-native-navigation';
import { registerScreens } from './src/screens';
registerScreens();
Navigation.startTabBasedApp({
  tabs: [
    {
      label: '首頁',
      screen: 'app.HomeScreen', // this is a registered name for a screen
      icon: require('./src/assets/images/nav1.png'),
      selectedIcon: require('./src/assets/images/nav1_active.png'), // iOS only
      title: '首頁'
    },
    {
      label: '客戶管理',
      screen: 'app.OfferScreen', // this is a registered name for a screen
      icon: require('./src/assets/images/nav2.png'),
      selectedIcon: require('./src/assets/images/nav2_active.png'), // iOS only
      title: '客戶管理'
    },
    {
      label: '車險報價',
      screen: 'app.CustomerScreen', // this is a registered name for a screen
      icon: require('./src/assets/images/nav3.png'),
      selectedIcon: require('./src/assets/images/nav3_active.png'), // iOS only
      title: '車險報價'
    },
    {
      label: '我的',
      screen: 'app.MeScreen',
      icon: require('./src/assets/images/nav4.png'),
      selectedIcon: require('./src/assets/images/nav4_active.png'), // iOS only
      title: '我的'
    }
  ]
});

從以上代碼來看，我們從src/screens/index.js中引入了一個函數（registerScreens），并且開始就執行了。接下來便是啟動一個tab導航，下面有四個頁面，這四個頁面就是一般的rn頁面，接下來就開始創建所需的文件。

注冊所有的頁面組件

在根目錄中新建目錄src，并且新建目錄screens，新建index.js，具體代碼如下：

import { Navigation } from 'react-native-navigation';

import HomeScreen from './HomeScreen';
import MeScreen from './MeScreen';
import OfferScreen from './OfferScreen';
import CustomerScreen from './CustomerScreen';

// register all screens of the app (including internal ones)
export function registerScreens() {
  Navigation.registerComponent('app.HomeScreen', () => HomeScreen);
  Navigation.registerComponent('app.MeScreen', () => MeScreen);
  Navigation.registerComponent('app.OfferScreen', () => OfferScreen);
  Navigation.registerComponent('app.CustomerScreen', () => CustomerScreen);
}

這個文件便是引入所有的頁面組件，并且在一個函數中注冊所有的頁面組件，供App.js中使用，當然這里注冊的頁面組件可以在app中任意地方使用，包括后面的頁面跳轉modal等等，我們都需要用到，具體用法后面介紹。
不過有代碼潔癖的看到這樣的代碼總覺得不爽，這還只是四個tab頁，如果一個app有幾十上百個頁面，我這里豈不是要copy幾十上百遍，這里先放著，后面再進行優化，接下來繼續創建app所需的四個tab頁的組件。

創建tab頁組件

在src/screens目錄中創建如下四個組件，基本上都可以根據如下的結構進行修改，只是改下里面的class名稱和內容罷了。
HomeScreen.js

import React, {Component} from 'react';
import {
  View,
  Text
} from 'react-native';
export default class HomeScreen extends Component {
  render () {
    return (
      <View>
        <Text>首頁</Text>
      </View>
    )
  }
}

CustomerScreen.js

import React, {Component} from 'react';
import {
  View,
  Text
} from 'react-native';
export default class CustomerScreenextends Component {
  render () {
    return (
      <View>
        <Text>客戶管理</Text>
      </View>
    )
  }
}

OfferScreen.js

import React, {Component} from 'react';
import {
  View,
  Text
} from 'react-native';
export default class OfferScreenextends Component {
  render () {
    return (
      <View>
![Uploading Video_2017-10-18_152100_528946.gif . . .]

        <Text>車險報價</Text>
      </View>
    )
  }
}

MeScreen.js

import React, {Component} from 'react';
import {
  View,
  Text
} from 'react-native';
export default class MeScreen extends Component {
  render () {
    return (
      <View>
        <Text>我的</Text>
      </View>
    )
  }
}

接下來，重新運行項目，便可以看到如下的app

示例截圖

現在，一個完整的項目總算成功的跑起來了，接下來我們就來優化下src/screens/index.js中的代碼，最終優化后代碼如下
src/screens/index.js

import { Navigation } from 'react-native-navigation';
export function registerScreens(tag, components) {
  components.map((item, index) => {
    Navigation.registerComponent(tag + '.' + item.name, () => item)
  })
}

App.js

import { Navigation } from 'react-native-navigation';
import { registerScreens } from './src/screens';

import HomeScreen from './src/screens/HomeScreen';
import MeScreen from './src/screens/MeScreen';
import OfferScreen from './src/screens/OfferScreen';
import CustomerScreen from './src/screens/CustomerScreen';

const components = [
  HomeScreen,
  MeScreen,
  OfferScreen,
  CustomerScreen
];

registerScreens('app', components);

Navigation.startTabBasedApp({
  tabs: [
    {
      label: '首頁',
      screen: 'app.HomeScreen', // this is a registered name for a screen
      icon: require('./src/assets/images/nav1.png'),
      selectedIcon: require('./src/assets/images/nav1_active.png'), // iOS only
      title: '首頁'
    },
    {
      label: '客戶管理',
      screen: 'app.OfferScreen', // this is a registered name for a screen
      icon: require('./src/assets/images/nav2.png'),
      selectedIcon: require('./src/assets/images/nav2_active.png'), // iOS only
      title: '客戶管理'
    },
    {
      label: '車險報價',
      screen: 'app.CustomerScreen', // this is a registered name for a screen
      icon: require('./src/assets/images/nav3.png'),
      selectedIcon: require('./src/assets/images/nav3_active.png'), // iOS only
      title: '車險報價'
    },
    {
      label: '我的',
      screen: 'app.MeScreen',
      icon: require('./src/assets/images/nav4.png'),
      selectedIcon: require('./src/assets/images/nav4_active.png'), // iOS only
      title: '我的'
    }
  ]
});

這樣，我們把所有的組件引用全部放到App.js里面，src/screens/index.js只有一個注冊組件的函數，接收兩個參數，一個是注冊組件的名稱前綴（可要可不要），一個就是頁面組件的數組。
這僅僅是小編的方法，當然優化代碼還有很多種，相信每個人都有不同的見解，哪一種最擅長，最習慣就用哪一種。
到此為止，用react-native-navigation正式跑起來了一個項目！接下來的文章將會繼續介紹react-native-navigation的配置以及頁面跳轉啥的，總不能所有的app都是這吊樣，總要根據設計圖做界面調整的，期待下一篇文章繼續介紹！