RN Android环境搭建

1,570 阅读3分钟

开发软件依赖

Python2

注:目前不支持Python3版本

下载地址Python 2.7.15,下载后直接安装即可。

Node

下载地址Node.js 7.6.0,与React Native构建平台使用node版本一致

安装完 node 后建议设置 npm 镜像以加速安装第三方依赖。

npm config set registry registry.npm.taobao.org --global

npm config set disturl npm.taobao.org/dist --global

Yarn、React Native的命令行工具(react-native-cli

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源:

yarn config set registry registry.npm.taobao.org --global

yarn config set disturl npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名

Android Studio

React Native 目前需要Android Studio2.0或更高版本

Android Studio 需要 Java Development Kit [JDK] 1.8(暂不支持更高版本)。你可以在命令行中输入 javac -version来查看你当前安装的 JDK 版本。如果版本不合要求,则可以到 官网上下载

下载地址Android Studio,如下图选择符合自己平台的

如果下载的是.zip安装包,解压后通过安装目录下bin下的studio64.exe即可打开Android Studio,在欢迎界面中选择Configure|SDK Manager:

在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Android SDK Platform 23

在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build-Tools中勾选 23.0.1(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository.

配置环境变量

ANDROID_HOME:确保ANDROID_HOME环境变量正确地指向了你安装的 Android SDK 的路径(请自行确认自己本地安装路径)

模拟器 Genymotion

  1. 下载和安装Genymotion,需要先注册账号,登录后才能下载安装包

2.下载后直接点击安装即可(会安装两个软件,一个是Genymotion,另一个是VirtualBox虚拟机),须记住Genymotion的安装路径,安装Android Studio 插件时会用到。

3.点击Genymotion图标,Genymotion启动前会先启动虚拟机,如果出现下图报错,说明电脑默认虚拟化技术的配置项没有开启,需进入BIOS修改配置项。

4.开机时长按F10 开启BIOS设置,在Advanced里找到 system options 回车,最后勾选了Virtualizaton Technology这两个就开启虚拟化功能了

5.虚拟机开启后,genymotion首次进入,需选择使用模式,商业的需要购买认证,我们直接选择个人模式,无需购买认证,也没有使用天数限制。

6.用户登录,输入在官网注册的账号密码即可。不然无法安装模拟器。

7.点击Add下载各种版本虚拟机的文件信息了,下好了文件信息就能创建虚拟机,接下来就是Android Studio 和Genymotion关联了。

8.Android Studio 安装Genymotion插件

  • 打开Android Studio点击File/Setting

  • 选中Plugins,在搜索框内填入Genymotion,点击下方的Browse repsosistories进行搜索,搜索到点击Install,等待安装即可。

  • 然后就是重启Android studio,重启后多了个新图标,点击那个新图标或者点击File/Setting/找到Genymotion,配置Genymotion的安装路径