ReactNative 環境的搭建和啟動（安卓版）

一、JAVA環境

• 下載 JDK 8.0
• 添加 %JAVA_HOME% 變量
• 添加 PATH：%JAVA_HOME%\bin

二、Android環境

• 下載 Android SDK
• 修復 SDK Manager.exe 閃退的問題
• 用 SDK Manager.exe 安裝 Android SDK platform-tools（adb）
• 將 adb 加入到 PATH

三、ReactNative 環境

• 下載 react-native-cli
• 初始化腳手架：
• 運行 $ react-native run-android，並一步步解決遇到的問題

 

React Native 錯誤錦集： https://www.cnblogs.com/CyLee/p/9915837.html 

 

---

 

一、JAVA環境

1、下載 JDK 8.0：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

（ps: 筆者接觸RN的時候JDK已經是11.0.2版本了，但由於接下來遇到兼容性問題（gradle不支持高版本），不得不改為較穩定和普遍的8.0版本）

2、添加JAVA_HOME變量，指向jdk目錄，如C:\Program Files\Java\jdk1.8.0_191

3、添加PATH： %JAVA_HOME%\bin，打開CMD輸入： java -version

 

 

二、Android環境　　

1、下載 Android SDK：http://tools.android-studio.org/index.php/sdk

2、修復 SDK Manager.exe 閃退的問題

找到android.bat，在源碼處找到
set java_exe= 
call lib\find_java.bat
改為
set java_exe=C:\Program Files\Java\jdk1.8.0_121\bin\java.exe

找到for /f %%a in ('%java_exe% -jar lib\archquery.jar') do set swt_path=lib\%%a
改為
set swt_path=lib\x86_64

3、用管理員的權限打開SDK Manager.exe，下載Android SDK platform-tools

4、將 android-sdk\platform-tools 目錄加入到PATH

5、然后在cmd輸入：adb devices 

6、用USE線連接Android手機，改為 調試模式 和 MTP（多媒體傳輸），再次運行 adb devices，確保你的手機在列表中。

如果依然不行，那么可能是你的USB線僅支持充電但不支持數據傳輸，據說較粗線的那種是提供數據傳輸功能的，換一種線試試。

或者下載360助手，如果連360助手都不能連接你的手機，就說明你的USB線真的是有問題了。

 

三、ReactNative 環境

 

1、下載 react-native-cli

$ npm install -g react-native-cli

2、新建一個 react-native 腳手架

$ react-native init learnRN

進行到  Downloading https://services.gradle.org/distributions/gradle-4.4-all.zip 的時候，可能因為各種原因下載不了，但卻可以用迅雷下載。

下載成功 gradle-4.4-all.zip 之后，把它放在\learnRN\android\gradle\wrapper\，然后打開 gradle-wrapper.properties 修改內容

將 distributionUrl 改為：distributionUrl=./gradle-4.4-all.zip

然后重新初始化項目。成功之后如圖所示：

3、初次的運行與安裝

$ react-native run-android

 

⑴、中間出現：Download https://dl.google.com/dl/android/maven2/com/android/tools/sdk-commo，由於我沒有fq知道下載不了，直接取消了。再次執行居然沒有這條了，但出現了下面的問題。

 

⑵、就出現了：build-tools;27.0.3 Android SDK Build-Tools 27.0.3。版本可能和我不一樣，這時候使用 SDK Manager.exe 下載指定的版本即可。然后再試試，

 

 

⑶、又出現：platforms;android-27 Android SDK Platform 27，再次選擇 Android 8.1.0（API 27）展開如圖，選擇 SDK platform 安裝即可。

 

話說回來，如果從一開始就可以fq就什么事情都沒有了。但沒辦法只能這樣曲線救國。后續倒也出現一些google.com的下載鏈接，但居然都下載成功了……

 

⑷、但最后又出現了：Execution failed for task ':app:installDebug'.... User rejected permissions， 好像是用戶沒權限，經過一系列倒騰，我領悟了可能是我手機沒有給權限？但我華為手機確實開啟了調試模式啊！然后往下拉，看到【選擇USE配置】時，點擊並且選擇了【MTP（多媒體傳輸）】，然后再次執行。可以了。

手機自動提示安裝了learnRN的程序（如果沒有，可能需要設置一下“顯示懸浮窗”權限了，也可能是出現意外被屏蔽了。）

 

經過一系列安裝。最后呈現出來了。

 

第二次運行

當第二次運行時，我們不需要執行： $ react-native run-android ，只需要設置手機反向代理（請先確保adb devices能查找到你的手機且只有一條時才執行以下命令）：

$ adb reverse tcp:8081 tcp:8081

然后執行

$ react-native start 

 

 

開始修改App.js

打開/learnRN/App.js，隨便修改一些內容來測試是否同步。

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native! Fuckyou</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

手機打開App，猛烈搖晃手機呼出菜單。

點擊 “Reload”，更新UI。

 

 

開啟調試窗口

使勁搖動，呼出菜單，選擇 “Debug JS Remotely” 選項。如果成功的話，你的電腦的瀏覽器自動打開 http://localhost:8081/debugger-ui/ ，打開控制台就可以開始調試之旅了。