關於如何在mac下搭建React環境這裡就不詳細介紹了，有興趣的朋友可以看：在Mac上搭建RN基礎環境，今天要說的是如何在mac下使用Atom＋Nuclide組合環境來開發專案。

安裝Atom

解壓atom，開啟atom，你看到的介面應該是這樣的 。

安裝Nuclide

安裝Nuclide外掛有兩種方式。

1.圖形化安裝：

點選選單欄：Atom->Preferences,或者可以”Command+,”，或者快捷鍵開啟。然後，在Install Packets的輸入框中，輸入nuclide，出現的第一個就是我們想要安裝的，點選install 。

安裝完成之後，在工具欄多了一個Nuclide欄。

預設安裝nuclide之後，會安裝一大堆的依賴包，如果沒有預設安裝這些依賴包，可以選中,Packages->Settings View->Manage Packets

搜尋nuclide，再nuclide package上雙擊，進入設定，勾選Install recommended packets on startup 。

最後重啟atom，就可以看到nuclide外掛了。

命令列安裝：

apm install nuclide

命令列安裝完成後，開啟Atom，選擇Packages->Settings View->Manage Packets ， 然後選擇Packages，Nuclide中點選Settings。

勾選Install recommended packets on startup 。

在Nuclide執行專案

第一步，執行react native packager。點選 command + shift + p開啟command palette（開啟終端選項），然後輸入：

react native start

選擇Nuclide React Native :Start packager。

當然我們也可以使用Nuclide的圖形化介面。

注：常見錯誤：

/Users/huangwenchen/Desktop/Demo/node_modules/react-native/local-cli
 
/cli.js:123
class CreateSuppressingTerminalAdapter extends TerminalAdapter {
^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

說明你node的版本太低,執行以下命令更新。

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

第二步，終端執行專案 。
cd到專案目錄，執行。

$ react-native run-ios
$ react-native run-android

navigator例項

首先先來看一下效果圖。

匯入react-native-tab-navigator框架，在專案目錄下：

npm install react-native-tab-navigator –save

然後在專案中引入：

import TabNavigator from 'react-native-tab-navigator';

完整程式碼：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

export default class Shop extends Component {

  constructor(props) {
          super(props);
          this.state={
              selectedTab:'home'//預設選中home
          }
      }

  render() {

    var homeView=(
                <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}>
                    <Text style={{fontSize: 30}}>首頁</Text>
                </View>
            );
            var settingView=(
                <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}>
                    <Text style={{fontSize: 30}}>設定</Text>
                </View>
            );

    return (

         <TabNavigator
               tabBarStyle={{ height: 70 }}
           >
               <TabNavigator.Item
                   selected={this.state.selectedTab === 'home'}
                   title="首頁" //Tab文字
                   renderIcon={() => <Image style={styles.img} source={require('./image/tab_message_n.png') }/>}//預設圖示
                   renderSelectedIcon={() => <Image style={styles.img} source={require('./image/tab_message_n.png') }/>}//選中圖示
                   badgeText="9+"//訊息數目
                   onPress={() => this.setState({ selectedTab: 'home' })}
               >
                   {homeView}
               </TabNavigator.Item>
               <TabNavigator.Item
                   selected={this.state.selectedTab === 'setting'}
                   title="設定"
                   renderIcon={() => <Image style={styles.img} source={require('./image/tab_mine_n.png') }/>}
                   renderSelectedIcon={() => <Image style={styles.img} source={require('./image/tab_mine_p.png') }/>}
                   onPress={() => this.setState({ selectedTab: 'setting' })}
               >
                   {settingView}
               </TabNavigator.Item>
           </TabNavigator>
    );
  }
}

const styles = StyleSheet.create({
  flex:{
        flex:1,
    },
    center:{
        justifyContent:'center',
        alignItems:'center'
    },
    img: {
        width: 45,
            height: 35,
    },
});

AppRegistry.registerComponent('Shop', () => Shop);

注：專案所用的圖片放在image/*下。