React Native 是FaceBook開源的一個(gè)項(xiàng)目，F(xiàn)aceBook希望可以用寫 Web App 的方式去寫 Native App。它可以讓我們用JS和React來開發(fā)應(yīng)用，使用React Native可以通吃Android 和 IOS ,以及Web,僅僅需要一份業(yè)務(wù)邏輯代碼就可以來創(chuàng)建我們的應(yīng)用。
起源
React Native 是由 React 衍生出來的，而 React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)镕aceBook對市場上所有 JavaScript MVC 框架，都不太滿意，就決定自己寫一套，用來架設(shè)自己的 Instagram 的網(wǎng)站。等做出來以后，發(fā)現(xiàn)這套東西很不錯(cuò)，而且好用，就在2013年5月開源了。
而衍生的 React Native 項(xiàng)目，希望用寫 Web App 的方式去寫 Native App。這樣同一組人只需要寫一次 UI ，就能同時(shí)運(yùn)行在服務(wù)器、瀏覽器和手機(jī)上。FaceBook最早發(fā)布的關(guān)于React Native是針對IOS的，而React Native for Android是在去年也就是2015年9月15日開源發(fā)布的?，F(xiàn)階段React Native的體驗(yàn)雖然已經(jīng)很不錯(cuò)了，只能說很接近原生應(yīng)用，但是還是不能達(dá)到Native App的體驗(yàn)。所以它很火，將來的事，我們將來說，但是目前已經(jīng)非?；鹆?，多門技術(shù)，多條路。我們也應(yīng)該學(xué)學(xué)了。
環(huán)境搭建
因?yàn)槲矣玫氖莔acbook，所以這次環(huán)境搭建是根據(jù)mac電腦來說的，不過大家放心，針對windows電腦的環(huán)境搭建，我會(huì)分享給大家一篇文章或者視頻的，不會(huì)忘了你們的。
Homebrew安裝
Homebrew是一款自由及開放源代碼的軟件包管理系統(tǒng)，用以簡化Mac OS X系統(tǒng)上的軟件安裝過程，Homebrew以Ruby語言寫成，針對于Mac OS X操作系統(tǒng)自帶Ruby的版本。默認(rèn)安裝在/usr/local，由一個(gè)核心git版本庫構(gòu)成，以使用戶能更新Homebrew。是 OS X 不可或缺的套件管理器。
安裝之前，你可以先檢查一下電腦上是否已經(jīng)安裝了Homebrew，檢查方式如下：
在終端執(zhí)行下列命令：
brew -v
如果已經(jīng)安裝了，就像下圖一樣，顯示版本號(hào)。
如果沒有安裝，那就可以用下面這種方式，進(jìn)行安裝，在終端上直接輸入下面的命令即可：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Node.js的安裝
Node.js?是一個(gè)基于Chrome V8 引擎的 JavaScript 運(yùn)行時(shí)。 Node.js 使用高效、輕量級(jí)的事件驅(qū)動(dòng)、非阻塞 I/O 模型。Node.js 之生態(tài)系統(tǒng)是目前最大的開源包管理系統(tǒng)。我們都知道React Native是需要使用js開發(fā)的，所以Node.js是必不可少的安裝。
安裝Node.js也很簡單，如下：
nvm install node && nvm alias default node
可能你發(fā)現(xiàn)了，在Terminal終端上使用的命令是nvm，如果你沒有安裝nvm是會(huì)提示command not found的，所以我們還得先安裝nvm。
nvm 是 Node.js 的版本管理器，可以輕松安裝各個(gè)版本的 Node.js 版本。安裝方式如下：
我們可以通過Homebrew安裝：
brew install nvm
或者通過這里的方式安裝，地址：https://github.com/creationix/nvm#installation
安裝完了nvm，我們這里最好配置一下環(huán)境變量到.bash_profile文件，因?yàn)槿绻慌渲玫脑?，容易出現(xiàn)這個(gè)錯(cuò)誤nvm command not found。
配置方式如下：
export NVM_DIR="/Users/loonggg/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
檢查是否安裝好了node和nvm我們可以通過如下方式：
bogon:~ loonggg$ node -v
v5.10.1
bogon:~ loonggg$ npm -v
3.8.3
安裝watchman 和 flow
- Watchman 是 facebook 的一個(gè)開源項(xiàng)目，它開源用來監(jiān)視文件并且記錄文件的改動(dòng)情況，當(dāng)文件變更它可以觸發(fā)一些操作,例如執(zhí)行一些命令等等。
- flow是一個(gè)Javascript靜態(tài)類型檢查器。Flow為Javascript添加了靜態(tài)類型檢查，以提高開發(fā)效率和代碼質(zhì)量。
安裝方式如下：
brew install watchman
brew install flow
安裝React Native
我們使用npm進(jìn)行安裝，如下：
npm install -g react-native-cli
安裝完React Native之后，要想運(yùn)行或者初始化一個(gè)項(xiàng)目，然后運(yùn)行到模擬器或者真機(jī)，我們需要搭建一個(gè)Android或者ios開發(fā)環(huán)境，我這里只介紹android，相信想學(xué)習(xí)React Native的同學(xué)，電腦上都基本上有了Android的開發(fā)環(huán)境。但是可能會(huì)有坑，有一個(gè)大坑就是得配置SDK的環(huán)境變量：ANDROID_HOME。
SDK環(huán)境變量的配置
- 啟動(dòng)Terminal終端工具
- 輸入cd ~/ 進(jìn)入當(dāng)前用戶的home目錄
- 創(chuàng)建：
touch .bash_profile
- 打開并編輯：
open .bash_profile
- 在文件中寫入以下內(nèi)容：export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools
友情提示：上述路徑，請換成自己電腦上的SDK所在路徑 - 執(zhí)行如下命令：
source .bash_profile
- 驗(yàn)證：輸入adb回車。如果未顯示command not found，說明此命令有效，環(huán)境便亮設(shè)置完成。
創(chuàng)建我們的第一個(gè)React Native應(yīng)用
初始化項(xiàng)目
react-native init AwesomeProject
上面的AwesomeProject這個(gè)項(xiàng)目名字，你可以自己隨意定義，自己命名，沒有限制。
運(yùn)行項(xiàng)目
- 切換到AwesomeProject的主目錄
- 運(yùn)行項(xiàng)目命令
react-native run-android
- 我們使用編輯器打開和修改index.android.js文件，調(diào)出模擬器菜單鍵，選擇重新載入 js 即可看到變化。
啟動(dòng)后，模擬器效果圖：
到這里我們就把環(huán)境配置講完了，關(guān)于windows上的安裝，我會(huì)給大家發(fā)篇資料或者視頻的。
