Windows 搭建 React-Native Android 开发环境

发布时间:2019-06-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Windows 搭建 React-Native Android 开发环境脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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 文件夹里面的内容。

Windows 搭建 React-Native Android 开发环境

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

搭建 Android 环境

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

安装 JDK

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

Windows 搭建 React-Native Android 开发环境

配置 JDK 环境变量

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

Windows 搭建 React-Native Android 开发环境

安装 Android Studio

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

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

Windows 搭建 React-Native Android 开发环境

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

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

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

Windows 搭建 React-Native Android 开发环境

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

Windows 搭建 React-Native Android 开发环境

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

Windows 搭建 React-Native Android 开发环境

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

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

Windows 搭建 React-Native Android 开发环境

关闭 hyPEr-v (可选)

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

Windows 搭建 React-Native Android 开发环境

解决一个报错(可选)

其实上面的东西安装完成之后我这里还有一个警告: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!

Windows 搭建 React-Native Android 开发环境

运行 React-Native

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

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

Windows 搭建 React-Native Android 开发环境

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

Windows 搭建 React-Native Android 开发环境

脚本宝典总结

以上是脚本宝典为你收集整理的Windows 搭建 React-Native Android 开发环境全部内容,希望文章能够帮你解决Windows 搭建 React-Native Android 开发环境所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。