大家好，歡迎來到我的Blog！

我是一名Android工程師，準備轉ReactNative(以下簡稱RN)開發，現今在觀察和學習RN，文章內容是搭建開發環境的步驟以及踩過得各種坑。

感興趣或是準備入門RN，閱讀此文會有一定的收穫；如果你是RN大牛，不好意思，請繞行，以免耽誤您的寶貴時間！

初識RN：

RN是Facebook在React.js Conf 2015大會上推出的，於同年4月開源的跨平臺移動應用開發框架；RN也是Facebook早先開源的UI框架React在原生移動應用平臺的衍生物，目前支援android和ios兩大平臺。RN使用Javascript語言，類似於HTML的JSX，以及CSS來開發移動應用，正如它的宣言：“Learn once，write anywhere ”一樣，提高多平臺的移動應用開發效率。

windows下搭建開發環境：

準備工作

1. 安裝Python2而不是Python3，目前暫不支援Python3版本： 下載地址

2. 安裝Node.js，非7.1版本，否則在windows系統上會有問題： 下載地址

3. 安裝配置Git及環境變數：配置地址

4. 安裝配置JDK及環境變數： 配置地址

5. 安裝配置SDK及環境變數： 配置地址

開始安裝RN

設定npm映象，用以加速後面的過程（或科學上網）。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://
 
npm.taobao.org/dist --global

安裝RN

npm install -g yarn react-native-cli

此命令會初始化一個工程，下載RN的所有原始碼和依賴包。可在指定資料夾下執行以下命令，例如（AwesomeProject為工程名）：

react-native
 
 init AwesomeProject

（以下命令快捷進入方式：首先進入專案根目錄，按住shift鍵，然後點選滑鼠右鍵，選擇開啟命令列視窗）

檢視react-native版本，在專案根目錄下執行：

react-native -version

請時刻保持react-native為最新版本： 如何升級版本

1. 啟動RN伺服器：

react-native start

第一次訪問通常需要十幾秒，並且在packager的命令列可以看到進度條。

3. 執行app（真機）： react-native run-android 或 react-native run-ios

請使用android5.0及以上手機，保持真機與電腦通過USB相連且在同一WiFi環境下

react-native run-android

4. 步驟3執行後會自動開啟應用介面

（1）首先嚐試晃動手機，正常情況會出現一個彈窗--選擇Dev Settings 根據截圖中最後一個提示填寫與你的本機相同的IP地址，如 192.168.1.1:8081，埠8081不變。然後返回--晃動手機--彈窗--reload Js。

RN預設是8081埠啟動Node.js環境的，如果埠被佔用就需要重新啟動一個，然後在手機上指定新的埠。例如：9999埠

（2）有些手機比如小米系統的，無法顯示彈窗，多半是因為系統將應用的許可權限制的原因。開啟設定--應用管理--找到我們的demo--許可權管理--開啟懸浮窗，重複步驟（1）即可。

（3）如果（1）中設定IP後依然存在問題，則嘗試設定反向代理 adb reverse tcp:8081 tcp:8081

RN在Android上執行的程式可以認為就是一個殼子或者容器，真正的內容來源於伺服器上的網頁(實際上是個js檔案)，這個js檔案就是index.android.js 所以，如果你想修改頁面的顯示內容，只需要修index.android.js檔案就可以了，不需要再動Android專案裡的任何程式碼了。

執行開源專案

大部分開源專案並不是完整的專案, 缺少了專案的依賴, 就像我們執行java沒有jdk環境一樣，而開源專案為了減少空間，並沒有提交node_mudules目錄，需要我們自己安裝，然後執行專案即可。如何執行

npm安裝node_modules：

npm install

踩過的坑

問題1.  RN紅屏之Could not connect to development server.

解決方案：

關閉電腦的防火牆

（1）正常情況下，在搖晃手機的彈窗中設定電腦的IP加埠8081可以解決。

（2）我的是設定了反向代理 adb reverse tcp:8081 tcp:8081才解決問題，如果設定不了，請重啟RN伺服器。

問題2. 執行完專案直接閃退，可能是SDK版本存在問題

解決方案：

請確保以上應用構建版本與gradle版本可用！

最後，祝願搭建執行成功！

分享一些完整的ReactNative開源專案：傳送門