参考:http://www.lcode.org/react-native/

React native中文网:http://reactnative.cn/docs/0.23/android-setup.html#content

1、安装Jdk(最好默认安装路径尽量别改)

http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html

http://www.jb51.net/article/36811.htm(三个环境变量都配置)

 Java SE Development Kit 8u77 Windows x64187.31 MB  jdk-8u77-windows-x64.exe(64位)亲测——必须安装到磁盘根目录

2、安装SDK

最快的方式就是拷同事已经安装好的sdk(如果自己下载的话解决sdk更新慢FQ问题:http://androiddevtools.cn/

命令行运行adb检测sdk安装成功否

3、安装node.js

下载地址:https://nodejs.org/en/

一路下一步无需配制环境变量点击安装后

node -v的命令来测试NodeJS是否安装成功

4、安装git

下载地址:https://git-for-windows.github.io/

需要配置环境变量参考http://jingyan.baidu.com/album/9f7e7ec0b17cac6f2815548d.html?picindex=1

5.安装react-native命令行工具react-native-cli

git配置完成后可以clone React-native-cli了,建议大家到将react-native-cli克隆到某个盘,不要在c盘直接clone

1)   在命令行中进入你希望RN安装的目录

2)   输入git clone https://github.com/facebook/react-native.git,等待下载

3) 进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g

安装好之后,可以命令行下就有react-native命令了

6.创建RN项目

进入你希望创建项目的目录后,输入react-native init AwesomeProject,等待一段时间(较慢)

成功后目录结构

7.运行package

在命令行中进入项目目录,输入react-native start,等待一段时间:成功后

这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。

8. 安装Genymotion(忽略-不用管)

Genymotion是一个第三方模拟器,它比Google官方的模拟器更易设置且性能更好。但是,它只针对个人用户免费。如果你想使用Google模拟器,请往下看。

  1. 下载并安装Genymotion
  2. 打开Genymotion。如果你尚未安装VirtualBox,它有可能会提示你安装。
  3. 创建一个模拟器并启动。

虚拟机vm virtualbox启动不了,提示这样的错误,如何解决?

不能为虚拟电脑 Custom Phone - 4.1.1 - API 16 - 768x1280 打开一个新任务.

Unable to load R3 module D:\New Folder/VBoxDD.DLL (VBoxDD): GetLastError=1790
(VERR_UNRESOLVED_ERROR).

返回 代码:    E_FAIL (0x80004005)   

组件:    Console   

界面:    IConsole
{8ab7c520-2442-4b66-8d74-4ff1e195d2b6}

http://zhidao.baidu.com/question/369440038457309444.html?fr=iks&word=%B2%BB%C4%DC%CE%AA%D0%E9%C4%E2%B5%E7%C4%D4+Google+Nexus+4+-+4.4.4+-+API+19+-+768x1280+%B4%F2%BF%AA%D2%BB%B8%F6%D0%C2%C8%CE%CE%F1.++Unable+to+load+R3+module+E%3A%5CVB%2FVBoxDD.DLL+%28VBoxDD%29%3A+GetLastError%3D1790+%28VERR_UNRESOLVED_ERROR%29.++%B7%B5%BB%D8+%B4%FA%C2%EB%3AE_FAIL+%280x80004005%29+%D7%E9%BC%FE%3AConsoleWrap+%BD%E7%C3%E6%3AIConsole+%7B872da645-4a9b-1727-bee&ie=gbk

9.运行项目

