react native环境搭建+genymotion

前端之家收集整理的这篇文章主要介绍了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如下

原文链接:https://www.f2er.com/react/303643.html

猜你在找的React相关文章