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/ ，打开控制台就可以开始调试之旅了。

 

转载于:https://www.cnblogs.com/CyLee/p/9912977.html