1. 程式人生 > >ReactNative 環境的搭建和啟動(安卓版)

ReactNative 環境的搭建和啟動(安卓版)

總體步驟一覽:

一、下載 JDK 8.0:新增 %JAVA_HOME% 變數,新增 PATH;

二、下載 Android SDK:修復 SDK Manager.exe 閃退的問題,用 SDK Manager.exe 安裝 Android SDK platform-tools(adb),然後將其加入到 PATH;

三、下載 react-native-cli:新建一個 react-native 腳手架,執行 $ react-native run-android,再一步步解決遇到的問題;

 


 

一、下載 JDK 8.0

筆者接觸RN的時候JDK已經是11.0.2版本了,但由於接下來遇到相容性問題(gradle不支援高版本),不得不改為較穩定和普遍的8.0版本

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

1、新增JAVA_HOME變數,指向jdk目錄,如C:\Program Files\Java\jdk1.8.0_191

2、新增PATH: %JAVA_HOME%\bin

3、開啟CMD輸入: java -version

 

 

二、下載 Android SDK  

http://tools.android-studio.org/index.php/sdk

1、修復 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

2、用管理員的許可權開啟SDK Manager.exe,下載Android SDK platform-tools

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

4、然後在cmd輸入:adb devices 

5、用USE線連線Android手機,改為 除錯模式MTP(多媒體傳輸),再次執行 adb devices,確保你的手機在列表中。

 

 

三、下載 react-native-cli

$ npm install -g react-native-cli

 

1、新建一個 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

然後重新初始化專案。成功之後如圖所示:

 

2、執行與安裝

$ react-native run-android

 

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

 

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

 

 

3、又出現:platforms;android-27 Android SDK Platform 27,再次選擇 Android 8.1.0(API 27)展開如圖,選擇 SDK platform 安裝即可。

 

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

 

4、但最後又出現了:Execution failed for task ':app:installDebug'.... User rejected permissions, 好像是使用者沒許可權,經過一系列倒騰,我領悟了可能是我手機沒有給許可權?但我華為手機確實開啟了除錯模式啊!然後往下拉,看到【選擇USE配置】時,點選並且選擇了【MTP(多媒體傳輸)】,然後再次執行。可以了。

手機自動提示安裝了RN的程式,經過一系列安裝。最後呈現出來了。