大家好，歡迎來到化簡成蝶時(shí)間！
此篇文章出自我的博客：http://blog.csdn.net/cy_shay
初識(shí)RN：
RN是Facebook在React.js Conf 2015大會(huì)上推出的，于同年4月開源的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架；RN也是Facebook早先開源的UI框架React在原生移動(dòng)應(yīng)用平臺(tái)的衍生物，目前支持android和ios兩大平臺(tái)。RN使用Javascript語言，類似于HTML的JSX，以及CSS來開發(fā)移動(dòng)應(yīng)用，正如它的宣言：“Learn once，write anywhere ”一樣，提高多平臺(tái)的移動(dòng)應(yīng)用開發(fā)效率。了解更多！
windows下搭建開發(fā)環(huán)境：
RN官方中文網(wǎng)：http://reactnative.cn/docs/0.47/getting-started.html
準(zhǔn)備工作
1. 安裝Python2而不是Python3，目前暫不支持Python3版本：下載地址
2. 安裝Node.js，非7.1版本，否則在windows系統(tǒng)上會(huì)有問題：下載地址
3. 安裝配置Git及環(huán)境變量：配置地址
4. 安裝配置JDK及環(huán)境變量：配置地址
5. 安裝配置SDK及環(huán)境變量：配置地址
開始安裝RN
設(shè)置npm鏡像，用以加速后面的過程（或科學(xué)上網(wǎng)）。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安裝RN
Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。RN的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。
Node.js安裝完成以后會(huì)將自己添加到環(huán)境變量中，因?yàn)镹ode自帶npm所以可直接使用npm命令執(zhí)行。
npm install -g yarn react-native-cli
項(xiàng)目初始化
此命令會(huì)初始化一個(gè)工程，下載RN的所有源代碼和依賴包?？稍谥付ㄎ募A下運(yùn)行以下命令，例如（AwesomeProject為工程名）：
react-native init AwesomeProject
運(yùn)行項(xiàng)目
（以下命令快捷進(jìn)入方式：首先進(jìn)入項(xiàng)目根目錄，按住shift鍵，然后點(diǎn)擊鼠標(biāo)右鍵，選擇打開命令行窗口）
查看react-native版本，在項(xiàng)目根目錄下執(zhí)行：
react-native -version
請時(shí)刻保持react-native為最新版本：如何升級版本
1. 啟動(dòng)RN服務(wù)器：
react-native start
2. 可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本。
第一次訪問通常需要十幾秒，并且在packager的命令行可以看到進(jìn)度條。
3. 運(yùn)行app（真機(jī)）： react-native run-android 或 react-native run-ios
請使用android5.0及以上手機(jī)，保持真機(jī)與電腦通過USB相連且在同一WiFi環(huán)境下
react-native run-android
4. 步驟3運(yùn)行后會(huì)自動(dòng)打開應(yīng)用界面
（1）首先嘗試晃動(dòng)手機(jī)，正常情況會(huì)出現(xiàn)一個(gè)彈窗--選擇Dev Settings 根據(jù)截圖中最后一個(gè)提示填寫與你的本機(jī)相同的IP地址，如 192.168.1.1:8081，端口8081不變。然后返回--晃動(dòng)手機(jī)--彈窗--reload Js。
RN默認(rèn)是8081端口啟動(dòng)Node.js環(huán)境的，如果端口被占用就需要重新啟動(dòng)一個(gè)，然后在手機(jī)上指定新的端口。例如：9999端口
（2）有些手機(jī)比如小米系統(tǒng)的，無法顯示彈窗，多半是因?yàn)橄到y(tǒng)將應(yīng)用的權(quán)限限制的原因。打開設(shè)置--應(yīng)用管理--找到我們的demo--權(quán)限管理--打開懸浮窗，重復(fù)步驟（1）即可。
（3）如果（1）中設(shè)置IP后依然存在問題，則嘗試設(shè)置反向代理adb reverse tcp:8081 tcp:8081
5. 如何修改頁面內(nèi)容：
RN在Android上運(yùn)行的程序可以認(rèn)為就是一個(gè)殼子或者容器，真正的內(nèi)容來源于服務(wù)器上的網(wǎng)頁(實(shí)際上是個(gè)js文件)，這個(gè)js文件就是index.android.js，所以，如果你想修改頁面的顯示內(nèi)容，只需要修index.android.js文件就可以了，不需要再動(dòng)Android項(xiàng)目里的任何代碼了。
運(yùn)行開源項(xiàng)目
大部分開源項(xiàng)目并不是完整的項(xiàng)目, 缺少了項(xiàng)目的依賴, 就像我們運(yùn)行java沒有jdk環(huán)境一樣，而開源項(xiàng)目為了減少空間，并沒有提交node_mudules目錄，需要我們自己安裝，然后運(yùn)行項(xiàng)目即可。如何運(yùn)行
npm安裝node_modules：
npm install
踩過的坑
問題1.? RN紅屏之Could not connect to development server.
解決方案：
關(guān)閉電腦的防火墻
（1）正常情況下，在搖晃手機(jī)的彈窗中設(shè)置電腦的IP加端口8081可以解決。
（2）我的是設(shè)置了反向代理 adb reverse tcp:8081 tcp:8081才解決問題，如果設(shè)置不了，請重啟RN服務(wù)器。
（3）更多解決方案。
問題2. 運(yùn)行完項(xiàng)目直接閃退，可能是SDK版本存在問題
解決方案：
請確保以上應(yīng)用構(gòu)建版本與gradle版本可用！
最后，祝愿所有人都能搭建運(yùn)行成功!
