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. day13-(事务&mvc&反射补充)

    回顾: jsp: java服务器页面 jsp的脚本 jsp的注释 html注释 java注释 jsp注释 <%-- --%> jsp的指令 page:声明页面一些属性 重要的属性: imp ...

  2. MySQL入门介绍(mysql-8.0.13)

    MySQL入门介绍(mysql-8.0.13单机部署) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL数据库介绍 1>.MySQL是一种开放源代码的关系型数据库 ...

  3. Linux安装npm并打包前端代码

    查看node版本$ node -v查看npm版本$ npm -v如果没有安装node及npm,需要先安装node及npm#yum install node# yum install npm安装cnpm ...

  4. linux下生成00 01 02..99的这些数

    [root@localhost ~]# seq -s " " -w 9901 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 ...

  5. 15、JDBC-CallableStatement

    一.存储过程 创建 CREATE DEFINER=CURRENT_USER PROCEDURE `adder`(IN a int, IN b int, OUT sum int) BEGIN DECLA ...

  6. Spark源码剖析 - SparkContext的初始化(五)_创建任务调度器TaskScheduler

    5. 创建任务调度器TaskScheduler TaskScheduler也是SparkContext的重要组成部分,负责任务的提交,并且请求集群管理器对任务调度.TaskScheduler也可以看作 ...

  7. HBase单机和集群版部署

    1. HBase安装部署 HBase有两种部署模式:单机版模式和集群版模式.无论哪种模式,都需要配置HBase conf目录下的文件.至少,必须在conf/hbase-env.sh文件中添加JAVA_ ...

  8. 解决浏览器跨域限制方案之JSONP

    一.什么是JSONP JSONP即:JSON with Padding,是一种解决因浏览器跨域限制不允许访问跨域资源的方法. JSONP是一个非官方的协议,它允许在服务器端返回javascript标签 ...

  9. mac怎么快速回到桌面 隐藏所有窗口

    当你同时按下Option+Command+h键,就能把所有已打开的程序窗口(不包括当前正在运行的应用程序窗口)最小化到Dock栏上.注意不是关闭哦,是最小化哦.如果需要把程序窗口恢复到屏幕上,直接点击 ...

  10. JS数据结构库

    lodash https://lodash.com/docs#now https://lodash.com/ A modern JavaScript utility library deliverin ...