[React Native Android安利系列]搭建React Native Android環境
React-Native的橫空出世，滿足了前端工程師們的愿景，擺脫了瀏覽器，前端開發者們又有了一個方向。但是本人認為，ReactNative更像是套了一層前端殼子的原生開發，要想了解RN還是需要多多理解原生開發的。廢話不多說，想了解更多的RN心靈雞湯，自己去百度就好了。
搭建react-native的文章雖然很多，但大多數都是搭建js層面的，沒有結合原生android和android開發去講。這一套教程，將會更多的結合原生的安卓去講react-native。
1. 環境
首先，我們需要搭建一個開發環境。無論是window/mac/linux中的哪一個，必須要具備的條件有以下幾點
1.1 安裝jdk
windows的話，在cmd中執行java -version看就行，mac/linux的話。在終端下，直接執行java -version命令進行查看，如果沒有，請百度"jdk安裝與環境變量配置"。直到使用java -version的時候，出現了如下圖所示的信息，則證明你安裝成功了(如圖1.1.1)。
圖1.1.1
1.2 安裝nodejs
nodejs的官網上有各個系統的下載包，window下可以直接下載exe可執行的node，然后把node.exe所在的路徑，添加到環境變量中即可，這樣安裝更加干凈。直到，在windows下的CMD，或者mac下的終端任意目錄下，輸入node，可以出現如圖2.3.1所示即可。
圖2.3.1
1.3 安裝NPM
一般來講，安裝了nodejs，也會順帶著安裝上npm，不過有的時候，我們需要單獨安裝，windows下，如果使用了node.exe的話，可以自行百度一下 "windows安裝npm" 按照說明安裝npm，并且把npm添加到環境變量中去。直到在終端或者CMD任意目錄下，執行npm出現如圖1.3.1所示信息，則意味著，你安裝成功了。
圖1.3.1
1.4 安裝react-native-cli
這個工具是react-native的命令行工具，是我們接下來運行工程的基礎。安裝的話，直接使用。
npm install -g react-native-cli
命令進行安裝即可，mac/linux下的話，可能會報錯：
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli'
這個時候，證明你的權限不夠，可以在命令前面加上sudo：
sudo npm install -g react-native-cli
1.5 安裝android sdk
這里建議把android studio與android sdk一起安裝，android的官網上即可下載與安裝，有bundle版的話，更加的省事。
1.6 安裝安卓模擬器
如果有安卓手機的話，更推薦使用安卓手機進行真機調試，如果沒有的話，我們也可以通過安卓模擬器進行調試，windows的話，建議下載blue stack(下載安裝即可)，mac/linux的話，可以使用android sdk里面自帶的avd，創建新的設備進行調試。
2. react-native的helloworld
接下來，我們從一個使用了android studio與react-native的hello world入手。開啟我們的react-native-android之旅。
2.1 創建工程
我們挑一個干凈的文件夾來初始化我們的工程。windows的話，通過dos命令行(程序中查找cmd進入)。linux/mac的話，通過bash進入到文件夾下，執行以下命令創建工程，如圖2.1.1
react-native init hellowReact
圖2.1.1
等待片刻，我們會看到生成了一個新的項目(helloReact)，生成的項目里面包含了IOS版本與Android版本的默認項目。
2.2 用android studio打開
此時我們可以使用android studio打開，新建項目下的android/app文件夾，請注意，打開的是app文件夾，如圖2.2.1所示。
圖2.2.1
打開工程后，我們可以看到下方開始編譯bundle，如圖2.2.2。
圖2.2.2
等待build gradle的過程比較漫長，需要耐心等待一下。build好之后，我們就能看到在我們的andriod studio中出現了新建的工程。
如果發現沒有build，那么請看看控制臺，是否提示沒有安裝什么gradle，如果是的話，點擊進行安裝即可，如圖2.2.3。
圖2.2.3
2.3 將安卓工程編譯并安裝到機器上
在準備就緒后，工程上方的工具欄，會出現可以編譯的按鈕(如圖2.3.1所示)我們點擊綠色的運行按鈕
圖2.3.1
如果使用了bluestack的話，請把bluestack打開，如果使用手機調試的話，請把手機的開發人員選項打開，并且把USB調試選項打開。我們這里直接使用了手機調試(如圖2.3.2的調試列表中出現了我們連接的手機)。
圖2.3.2
無論你用哪種方式，在點擊完綠色的運行按鈕之后，都會看到選擇設備的列表。選擇自己的設備，然后點擊OK。開始編譯(如圖2.3.3)。
運行完成之后，我們果然看到了。。。。。。。BUG(如圖2.3.4)
圖2.3.4
不過，如果你運行到了這一步，恭喜你，你已經將react的安卓項目成功的編譯并安裝到手機上了。
出現這個BUG的原因主要是由于我們的app調試階段回去遠程尋找我們的js，而默認，它回去本地尋找，所以我們接下來要干兩件事情，1. 搭建可以訪問js的服務。 2.讓手機上的react應用去按照這個服務尋找JS
2.4 搭建服務
用windows的CMD或者MAC/linux的終端，進入到hellowReact目錄下(我們用react-native init創建的工程)，然后執行，結果如圖2.4.1：
react-native start
圖2.4.1
運行成功后，我們看到react-native利用了本機的8081端口，開啟了一個js的服務，我們訪問一下(結果如圖2.4.2所示)。
http://localhost:8081/index.android.bundle?platform=android
(PS:第一次訪問編譯會有點慢)
圖2.4.2
2.5 設置app尋找js的地址
接著，我們要進行第二步---讓手機上的react應用去按照這個服務尋找JS
我們打開手機上那個報錯的APP（hellowReact）,然后搖一搖。（是的，搖一搖，不過不是微信）此時會出現開發者工具，如圖2.5.1所示
圖2.5.1
當然，你要是使用bluestack的話，也行，左側工具欄里面有搖一搖。
如圖2.5.2，點擊Dev Settings，點擊最下方的Debug server host & port for device，
圖2.5.2
會彈出配置項，這個配置項就是尋找js的地址啦：
那么地址如何填呢？
如果是真機調試的話，手機最好和自己的電腦在一個局域網下（使用了同一個wifi也可以），如果是bluestack的話，則不用管這個了。
windows電腦，請在CMD命令下，輸入ipconfig查看自己的ipv4地址。或者用電腦右下角的查看網絡連接，來查看自己的ipv4地址。如果是mac/linux的話，查看一下網絡設置，上面會有寫。自己的ip地址。
在配置項里面填寫自己的ip地址:8081，如圖2.5.3
圖2.5.3
2.6 重新加載js，并運行成功
點擊確定，返回主界面。再搖一搖手機，然后點擊reload js。運行結果如圖2.6.1
圖2.6.1
于是，我們的hello world就大功告成啦，至此，我們的React-Native-Android環境也算大功告成了。
上述講解，可以在這里找到代碼例子：
https://github.com/houyu01/react-native-android-tutorial/tree/master/helloReact
不要走開，馬上回來，下一篇，我們會介紹，如何在ReactNative中利用js編寫我們想要的界面
系列文章
[React Native Android安利系列]搭建React Native Android環境
[React Native Android安利系列]創建簡單 RN 應用(以js角度來看RN)
[React Native Android安利系列]原生小知識(創建activity并跳轉)
來自：https://segmentfault.com/a/1190000006037447