React Native項(xiàng)目github址:
https://github.com/facebook/react-native
React Native項(xiàng)目官網(wǎng)文檔:
http://facebook.github.io/react-native/docs/getting-started.html
1 (三)React Native配置安裝
? ? ? ? 特別聲明:facebook官網(wǎng)說當(dāng)前react native歡迎是需要OS X,不過我也看到了有人通過windows系統(tǒng)配置該環(huán)境哈~大家有興趣可以百度搜索一下昙篙。
1.1 Homebrew安裝
????????Homebrew是OS X不可獲取的套件管理器，我們可以通過它獲取并且安裝很多組件,安裝方式如下:
ruby?-e?"$(curl?-fsSL?https://raw.githubusercontent.com/Homebrew/install/master/install)"
????????然后通過命令行執(zhí)行brew -v進(jìn)行檢查brew是否已經(jīng)安裝成功搂抒。整體截圖如下:
1.2?Node.js安裝
1.2.1 安裝nvm
????1. 打開github官網(wǎng)https://github.com/扮惦，輸入nvm搜索,選擇creationix／nvm臀蛛，打開
????2. 找到Install script，復(fù)制
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
????3. 打開終端崖蜜，把第2步復(fù)制的添加sudo權(quán)限浊仆，粘貼到終端里
????4. 此時(shí)nvm雖然安裝好了，但仍然不能用豫领，因?yàn)檫€沒有添加環(huán)境變量抡柿，nvm安裝好以后會(huì)提示添加環(huán)境變量到，第三步圖中提示自己添加一下的代碼便是等恐，如下圖沙绝，如此nvm就可以用了
1.2.2 安裝Node.js
????????第二部分: 安裝Node.js，根據(jù)官網(wǎng)文檔我們直接命令行執(zhí)行如下命令即可完成完成:
nvm?install?node?&&?nvm?alias?default?node
????????安裝截圖如下:
該會(huì)進(jìn)行安裝Node.js最新版本鼠锈，并且會(huì)給我們打個(gè)別名闪檬，方便使用。通過nvm我們可以安裝多個(gè)版本的Node.js购笆，并且可以非常輕松的選擇不同的版本進(jìn)行切換使用粗悯。
????【注意】如果現(xiàn)在采用是Node5.0版本的版本，官網(wǎng)是推薦安裝npm 2同欠，該版本比npm 3速度更加快样傍。在安裝完Node之后，命令行運(yùn)行npm install? -g npm@2安裝即可铺遂。
1.2.3 安裝watchmam
????????第三部分:安裝watchmam衫哥，該用于監(jiān)控bug文件，并且可以觸發(fā)指定的操作襟锐，安裝方式如下:
brew link autoconf
brew link automake
brew?install?watchman
????????安裝截圖如下:
1.2.4 安裝flow
?????第四部分:安裝flow,
????????flow是一個(gè) JavaScript的靜態(tài)類型檢查器撤逢，建議安裝它，以方便找出代碼中可能存在的類型錯(cuò)誤粮坞，官網(wǎng):http://www.flowtype.org/具體命令為:
brew install flow
????????安裝截圖如下:
1.3 原生開發(fā)環(huán)境安裝:
????????針對iOS開發(fā)蚊荣，我們只需要安裝Xcode7.0或者7.0以后版本，該可以通過AppStore進(jìn)行下載安裝莫杈。
? ? ? ? 針對Android開發(fā)互例，Android環(huán)境配置網(wǎng)上非常多了，我相應(yīng)看這篇文章的朋友電腦上面基本都有Android開發(fā)環(huán)境的了~針對安裝詳細(xì)(點(diǎn)擊進(jìn)入?yún)⒖嘉恼?/a>)筝闹。
1.4 ReactNative安裝
??????? 現(xiàn)在就是最后一步媳叨，也是最激動(dòng)人心的時(shí)刻到了腥光，我們使用命令行運(yùn)行如下命令安裝React Native:
sudo npm?install?-g?react-native-cli
????????安裝截圖如下:
? ? ? ?經(jīng)過以上的四個(gè)大步驟我們基本完成React Native從基本環(huán)境的搭建工作，下面我們來進(jìn)行一個(gè)實(shí)例演示React Native項(xiàng)目的效果糊秆。
2 (四)React Native第一個(gè)應(yīng)用(AwesomeProject)
? ? ? ? 經(jīng)過以上的四個(gè)大步驟我們基本完成React Native從基本環(huán)境的搭建工作柴我，下面我們來進(jìn)行一個(gè)實(shí)例演示React Native項(xiàng)目的效果。ReactNative第一個(gè)AwesomeProject扩然，就不是HelloWorld啦。
? ? ? ? 首先執(zhí)行如下命令,生成一個(gè)工程:
react-native?init?AwesomeProject
????????運(yùn)行截圖如下:
????????目錄結(jié)構(gòu)如下:
? ? ? ?我們仔細(xì)看上面的目錄聋伦，會(huì)發(fā)現(xiàn)該該生成android和ios兩個(gè)平臺(tái)的原生項(xiàng)目夫偶，大家有興趣可以打開android和ios目錄看一下，里邊就是一個(gè)Android? Studio和Xcode創(chuàng)建的項(xiàng)目觉增。其中index.android.js和index.ios.js文件為Android和IOS的空殼應(yīng)用文件兵拢。另外還有一個(gè)node_modules文件夾，該為Node.js存放和管理npm包得逾礁，也包含React Native框架文件说铃。
????????查看項(xiàng)目部分代碼:index.android.js如下:
2.1 運(yùn)行iOS應(yīng)用:
????①. 命令行執(zhí)行cd AwesomeProject,路徑切換到項(xiàng)目主目錄；
? ? ②. 點(diǎn)擊ios/AwesomeProkect.xcodeproj進(jìn)行運(yùn)行Xocde嘹履；
? ? ③. 使用編輯器進(jìn)行打開index.ios.js進(jìn)行相關(guān)修改腻扇，然后運(yùn)行應(yīng)用即可。
2.2 運(yùn)行Android應(yīng)用:
????①. 命令行執(zhí)行cd AwesomeProject,路徑切換到項(xiàng)目主目錄砾嫉；
????②. 命令行執(zhí)行react-native run-android進(jìn)行加載運(yùn)行android 應(yīng)用幼苛。
????③. 同樣可以使用編輯器進(jìn)行打開和修改index.android.js文件，接著通過菜單按鈕選擇ReloadJS來進(jìn)行刷新修改焕刮；
???? 運(yùn)行截圖如下:
? ? ? ? 這些步驟舶沿，命令執(zhí)行完之后，那么我們第一個(gè)應(yīng)用也完美運(yùn)行啦配并，具體看如下效果括荡！
3 IDE
React Native常用IDE推薦與安裝配置
http://blog.csdn.net/u014484863/article/details/51554428
3.1 Nuclide常規(guī)安裝以及配置
????????Nuclide是Facebook專門為React開發(fā)的IDE,官網(wǎng)推薦。但是Nuclide是在Atom基礎(chǔ)上面提供了一系列統(tǒng)一的插件溉旋。所以我們需要首先安裝Atom畸冲。
Nuclide項(xiàng)目官方地址:https://github.com/facebook/nuclide
3.1.1 Atom安裝
????????Atom是一個(gè)開源版本的編輯器，非常強(qiáng)大以及完美體驗(yàn)观腊，Atom最大的特色就是可以安裝很多的插件來完成我們的需求召夹。官網(wǎng)地址:https://atom.io/去官網(wǎng)下載安裝即可。
3.1.2 Nuclide安裝（不推薦安裝方式）
????????Atom已經(jīng)安裝成功了恕沫，下面開始安裝Nuclide监憎，直接打開Atom軟件，點(diǎn)擊Atom-> Preferences打開Setting婶溯，然后點(diǎn)擊install鲸阔，輸入nuclide-installer搜索偷霉，進(jìn)行下載即可，如下圖：
????????這種方式我們是選擇插件下載進(jìn)行安裝褐筛，另外的一種方式我們可以直接在命令行執(zhí)行以下命令(利用Atom的包管理器apm安裝):
apm installnuclide
????????最后重啟一下Atom即可类少。不過這兩種方式都不太推薦大家使用，這兩種方式一方面是安裝速度比較慢渔扎，而且下載安裝完之后Atom會(huì)很卡硫狞，然后提示找不到Nuclide相關(guān)模塊。
3.1.3 Nuclide安裝（強(qiáng)烈推薦安裝方式）
????????Nuclide項(xiàng)目官方地址：https://github.com/facebook/nuclide晃痴，我們知道該項(xiàng)目是Facebook官方推薦的残吩，當(dāng)然我們也給開發(fā)者提供了一種源代碼編譯安裝的方式。使用起來非常簡單：
git clone https：//github.com/facebook/nuclide.git
cd nuclide
npm install
apm link
????????終端安裝截圖如下：
????????這樣就安裝完成倘核，可以開始寫ReactNative項(xiàng)目代碼了泣侮。至于項(xiàng)目初始化以及編譯運(yùn)行方法，大家可以看前一篇文章哦紧唱！這里不再贅述活尊。
3.1.4 Nuclide使用
React Native開發(fā)之IDE（Atom+Nuclide）安裝，運(yùn)行漏益，調(diào)試
http://blog.csdn.net/hello_hwc/article/details/51612139
4 參考文檔
Android React Native講解專題
http://blog.csdn.net/developer_jiangqq
Mac搭建React Native環(huán)境遇到的坑
http://www.reibang.com/p/b97cf4040b82
在Mac上搭建ReactNative開發(fā)環(huán)境（iOS && Android）
