react native环境搭建+genymotion

一开始准备用weex做app，鉴于坑太多，应该是用react native，接下来演示怎么配置环境，可以看react native中文官网，上面也有大概的配置教程。因为一开始想用weex，和react native一样也需要安卓环境，所以先把这块说一下。
1.jdk
下载jdk并且配置jdk环境变量，这步是基础也没难度。不详细说明
jdk下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
然后配置环境变量网上也有很多教程，百度经验里也有，随便一看即可搞定，但还是要小心一些，建议最后用java，javac，java -version 这三个命令在命令行里检测一下，如果输出提示命令和版本信息就是成功了。
2.安卓环境变量和sdk
2.1sdk
下载Android studio，地址：https://developer.android.com/studio/index.html
我选择的是推荐版本携带sdk包的，然后安装过程会选择两个安装路径一个是studio是个sdk的安装位置建议不要选择c盘，然后记住选择的sdk安装位置。安装完成后会打开Android studio，然后选择settings设置——>android sdk把其他需要的sdk工具装上。具体可以看react中文网http://reactnative.cn/docs/0.31/getting-started.html 按要求打钩下载，如下是我的设置选择

sdk platforms Android6或7都可以，注意sdk tools里要按要求下载全。

2.2环境变量
和jdk环境变量一样，这里也需要配置安卓环境变量，大家去网上搜具体配置这个教程。注意Android Home的地址不要写错就是sdk的安装目录，刚才说过最好记住sdk的安装位置。

然后检查是否安卓环境配置成功，cmd里输入命令adb测试一下。这里我测试的时候出现了奇怪的问题，我配置好了安卓环境变量后在cmd里输入adb出现相应提示则没问题，之后用weex生成的脚手架项目里git输入adb却提示没有配置安卓环境变量，因此上网查了一下，在这里我们需要：

注意是4步哟，sdk目录地址写绝对路径就可以。再次在项目里git 输入adb就不报错了。*所以这里建议在全局和项目目录下都输入adb都测试没问题再进行下一步，免除后患！*

3.安装node和npm这也是最基本的，去node.js官网下载就可以了，然后去Python官网下载一个Python2,2开头的版本，注意react native官网说不支持Python3。最后建议装git，命令行工具这个大家应该都知道。

4.用npm装yarn、和react native命令行工具react-native-cli。 Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native cli命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。如下：把这俩一起装了

npm install -g yarn react-native-cli

设置npm和yarn的镜像源

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

5.接下来可以初始化项目

react-native init 项目名
cd 项目名
执行adb

注意初始化成功后在项目工程目录里我们先git执行一下adb确保安卓环境没问题。

6.这里我装了genymotion模拟器
去官网需要注册并下载https://www.genymotion.com/，需要注册登录再下载的。注意下载with virtualBox版本，然后安装完成后需要登录，就是刚才注册的账号。登录后进入这个页面做两个操作

这里我已经添加过一个虚拟设备了就是your virtual devices，刚安装完成是空白没有虚拟设备的，第一个操作点击+Add添加一台设备，我随便选了第一个，然后会下载，这里极容易断，不要放弃等它下载完。。第二个操作点击settings，选择adb设置sdk就是刚才一直用的sdk安装路径,如下：

7.启动项目，点击genymotion里的start启动我们刚才安装好的的虚拟设备，是这个样子的，此时我们刚才初始化的项目还没连上虚拟设备

然后在我们的工程项目里执行adb devices会列出当前启动的虚拟设备，能检测到说明没问题，如下图里最后一行显示的就是刚才我们开启的genymotion那台虚拟设备。

最后项目目录里执行

react-native run-android

打开genymotion，欢迎页面出来了，成功，修改一下文字，重新加载一遍，成功。

第一次默认不是热加载形式，就是改变文件内容需要手动刷新的，这里设置一下热加载，以后内容这里就会自动刷新，Windows是执行ctrl+m，选择第四个hot reloading如下

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!