逻辑性最强的React Native环境搭建与调试
React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用,就足矣证明其实力!
本文分为以下两个部分:
一、环境搭建;
二、APP调试与运行;
一、环境搭建
系统配置:Win10
模拟器:Visual Studio Emulator for Android(可以脱离VS单独安装,也可以使用其他其他模拟器或真机调试)
环境搭建分为两个部分:
1、Android开发环境搭建(之前已经设置过,可以跳过此步骤);
2、RN开发环境搭建;
1、Java环境搭建;
①、安装JDK,具体步骤不详述,可以使用Java -version来检测一下;
②、安装Android SDK,需要设置环境变量:ANDROID_HOME => Android SDK Manage安装位置,ex:ANDROID_HOME => E:\android\sdk;
③、设置Android SDK,需安装已下项:
- Android SDK Build-tools version 23.0.1
- Android 6.0 (API 23)
- Android Support Repository
- Local Maven repository for Support Libraries
如图:
2、RN开发环境搭建:
①、安装node环境,https://nodejs.org/en/点击下载V6.xxx安装即可;
②、安装Git,https://git-for-windows.github.io/点击下载安装即可;
③、安装RN脚手架:npm i react-native-cli -g
到此为止环境已经搭建完成。
二、APP调试与运行
1、创建项目
npm init demo1
2、安装依赖包
进入demo1根目录执行:npm i
3、启动服务器
react-native start
等一段时间,用浏览器访问http://localhost:8081/index.android.bundle?platform=android可以访问,即启动完成,启动之后不能关闭;
4、安装app
react-native run-android
在输入此命令前,要先打开模拟器,或连接真机,第一次启动非常慢,需要下载gradle,也可以手动下载gradle安装。
以下为扩展内容(可忽略):
如果安装失败,或者不想等太长时间,点击:
http://download.csdn.net/detail/qq_25837957/9617009?web=web下载,放入C:\Users\用户名\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv
如果手动安装需要执行:react-native run-android重新启动;
5、运行调试app
本人用的是Visual Studio Emulator for Android(模拟器)运行的,真机或其他模拟器相同,第一次运行会出现错误,如图:
解决方案:设置IP和端口,具体操作,摇一摇手机,Visual Studio Emulator for Android(模拟器)如图:
点击Dev Settings后,点击Debug server host & port for device,设置IP和端口,这个时候返回是空白,再次点击摇一摇,选择Reload JS程序就显示出来了,如图:
扩展知识(重要):每次修改完程序都要摇一摇Reload很麻烦,这个时候有一个很方便的做法开启热加载,改动完之后,即可在app自动更新,设置如图:
逻辑性最强的React Native环境搭建与调试的更多相关文章
- Ubuntu17.10 React Native 环境搭建
React Native 环境搭建 环境:ubuntu17.10 安装依赖 必须安装的依赖有:Node.React Native 命令行工具以及 JDK 和 Andriod Studio. 安装nod ...
- 初学 React native | 环境搭建(在模拟器上运行)
我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python ...
- React Native环境搭建以及几个基础控件的使用
之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...
- Mac系统下React Native环境搭建
这里记录一下在Mac系统下搭建React Native开发环境的过程: 1. 安装HomeBrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.g ...
- react Native环境 搭建
react Native的优点:跨平台 低投入高回报 性能高 支持动态更新.一才两用(ios和Android) 开发成本第 代码复用率高.windows环境搭建react Native开发环境1.安装 ...
- React Native 环境搭建踩坑
React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-nat ...
- React-Native(一):React Native环境搭建
第一步:安装jdk 从java官网下载jdk8 配置环境变量: JAVA_HOME:D:\Program Files\Java\jdk1.8.0_111 Path中追加:%JAVA_HOME%\bin ...
- react native环境搭建(含错误处理)
1. Python 2 注意,不要选择3.0及以上的,还不成熟 安装过程中一直 next就可以了,但是注意下图,勾选添加到系统环境变量 安装完之后cmd输入 python 查看是否安装成功. 补充 ...
- React Native环境搭建(iOS、Mac)
http://reactnative.cn/docs/0.42/getting-started.html#content 1.安装Homebrew Homebrew, Mac系统的包管理器,用于安装N ...
随机推荐
- 计算facebook sdk需要的key hashes
1. 下载openssl,在C盘创建openssl文件夹,解压下载的zip到openssl文件夹. 2. 找到debug.keystore. windows下在C:\Users\用户名\.androi ...
- ucenter 单点登录,终极版
一 ,discuz ecshop 两边登陆都可以同步登陆到另一程序上,但退出则无法实现同步登陆.顺着 Ecshop 的退出流程,顺藤摸瓜找到了 lib_common.php 文件中的 uc_ca ...
- 备忘录《一》基于cookie使用拦截器实现客户每次访问自登陆一次
原创声明:本文为本人原创作品,绝非他处摘取,转载请联系博主 相信大家在各大网站都会遇到,登录时,在登录框出现下次免登陆/一个月免登陆的类似选项,本次博文就是讲解如何实现,在这记录一下,也算是做个备忘录 ...
- PHP开发微信模版消息换行的问题
微信是个坑!微信是个坑!微信是个坑!重要的时间说三遍 关键的地方是空白换行符到底是什么也不说,百度说是"\n":但是在发送消息的时候发现原样输出,发现json_encode对\n进 ...
- C#基础篇--静态成员、抽象成员、接口
1.静态成员: 静态成员(static).静态类与实例成员.类: 静态成员属于类所有,非静态成员属于类的实例所有. 静态成员不能标记为 Virtual,Abstract,Override,也就是说静态 ...
- 第39篇 免费博客github Pages绑定域名
原文地址:http://blog.laofu.online/2017/06/02/how-bind-domain/ 网站已经有了,需要对网站来绑定一个自己的个性域名,本人是买了一个阿里云的域名,也就是 ...
- sql备份(导出脚本)
第一步: 右键需要备份的数据库(这里以MyDB为例)-->任务-->生成脚本
- JVM-1.编译
目录 一.编译器概述 二.编译器组成 三.示例 四.深入理解JVM中的编译器 五.语法糖 六.补充 一.编译器概述 1.编译器实质 编译器的实质是将一种语言规范转化为另一种语言规范:由人容易理 ...
- 【小练习01】CSS--PS提示框制作
要求用css和HTML实现下图效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- Java File类应用:递归遍历文件夹和递归删除文件
要求: 1)采用递归遍历文件夹下的所有文件,包括子文件夹下的文件 2)采用递归删除文件下的所有文件 注意: 以下递归删除文件的方法,只能删除文件,所有的文件夹都还会存在 若要删除正文文件夹,可以在递归 ...