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

配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的搭建好环境本站推出搭建教程.

安装学习遇到任何问题可以加入 ReactNative高级交流群 127482131 或访问博客网站 http://www.reactnative.pw/

第一步安装JAVA JDK

  1. 下载对应你电脑系统版本的 1.8 32位或64位SDK。
  2. 下载网站http://jdk.android-studio.org/
  3. 安装完成后测试path环境 cmd命令行输入java 出现下图内容
 

第二步安装android环境
  1. http://tools.android-studio.org/index.php/sdk
  2. 下载后安装installer_r24.3.4-windows.exe,安装成功后出现下图界面,选择SDK Manager打开
  3. 安装下列package,都必须安装,如果如果网站被墙可以设置镜像网站
  4. 特别提示 Intel x86 Emulator HAXM INSTALL需要自行安装,并在BIOS开启支持 Intel  Virtualization   Technology
  5. 如果下载缓慢可以设置镜像
 
 
 
  • 启动 Android SDK Manager ,打开主界面,依次选择「Tools」、「Options...」,弹出『Android SDK Manager - Settings』窗口;
  • 在『Android SDK Manager - Settings』窗口中,在「HTTP Proxy Server」和「HTTP Proxy Port」输入框内填入 mirrors.neusoft.edu.cn 和 80,并且选中「Force https://... sources to be fetched using http://...」复选框。设置完成后单击「Close」按钮关闭『Android SDK Manager - Settings』窗口返回到主界面;
  • 依次选择「Packages」、「Reload」。
     
第三步android环境设置 
 
 1.找到我的计算机-属性-高级系统设置-高级-环境变量
   新增ANDROID_HOMN 值现象你安装的skd目录 比如:D:\Program Files (x86)\Android\android-sdk
 
2. PATH增加如下内容
%ANDROID_HOME%;%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
 
 
测试是否配置成功,打开命令行输入 android 和 adb 分别测试一下
 
 
必须测试成功,后面才能正确编译项目
 
第四步其他环境配置
 
建议安装上Python 2.7,有些可能不装也没事
 
下载地址  https://www.python.org/downloads/
 
安装git
 
安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端
 
下载地址:https://git-for-windows.github.io/
 
 
第五步 RN环境设置和搭建
  1. 下载稳定版 nodejs v5.7.0 Stable
    下载网站 https://nodejs.org/en/
  2. 安装后命令行输入npm测试是否成功
 译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
 npm install -g react-native-cli
安装好之后,可以命令行下就有react-native命令了

创建RN项目

命令行进入你希望创建项目的目录输入
 
react-native init AwesomeProject
可能会很慢,等等就好,大概200多M的文件
 
在命令行中进入项目目录,输入react-native start,等待一段时间:
 
 
 
部分人错误需要删除下面的文件(自行备份)
D:\Program Files\reactnative\MyProject\node_modules\react-deep-force-update\.babelrc
 
 
 
如果出现上面的脚本内容表示服务器端已经可以了。
 
 
第六步 配置安卓模拟器
 
 
 
注意要点内存设置515 开启GPU
配置好后启动模拟器,如果不会可以使用genymotion,
 
 建议使用genymotion模拟器比谷歌的模拟器好用
安装genymotion-2.6.0-vbox 可能要去官网注册一个账号
官网下载
https://www.genymotion.com/
下载网盘
http://pan.baidu.com/s/1bnTnXs7
 
安装后需要配置下,这里坑了我好久,run-android找不到设备就需要设置这个
 
genymotion不能联网配置问题,网上找了很多教程都不能用,后来自行研究如下解决方案
 
 
本地连接-属性-共享-设置如下
 
 
查看共享IP后面设置会用到
 
 
修改Oracle VM VirtualBox配置
网卡1
 
 
网卡2配置
 
 
配置IP
管理 全局设置双击 VirtualBox Host-onley Ethernet Adapter
 
 
 
 
最后一步,也是最重要一步开启模拟器 wifi, 否则后面项目报错。
显示无网络,但是实际可用连接网络
测试服务端口 ip为你本机IP ipconfig查看本地连接 ipv4地址
 
 
 
第七步 编译代码打包到模拟器 cd 到项目文件目录使用 react-native run-android
 
 
 
等待运行(如果是第一次运行,首先会下载gradle,时间较长)
 
 
成功界面如图
 
 
第一次运行会出现,
 
 
这时候我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口
 
 
 
这里的IP是你本地电脑的ipv4 IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081
 
设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!
 
 
 
 
 
完成啦如果你安装学习遇到任何问题可以加入 ReactNative高级交流群 127482131 或访问博客网站

史上最全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. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  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. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  7. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  8. Windows系统Ionic安装教程/Ionic环境配置

    原文链接:http://blog.csdn.net/superjunjin/article/details/43412017 参考文章 Cordova 3.x 基础(1) -- 环境搭建(Window ...

  9. windows安装React Native开发运行环境

    React Native是什么 React Native是facebook开源的一个用于开发app的框架.React Native的设计理念:既拥有Native (原生) 的用户体验.又保留React ...

随机推荐

  1. shell腳本

    1.awk过滤重复行 awk '!a[$0]++{print $0}' 过滤重复行 awk '!a[$1]++{print $1}' 过滤第一列重复行 并只打印第一列 awk '!($1 in a){ ...

  2. 【Eclipse】 Eclipse 中JPEGEncodeParam 错误波浪线问题

    [异常信息] Description Resource Path Location Type Access restriction: The method encode(BufferedImage, ...

  3. Win10/UWP开发—SystemNavigationManager

    Win10系统为确保所有应用中的一致导航体验,提供后退导航功能.当你的应用在手机.平板电脑上或者在支持系统后退功能的电脑或笔记本电脑上运行时,系统会在"后退"按钮被按下时通知你的应 ...

  4. iOS开发零基础--Swift篇 元组

    元组的介绍 元组是Swift中特有的,OC中并没有相关类型 它是什么呢? 它是一种数据结构,在数学中应用广泛 类似于数组或者字典 可以用于定义一组数据 组成元组类型的数据可以称为“元素” 元组的定义 ...

  5. Hashtable在ViewState中无法增加值

    在我调试程序的时候,我发现WebForm 2.0和MVC3解析ViewState的方式不同,同样的代码,在Weorm中管用,在MVC中不起作用. private Hashtable ht { get ...

  6. Linux入门基础 #6:Linux用户基础

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  7. DOM元素对象的属性和方法(1)

    一.accessKey() 作用:获取元素焦点快捷键:设置快捷键后,使用Alt+快捷键,让元素快速获得焦点, <!DOCTYPE html> <html> <head&g ...

  8. 安装VS时,双击setup.exe后界面一闪而过的问题

    问题:安装VS时,双击setup.exe界面一闪而过的问题 解决: 百度后说需要到"控制面板/添加和管理程序"关闭系统自带的netframework3.x及以上版本. 1.查看所有 ...

  9. python编译生成的.pyc作用

    如果 Python 进程在机器上拥有写入权限,那么它将把程序的字节码保存为一个以 .pyc 为扩展名的文件( ".pyc" 就是编译过的 ".py" 源代码). ...

  10. [转载]解决linux 下多线程错误 undefined reference to `sem_init'

    转自:https://blog.csdn.net/yzycqu/article/details/7396498?utm_source=copy 解决linux 下多线程错误 undefined ref ...