Windows搭建react-native开发环境
一、目标平台 windows+android
1. 必须软件
python2+
nodejs
npm
2. 安装react-native命令行
$ npm install -g react-native-cli
3. 搭建安卓环境
(1)React Native目前需要Android Studio2.0或更高版本, Android Studio需要Java Development Kit [JDK] 8(注意暂不支持更高版本)
(2)官网上下载Android Studio即可, JDK选择jdk-8u161-windows-x64.exe,目前jdk已经升级到10,切记不能选择高于8版本
(3)运行项目需要安卓手机或者模拟器(自行百度,安装需要空间较大)
(4)初始化安装后可以选择"custom"自定义路径和组件(建议所有组件勾选,安装到D盘目录)

(5)安装完成打开AS欢迎界面右下角选择 Configure | SDK Manager

在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。(不同设备可能需要SDK Platfrom版本不一样,等到最后运行报错提示时再回来安装即可)

在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository.

(6)配置环境变量分两步(不能少)
一、将SDK的路径添加
高级系统设置 > 高级 > 环境变量(系统变量S) > 新建 >
变量名 : ANDROID_HOME
变量值 : D:\Users\Administrator\AppData\Local\Android\Sdk(实际的SDK下载位置)
二、将jdk8,platform-tools,tools添加环境变量PATH ,(此处是都安装到D盘下,实际情况根据安装目录而定)
D:\Program Files\Java\jdk1.8.0_161\bin
D:\Users\Administrator\AppData\Local\Android\Sdk\tools
D:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools
三 、检查jdk安装是否成功 : $ javac -version
(7)连接手机
打开手机开发者选项: 设置 》 更多设置》 关于手机 》软件版本号上连续点击7次以上即可开启 "开发者选择"
打开手机USB调试 : 设置 》更多设置 》开发者选项(一般在最下边) 》开发者选项打开,USB调试打开
手机连接电脑 : 自动安装驱动,如失败,建议下载手机助手或者豌豆荚连接手机时会安装驱动,此处使用电脑管家工具安装连接
注意 : 手机第一次连接电脑时,手机首页上会弹出调试对话框,需确定方可连接电脑,如错过提示,可反复多次连接手机


最后 : 打开命令行工具检测手机是否连接成功 $ adb devices, 显示devices序列号即为连接成功

(8)构建项目
1. 初始化并安装依赖, 如依赖安装不完全,先删除node_modules后在根目录下重新 $ cnpm install

2. 启动项目
$ react-native run android (首次运行需下载gradle依赖, 小数点表示下载进度, 由网络质量决定速度)



下载到最后会新弹出nodejs服务器窗口 (此窗口为项目开启一个服务器环境,可以在localhost:8081上运行), 此时手机上会自动打开App

手机上的APP

4. 最后, 使用开发工具 (AS 或者 Webstorm), 在APP.js上修改代码,在手机上触摸左下角的菜单键弹出窗口点击Reload即可更新修改

Windows搭建react-native开发环境的更多相关文章
- React Native开发 - 搭建React Native开发环境
移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...
- 搭建React Native开发环境
搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...
- 【RN - 基础】之Windows下搭建React Native开发环境
前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...
- 1、在MAC上搭建React Native开发环境
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- 在Mac上搭建React Native开发环境
概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...
- [转] 在Mac上搭建React Native开发环境
原文链接: http://blog.csdn.net/xiangzhihong8/article/details/53914336 概述 前面我们介绍过在window环境下开发React Native ...
- Mac下搭建react native开发环境
安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL htt ...
- 搭建基本的React Native开发环境
步骤如下: 1.安装HomeBrew,命令如下: 在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Home ...
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [转载]Sublime Text 3 搭建 React.js 开发环境
[转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
随机推荐
- C和C指针小记(九)-指针用法1
1. *p++ 最常用的一个指针的用法,就是在循环中用来迭代. *p++ 共有3步操作: 1.++操作符把p所指向的内存中的值复制一份 2.++操作符把p加1(实际是一个p所指内存单元的大小,这也是编 ...
- MySQL服务器线程数的查看方法详解
本文实例讲述了MySQL服务器线程数的查看方法.分享给大家供大家参考,具体如下: mysql重启命令: ? 1 /etc/init.d/mysql restart MySQL服务器的线程数需要在一个合 ...
- int 4 bytes
http://waynewhitty.ie/blog-post.php?id=19 MySQL - INT(11) vs BIGINT(11) vs TINYINT(11) This seems to ...
- [qemu] qemu旧的net参数已经不再可用了,新的这样用。
老的命令: /root/BUILD_qemu/bin/qemu-system-x86_64 -enable-kvm \ -m 2G \ -cpu Nehalem -smp cores=,threads ...
- 转:关于将Java编译过的.class文件打成jar可执行文件/JAR详解
原文链接:关于将Java编译过的.class文件打成jar可执行文件/JAR详解 如何把 java 程序编译成 .exe 文件.通常回答只有两种,一种是制作一个可执行的 JAR 文件包,然后就可以像. ...
- 《Linux 文本处理》- awk 分析 nginx 日志
废话不多说,简单了解一下 awk - 强大的文本分析工具,也就是分析日志 最常用的就是分析日志了吧,做统计什么,这里也拿 nginx 日志来做分析 1:统计出现次数 - 比如状态码出现次数 - 先直接 ...
- Swift中"#"的用法
配置外部参数名 在函数(或者方法)的参数名前添加"#",可以使该参数拥有相同的本地参数名和外部参数名. 注:在方法中,第二个及后续的参数,默认是具有和内部参数一致的外部参数名的,只 ...
- 获取连接的用户ip
public static string GetUserIP() { string result = String.Empty; result = HttpContext.Current.Reques ...
- 深入理解为什么应该使用transform来替代top
话说,这个问题我们得从浏览器得渲染机制说起: 我们先来理解一下 重绘(Repainit)和 回流(Reflow): 重绘:当节点需要更改外观而不会影响布局得,比如改变 color 就称为重绘: 回流: ...
- vue-loader是什么?使用它的用途有哪些?
vue-loader是解析 .vue 文件的一个加载器,跟 template/js/style转换成 js 模块: 用途:js可以写es6.style样式可以scss或less:template可以加 ...