前言
React Native(簡(jiǎn)稱RN)從誕生以來(lái)，就受到了廣大開發(fā)者的追捧。相比于Native開發(fā)，RN開發(fā)更為靈活，而且支持跨平臺(tái)（Android和iOS同時(shí)支持），也更方便熱更新，最重要的是它基本上能夠達(dá)到與Native App一樣的渲染和體驗(yàn)效果。雖然RN目前還有許多功能不夠完善，同時(shí)也存在一些兼容性問(wèn)題，作為Native開發(fā)者，我們還是可以通過(guò)混合開發(fā)（RN+原生開發(fā)）的模式來(lái)規(guī)避這些坑，這樣也能兼具RN和原生開發(fā)的共同優(yōu)勢(shì)。
準(zhǔn)備
對(duì)于前端工程師來(lái)說(shuō)，學(xué)習(xí)RN要容易得多，但是對(duì)于原生開發(fā)者來(lái)說(shuō)，學(xué)習(xí)成本還是相對(duì)較大：
首先，你需要有一定的JavaScript基礎(chǔ)，對(duì)于沒(méi)有js基礎(chǔ)的同學(xué)，想直接就從RN開始，那估計(jì)是相當(dāng)痛苦的。
其次，React作為RN的核心，在開始學(xué)習(xí)RN之前，至少要對(duì)React相關(guān)的基礎(chǔ)知識(shí)有所了解。
如果完全沒(méi)有接觸過(guò)前端，想學(xué)習(xí)RN的話，建議還是可以先學(xué)習(xí)一下html/css、js等基礎(chǔ)知識(shí)，再開始React、RN的學(xué)習(xí)，這樣可能前期花費(fèi)的時(shí)間和精力比較多，但是后期就要輕松很多，不用在學(xué)習(xí)RN的中途還要去惡補(bǔ)一些前端的基礎(chǔ)知識(shí)。
搭建開發(fā)環(huán)境
因?yàn)槲沂褂玫氖荳indows系統(tǒng)，所以下面就介紹下如何在Windows系統(tǒng)下搭建RN開發(fā)環(huán)境。
參考ReactNative中文網(wǎng)，首先我們需要裝Python2和Node，考慮到可能chocolatey國(guó)外網(wǎng)站可能訪問(wèn)較慢，我們就直接沖Python官網(wǎng)下載Python2，下載地址：https://www.python.org/downloads/
選擇2.7.13版本，注意不要選Python2以上的版本，目前RN還不支持。然后在Node.js中文網(wǎng)下載最新的Node.js的msi安裝包，注意根據(jù)自己的系統(tǒng)位數(shù)選擇。下載地址：http://nodejs.cn/download/
下載完成后直接安裝，安裝完成后建議設(shè)置npm鏡像以加速后面的過(guò)程：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安裝Yarn、RN的命令行工具（react-native-cli），Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。
npm install -g yarn react-native-cli
安裝完yarn后也要設(shè)置鏡像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安裝開發(fā)工具
我是做安卓開發(fā)，已經(jīng)有了AndroidStudio開發(fā)工具，AndroidStudio安裝和android-sdk的配置我就不介紹了，需要注意的是android-sdk路徑的環(huán)境變量ANDROID_HOME必須要配置，如果之前沒(méi)有的需要加上。
RN的開發(fā)工具有很多，像是Atom、Sublime、WebStorm等前端開發(fā)工具都能進(jìn)行RN的開發(fā)。由于筆者長(zhǎng)期使用AndroidStudio，所以我就用WebStrom了，因?yàn)樗鼈兌际怯蒍etBrains出品，操作界面、快捷鍵、插件都是一致的，不需要進(jìn)行二次學(xué)習(xí)。
WebStrom下載地址：http://www.jetbrains.com/webstorm/download/
下載安裝后，只有30天的免費(fèi)使用，需要破解的話，網(wǎng)上有很多方式。
創(chuàng)建HelloWorld
打開WebStorm，點(diǎn)擊Create New Project創(chuàng)建一個(gè)新的RN工程：
選擇左側(cè)的React Native標(biāo)簽，location選項(xiàng)為你的工程目錄和工程名稱HelloWorld，Node interpreter和React Native選項(xiàng)為默認(rèn)的就行。
點(diǎn)擊create后，就開始構(gòu)建工程了，第一次構(gòu)建過(guò)程中要去下載RN的依賴包，可能時(shí)間比較長(zhǎng)，耐心等待。構(gòu)建完成后，可以看到RN項(xiàng)目的工程目錄結(jié)構(gòu)：
其中有幾個(gè)比較關(guān)鍵的文件：
- -test-，為測(cè)試文件，里面存放一些測(cè)試用的js文件。
- android，就是一個(gè)原生的android工程項(xiàng)目，可以用androidStudio打開進(jìn)行原生開發(fā)。
- ios，就是一個(gè)原生的ios工程項(xiàng)目，可以用xcode打開進(jìn)行原生開發(fā)。
- node_module，下載的依賴庫(kù)都存放在里面，包括React和React Native，相當(dāng)于* AndroidStudio的External Libraries。
-
package.json，RN工程的遠(yuǎn)程依賴，通常是在根目錄通過(guò)命令行
npm install xxxxxx --savet添加一個(gè)庫(kù)，添加完成后，會(huì)把依賴信息自動(dòng)寫在package.json里面，相當(dāng)于AndroidStudio的build.gradle。 - index.android.js，這是android的React Native入口文件。
- index.ios.js，這是ios的React Native入口文件。
點(diǎn)擊WebStorm右上角的下拉按鈕，選擇Android：
界面上就會(huì)出現(xiàn)運(yùn)行和調(diào)試按鈕了：
連接到真機(jī)，點(diǎn)擊執(zhí)行。執(zhí)行的過(guò)程中會(huì)添加react和react-native的依賴。同時(shí)如果默認(rèn)的gradle版本是你沒(méi)有使用過(guò)的話，也會(huì)自動(dòng)去下載，所以耐心等待。當(dāng)然最好是在執(zhí)行之前通過(guò)AdnroidStudio打開RN工程下的android項(xiàng)目，將gradle版本修改到本地已有的版本。
運(yùn)行時(shí)，在真機(jī)上可能遇到白屏情況，需要開啟懸浮窗權(quán)限。也極有可能會(huì)出現(xiàn)下圖左邊的錯(cuò)誤，點(diǎn)擊RELOAD后，又會(huì)出現(xiàn)右邊的fix方案：
一般的最有可能的還是最后一種情況，即是運(yùn)行設(shè)備（真機(jī)或模擬器）與packager server沒(méi)在同一個(gè)ip，就不能用localhost了。
搖一搖手機(jī)，出現(xiàn)對(duì)話框：
點(diǎn)擊Dev Settings，進(jìn)入設(shè)置界面，點(diǎn)擊Debug server hoset &port for device，彈出對(duì)話框，輸入自己電腦所在的局域網(wǎng)的ip:8081
點(diǎn)擊確定后，回到主界面，搖一搖手機(jī)，再次點(diǎn)擊對(duì)話框中的reload，就運(yùn)行成功了：
參考：
React Native 中文網(wǎng)
從Android到React Native開發(fā)（一、入門）
