使用React Native構建App

原文地址： 使用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和夜神模擬器，推薦選擇夜神模擬器。

配置方法：

1. 在Nox/bin目錄運行nox_adb.exe connect 127.0.0.1:62001，若是失敗，使用adb devices查詢，出現版本不一致的狀況，能夠把Android/sdk目錄下的adb.exe拷貝到Nox/bin下，並更名爲nox_adb.exe，反過來操做也是能夠的。
2. 分別打開Android Studio和夜神模擬器，此時運行命令nox_adb.exe connect 127.0.0.1:62001基本上都會成功。

新建React Native項目

1. 運行react-native init project-name，進入project-name文件夾安裝依賴npm i並運行react-native run-android或react-native run-ios構建App。
2. 以Android App爲例，在Android Studio打開Android文件夾（注意：此處是Android文件夾，不是project-name項目文件夾）。
3. 在C:\Users\user\.gradle\wrapper\dists目錄下放入對應文件，文件下載地址Gradle

運行項目

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

   1. JAVA_HOME，變量值爲D:\Android\sdk；
   2. ANDROID_HOME，變量值爲D:\Android\sdk；
   3. 而後在Path項中添加jdk和jre下的bin目錄；

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

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

1. 同時打開Android Studio、Nox並在AS中打開項目中的Android文件夾。
2. 運行nox_adb.exe connect 127.0.0.1:62001鏈接AS和Nox，而後再運行react-native run-android，此時就會構建Android App，

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