React Native環境搭建各種踩坑

安裝依賴

Node、React Native命令行工具、Python2、JDK、Android Studio

雖然可以使用任何編輯器來開發應用（編寫 js 代碼），但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

1. Node，Python2，JDK可以直接網站下載

   注意：node不要下載最新版v12，建議下載v10版本，不然會導致紅屏

   點擊這個下載地址下載v10版本，下載的時候找msi這種的一鍵安裝，不用在配置什麼東西了

   已經安裝python3的童鞋參考：this

   JDK安裝不再贅述

2. Node下載完成之後，切換一下npm源，調成國內源

   # 使用nrm工具切換淘寶源
   npx nrm use taobao
   
   # 如果之後需要切換回官方源可使用 
   npx nrm use npm
   

3. Yarn、React Native命令行工具安裝

   Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用於執行創建、初始化、更新項目、運行打包服務（packager）等任務。

   …這個yarn暫時還不知道有啥用，問題不大裝了再說

   npm install -g yarn react-native-cli
   

   安裝完 yarn 之後就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install 某第三方庫名。

4. Android Studio安裝

   現在基本不慌了，官網已經不被牆了，想起一年前被網絡支配的恐懼，一個波動就重下

   1. 安裝界面中選擇"Custom"選項，確保選中了以下幾項：

      • Android SDK
      • Android SDK Platform
      • Performance (Intel ® HAXM)
      • Android Virtual Device

   2. 安裝 Android SDK

      Android Studio 的歡迎界面中找到 SDK Manager。點擊"Configure"，然後就能看到"SDK Manager"。

      React Native 應用需要的是Android 9 (Pie)版本的 SDK

      在 SDK Manager 中選擇"SDK Platforms"選項卡，然後在右下角勾選"Show Package Details"。展開Android 9 (Pie)選項，確保勾選了下面這些組件:

      • Android SDK Platform 28
      • Intel x86 Atom_64 System Image

      然後點擊"SDK Tools"選項卡，同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項，確保選中了 React Native 所必須的28.0.3版本。你可以同時安裝多個其他版本。

      最後點擊"Apply"來下載和安裝這些組件。

   3. 配置 ANDROID_HOME 環境變量

      打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建，創建一個名爲ANDROID_HOME的環境變量（系統或用戶變量均可），指向你的 Android SDK 所在的目錄

   4. 把 platform-tools 目錄添加到環境變量 Path 中

      打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量，選中Path變量，然後點擊編輯。點擊新建然後把 platform-tools 目錄路徑添加進去。

      這東西就在SDK裏面，在剛剛SDK目錄後面加上 \platform-tools就好了

創建新項目

使用 React Native 命令行工具來創建一個名爲"AwesomeProject"的新項目：

react-native init AwesomeProject

提示：你可以使用--version參數（注意是兩個槓）創建指定版本的項目。例如react-native init MyApp --version 0.44.3。注意版本號必須精確到兩個小數點。

真機運行

檢查你的設備是否能正確連接到 ADB，記得打開開發者選項中的USB調試（修改權限，模擬點擊那個）

$ adb devices
List of devices attached
14ed2fcc device //連接的設備

訪問開發服務器

在啓用開發服務器（官方名稱 metro，但我們更常稱之爲 Packager）的情況下，你可以快速的迭代修改應用，然後在設備上立即查看結果。

adb reverse tcp:8081 tcp:8081  //真機運行需要這句，在連接到adb之後，模擬器不需要
react-native start

編譯並運行 React Native 應用

確保你先運行了模擬器或者連接了真機，然後在你的項目目錄中運行react-native run-android：

cd AwesomeProject
react-native run-android

如果配置沒有問題，你應該可以看到應用自動安裝到設備上並開始運行。注意第一次運行時需要下載大量編譯依賴，耗時可能數十分鐘。此過程嚴重依賴穩定的翻牆工具，否則將頻繁遭遇鏈接超時和斷開，導致無法運行。

react-native run-android只是運行應用的方式之一。你也可以在 Android Studio 中直接運行應用。

譯註：建議在run-android成功後再嘗試使用 Android Studio 啓動。請不要輕易點擊 Android Studio 中可能彈出的建議更新項目中某依賴項的建議，否則可能導致無法運行。

遇到的問題

Android Studio初始化錯誤

Error: Unable to parse the react native cli configuration. The command “npx.cmd – quiet – no install react native config” should be run in the “D: \ code code” directory to output valid JSON, but not. This may be due to NPX parsing to the old global react native binary. Make sure to uninstall all global ‘react native’ binaries: ‘NPM uninstall-g react native react native cli’ and try again

避免在用戶名、目錄名、文件名、變量名等處使用中文、空格等特殊字符，也不要使用react、react-native等名字

手機紅屏錯誤

Unable to load script. Make sure you’re either running a Metro server (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.

參考GitHub上的回答

• 首先檢查你開發服務器metro打開了沒，如果沒有在項目裏啓動react-native start

• 然後查看Node版本是不是最新版v12，換成v10

• 如果是真機,設置adb reverse tcp:8081 tcp:8081

安裝包手動刪除了，但是裝不上了

Error while executing: am start -n “com.myproject/com.myproject.MainActivity”

使用adb給他刪刪乾淨…

>adb uninstall com.myproject
Success