使用React Native構建App

最近由於項目須要，深刻研究React和React Native，React已經掌握得差很少了，如今集中精力在ReactNative的項目開發。這裏須要記錄在學習過程當中的技術細節，好記性真的不如爛筆頭，多寫文檔總會有好處的。

本文重點記錄使用React Native構建雙平臺App的過程，同時進一步掌握構建過程當中運用的技術。

搭建開發環境

安裝react-native-cli：npm i -g react-native-cli

Android SDK

安裝Android SDK並啓動進行配置：

配置環境變量

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Android 虛擬機

設定Genymotion的Android SDK 位置（Android SDK 的路徑能夠在 SDK Manager 上找到）。

模擬器

有多款模擬器可供選擇，Android Studio自帶，Genymotion和夜神模擬器，推薦選擇夜神模擬器。

配置方法：

在Nox/bin目錄運行nox_adb.exe connect 127.0.0.1:62001，若是失敗，使用adb devices查詢，出現版本不一致的狀況，能夠把Android/sdk目錄下的adb.exe拷貝到Nox/bin下，並更名爲nox_adb.exe，反過來操做也是能夠的。

分別打開Android Studio和夜神模擬器，此時運行命令nox_adb.exe connect 127.0.0.1:62001基本上都會成功。

新建React Native項目

運行react-native init project-name，進入project-name文件夾安裝依賴npm i並運行react-native run-android或react-native run-ios構建App。

以Android App爲例，在Android Studio打開Android文件夾（注意：此處是Android文件夾，不是project-name項目文件夾）。

在C:Usersuser.gradlewrapperdists目錄下放入對應文件

文件下載地址http://services.gradle.org/di...

運行項目

這一步很關鍵，配置java的環境變量，首先是JAVA_HOME和ANDROID_HOME：

在Path項中添加下圖中變量：

JAVA_HOME，變量值爲D:Androidsdk；

ANDROID_HOME，變量值爲D:Androidsdk；

而後在Path項中添加jdk和jre下的bin目錄；

以上是用戶變量配置，下面進行系統變量配置：

同時打開Android Studio、Nox並在AS中打開項目中的Android文件夾。

運行nox_adb.exe connect 127.0.0.1:62001鏈接AS和Nox，而後再運行react-native run-android，此時就會構建Android App，

關閉端口衝突：lsof -n -i4TCP:8081，kill -9 <PID>