React-Native 只是提供一个 js 引擎,要想运行 React-Native 的 Android 应用还需要 Android 运行环境。

目前主流的的有两种方案,一种是 create-react-native-app + Expo,另一种是 react-native-cli + Android Studio

本文主要介绍第二种环境的搭建方式(也建议开发者选择这种方式),最后会运行 React-Native 初始应用,全文动态图展示。

搭建 React-Native 环境

首先需要安装 node 环境,去 node 官网下载安装包后直接双击,点下一步就能完成安装,然后检查一下 node 和 npm 命令是否可用。

react-native 官方为开发者提供了脚手架工具 react-native-cli,用以下命令即可安装:

$ npm install -g react-native-cli

安装完成之后,就可以用它来初始化一个 react-native 项目了:

$ cd project-path
$ react-native init rnApp

项目初始化完成后,打开可以看到它提供了 androidios 两个文件夹,加下来我们就来运行这个 android 文件夹里面的内容。

怎么运行它呢,其实是有很多种方法的,对于以前从未接触过 Android 的开发者来说,使用 Android Studio 来运行它是一个再好不过的选择了。

搭建 Android 环境

Android Studio 是谷歌官方提供的用来开发 Android 的 IDE,使用它需要先安装 JAVA JDK。目前来说 JDK 8 是最新稳定版,jdk 9 和 10 可以尝试使用。

安装 JDK

JDK 下载完成之后一直点下一步即可完成安装。

配置 JDK 环境变量

给 JDK 配置环境变量是必要操作,这样可以让 IDE 更容易地找到它。配环境变量只需要把 JDK 的 bin 路径给到 path 就行了,不需要配置什么 JAVA_HOME 之类的

安装 Android Studio

如果不能翻墙的话,可以去以下地址下载 Android Studio,步骤是一样的

https://developer.android.goo...

下载完成之后双击,点下一步就安装就行了。

安装完成之后,打开 Android Studio,它会自动下载 Android SDK,不过,我这里提示要设置代理才能连接到谷歌,不是听说下载 Android SDK 是不需要翻墙的吗。

不过既然要翻墙才能下,那就翻呗,我用的是 ShadowSocks,这里配置一下 HTTP 就行了。(这里有个小坑,如果勾选 SOCKS 的话,点测试是可以连接成功的,但是还是无法正常下载 SDK。)

在接下来的这个界面里,建议选择 Custom,否则无法更改 SDK 的安装路径,安卓模拟器这里也要勾上。最后别忘了把 SDK 的安装路径改一下,非常大,默认是安装到 C 盘的。

之后用 Android Studio 打开之前创建项目的 android 文件夹,提示要下载 Android SDK Platform,点红色的即可自动下载

下载完了之后还是提示少个东西,那就点红色的继续下载。

这个下载完成之后可能会提示 gradle 版本过低,是否要升级,这个随意。

关闭 hyper-v (可选)

接下来就要准备启动 Android 模拟器了,在启动它之前请先确认 hyper-v 是否已关闭。hyper-v 是 win10 自带的虚拟机,它会跟安卓模拟器冲突所以要关闭。如果你用过 windows for dockervmWare 就比较清楚这件事了。

解决一个报错(可选)

其实上面的东西安装完成之后我这里还有一个警告:Configuration 'compile' is obsolete and has been replaced with 'implementation,这个只是 gradle 的一个提示,不用 care,直接运行项目

接下来我这里会有个报错,这个报错如下,此错误有一定概率出现,我装过三次,其中有两次出现这种现象。这是因为在之前安装 Android SDK 的时候它还下载了一个插件叫 Hardware_Accelerated_Execution_Manager,它只是下载了而没有自动安装,所以这里会报错。

所以如果出现了这种错误则需要进到 Android SDK 的安装目录里找到它并手动安装上。

-Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration!

运行 React-Native

到这里,所有的错误基本上都解决完了,先进到 rnApp 的根目录用 npm start 先把 js 引擎先跑起来,然后运行这个 Android 模拟器,就可以看到 React-Native 初始项目的首页了。

tips: 按住 CTRL + M 键可以调出 Android 模拟器的菜单,有一个 Reload 选项可以手动刷新页面。

用任意编辑器打开 rnApp,改一句代码然后回来就可以看到页面是自动刷新的,至此 React-Native 在 Windows 的 Android 环境也就搭建完成了。

本文固定链接: http://www.js-code.com/android/android_57172.html