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的程序,经过一系列安装。最后呈现出来了。

猜你喜欢

转载自www.cnblogs.com/CyLee/p/9912977.html