Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下!

下面开始配置环境:

1)下载1.8+JDK,配置JDK环境参考

http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html

2)下载Android Studio

配置Android SDK环境,SDK的platform-tools、tools两个子目录加入系统PATH环境变量

C:\Users\...\Sdk\tools;C:\Users\...\Sdk\platform-tools;

注:Android SDK Build-Tools 必须是23.0.1

3)下载Python 2,配置Python环境

注:不支持Python3

4)下载NodeJs,配置NodeJS环境

注:4.1+版本

5)设置国内镜像,加速环境搭建

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

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

6)安装React Native命令行工具

通过NodeJs自带的npm命令管理工具(react-native-cli)安装

npm install -g react-native-cli

7)工作目录下创建项目

react-native init MyProject

注:耐心等待N...分钟,一般过程会非常慢,数小时左右。失败的话,多试几次

8)安装Android模拟器

注:本人使用的是海马玩模拟器(0.10.3 beta版),adb端口为26944

9)连接安卓设备

adb connect 127.0.0.1:26944

10)工作目录下运行packager

react-native start

注:浏览器访问 http://localhost:8081/index.android.bundle?platform=android 等待N...秒看到打包后的脚本,说明服务启动成功

11)工作目录下运行安卓(Android)

react-native run-android

注:首次运行需要等待N...分钟并从网上下载gradle依赖。运行完毕后可以在模拟器看到应用已经启动。

如果apk安装运行出现报错,请仔细查看报错信息和相关环境配置是否正确。如果,看到APP红屏报错,说明环境已经搭建好了。

12)配置packager服务

摇晃设备(海马模拟器在->更多里面),可以打开调试菜单

点击Dev Settings,选Debug server host for device,输入本机IP加:8081(如:192.168.3.35:8081),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就可以看到运行结果。

注:双击R也可以Reload JS,就不用摇晃模拟器了

13)大功告成!步骤6以下的过程(除了安装海马玩模拟器)会非常的慢,而且过程中会报错、无响应等等。只需要等!!!主要看网速,没办法天朝的网络被墙了(用VPN的土豪可以略过)!报错就重新来一遍,亲测是没问题的。

注:安装Android SDK Build-Tools 23.0.1的过程参看:搭建开发环境 - react native 中文网

海马玩模拟器——搭建React Native环境的更多相关文章

  1. windows环境下搭建react native环境

    一.基础软件1.安装jdk-1.8.0_922.安装android studio-2.1.2(文件大小为1.2G的那个)3.安装node.js(目前最新是6.3.0)4.安装git-2.9.05.安装 ...

  2. VSCode 搭建 React Native 环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行 ...

  3. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  4. 搭建react native所遇到的坑

    一.所遇问题 在搭建react native环境中,遇到执行react native  run-android命令出现如下问题 Could not resolve all dependencies f ...

  5. 初学 React native | 环境搭建(在模拟器上运行)

    我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python ...

  6. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  7. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  8. Mac系统下React Native环境搭建

    这里记录一下在Mac系统下搭建React Native开发环境的过程: 1. 安装HomeBrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.g ...

  9. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

随机推荐

  1. CodeForces1065F 树形dp

    http://codeforces.com/problemset/problem/1065/F 你有一棵带有n个结点的树,根是结点1.有一个标记,最初在根结点处.你可以将标记移动到其他结点处.假设标记 ...

  2. fuel6.0安装部署

    在经过一系列安装openstack方式后,个人觉得fuel的安装方式相对简易,接下来记录下安装部署fuel6.0的过程.本教程适合想把fuel6.0部署后,云主机需要连接外网的需求. 安装virtua ...

  3. .net中 登录 才能下载文件的方法 Response.WriteFile实现下载

    protected void Button2_Click(object sender, EventArgs e) { //可以在这里加是否登录的判断 string fileName = "c ...

  4. VirtualBox虚拟机中安装XP系统

    Windows XP是一款经典的操作系统,同时也是一款很老的操作系统,不过尽管如此,还是有一批用户在使用XP系统,所以发行一些软件的时候还是要测试在XP系统中能否运行,这时候我们就可以借助Virtua ...

  5. 使用rvm安装与切换Ruby

    列出已知的 Ruby 版本 rvm list known安装一个 Ruby 版本 rvm install 2.3.1 --disable-binary这里安装了最新的 2.2.0, rvm list ...

  6. BZOJ - 3676 回文串 (回文树)

    https://vjudge.net/problem/HYSBZ-3676 题意 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s ...

  7. MySQL学习笔记(二)性能优化的笔记(转)

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...

  8. XOR 加密

    XOR 是一个神奇的运算符, 观察它的真值表, 很容易得到以下结论: 假设现有 a , b 变量, 则 a ^ 0 == a a ^ 0xff == ~a (取反加1等于作为补码的a的真值的相反数的补 ...

  9. 【由浅入深理解java集合】(一)——集合框架 Collction、Map

    本篇文章主要对java集合的框架进行介绍,使大家对java集合的整体框架有个了解.具体介绍了Collection接口,Map接口以及Collection接口的三个子接口Set,List,Queue. ...

  10. overflow:auto学习

    一直认为没认为这个属性没什么大的用处,最近在使用一次iscroll时一直浮动到顶部层上面找了半天,发现可以用这个属性解决. 1.功能1,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除 ...