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的程式,經過一系列安裝。最後呈現出來了。