(先用数据线连接手机,打开开发者模式,点击允许USB安装。  本人MI5手机,在运行项目安装apk时报错,需要关闭:弃用MIUI优化,具体请参考文章:

react-native学习笔记--首次安装apk到小米5报错

刚刚运行package的命令行不要关闭,重新启动一个新的命令行,

进入项目目录,输入react-native run-android

等待运行(如果是第一次运行,首先会下载gradle,时间较长)

运行成功后出现下图

10.第一次手机肯定报错

点击Dev Settings后,点击Debug server host & port for device,设置IP和端口

这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081

设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!

 

 

 

react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置的更多相关文章

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

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

  2. 史上最详细Windows版本搭建安装React Native环境配置

    说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...

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

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

  4. Windows版本搭建安装React Native环境配置

    1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...

  5. Windows版本搭建安装React Native环境配置及相关问题

    此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...

  6. 史上最详细的VM虚拟机安装Kali-linux教程(以2020.1版本为例,含下载地址+默认提升为root权限)

    一.官方下载 Kali Linux 官方网址:www.Kali.org下载方式分两种:http 下载和 bt 下载(由于是国外网站 http 方式下载会非常慢),选择对应版本点击即可下载. 二.创建新 ...

  7. OpenCV学习笔记(01)我的第一个OpenCV程序(环境配置)

    昨天刚刚考完编译原理,私心想着可以做一些与考试无关的东西了.一直想做和图像处理相关的东西,趁这段时间有空学习一下OpenCV,搭建环境真是一件麻烦的事情,搞了近三个小时终于OK了.先来张图: 大致描述 ...

  8. 史上最详细的Air7xx驱动安装教程

    由于Air7xx系列4G模块需要安装USB驱动,但是很多开发者对USB驱动的安装方法不是十分了解,所以经常出现问题,导致安装失败.特书此文,手把手教你装USB驱动. 第一步 从官网下载最新的驱动程序 ...

  9. 史上最详细的CentOS 7 安装 HBase教程

    1. 前半部分参考 https://www.cnblogs.com/ivictor/p/5906433.html 2.问题 namenode无法启动,参考 https://stackoverflow. ...

随机推荐

  1. 用canvas生成二维码

    $("#actimg").qrcode({                        render: "canvas",    //设置渲染方式,有tabl ...

  2. css_01之基础属性、选择器

    1.  常用属性:①color:文本颜色:②background-color:背景颜色:③font-size:文字大小: 2.  样式声明:①内部样式:style=“样式规则:”,写于作用标签内,优先 ...

  3. MemberwiseClone和DeepClone

    文章转自:http://www.cnblogs.com/zhangji/archive/2011/02/23/1961897.html MemberwiseClone 方法创建一个浅表副本,具体来说就 ...

  4. c# spring aop的简单例子

    刚刚完成了一个c#的spring aop简单例子,是在mac下用Xamarin Studio开发的.代码如下: 接口 using System; using System.Collections.Ge ...

  5. 7款震撼人心的HTML5CSS3文字特效

    1.HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式 ...

  6. Android下将图片载入到内存中

    Android的系统的标准默认每一个应用程序分配的内存是16M.所以来说是很宝贵的,在创建应用的时候要尽可能的去节省内存,可是在载入一些大的文件的时候,比方图片是相当耗内存的,一个1.3M的图片,分辨 ...

  7. HTML、CSS、JS、PHP 的学习顺序~(零基础初学者)

    如果你有耐心坚持一年以上的话, 我会推荐HTML->CSS->JS->PHP的顺序来学习. 1. HTML学习:首先学习HTML,HTML作为标记语言是非常容易学的,把w3schoo ...

  8. 面向对象的线程池Threadpool的封装

    线程池是一种多线程处理形式,预先创建好一定数量的线程,将其保存于一个容器中(如vector), 处理过程中将任务添加到队列,然后从容器中取出线程后自动启动这些任务,具体实现如下. 以下是UML图,展示 ...

  9. Python 练习: 打印0到99小于50或大于70的数字

    for i in range(100): if i < 50 or i > 70: print(i) 注意: range(100) 表示 0 到 99 个数字

  10. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验四:按键模块③ &mdash; 单击与双击

    实验四:按键模块③ - 单击与双击 实验三我们创建了"点击"还有"长点击"等有效按键的多功能按键模块.在此,实验四同样也是创建多功能按键模块,不过却有不同的有效 ...