使用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項目文件夾）。

運行項目

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

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

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

      1. 在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。