逻辑性最强的React Native环境搭建与调试

ReactNative系列文章:

1.《逻辑性最强的React Native环境搭建与调试》

2.《ReactNative开发工具有这一篇足矣》

正文

React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用,就足矣证明其实力!

本文分为以下几个部分:

  一、环境搭建;

二、APP调试与运行;

  三、扩展知识;

一、环境搭建

系统配置:Win10

模拟器:Visual Studio Emulator for Android(可以脱离VS单独安装,也可以使用其他其他模拟器或真机调试)

环境搭建分为两个部分:

1、Android开发环境搭建(之前已经设置过,可以跳过此步骤);

2、RN开发环境搭建;

1、Android开发环境搭建;

①、安装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、创建项目

  react-native 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安装。

 以下为扩展内容(可忽略):

    如果安装失败,或者不想等太长时间,点击:

https://services.gradle.org/distributions/下载,放入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自动更新,设置如图:

设置完之后,就可以愉快的编写代码了,所编即所得的及时反馈,着实好用,也大大节省了调试成本!

更多详情,请移驾:http://reactnative.cn/docs/0.45/getting-started.html

常见问题

问题1:小米手机不能识别设备,安装不了调试包?

解决方案:设置 =》 开发者选项 =》 关闭“启动MIUI优化”

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏挖坑填坑

(翻译)开始使用ABP.CORE模板 (ASP.NET Core with Angular)

开始一个新使用Angular和 ASP.NET Core 的ABP项目最简单的方法就是通过官方的模板页面来生成模板。切记包含zero模块。在官网完成创建和下载你...

2232
来自专栏FreeBuf

解密所有APP运行过程中的内部逻辑

0x01前言 这年头,apk全都是加密啊,加壳啊,反调试啊,小伙伴们表示已经不能愉快的玩耍了。静态分析越来越不靠谱了,apktool、ApkIDE、jd GUI...

28110
来自专栏生信技能树

点击此文,无需转发,即可下载上千个免费R包

写在前面: 谨以此文献给那些“奋斗”在转发送别人资源,为了博人眼球,而践踏别人的辛勤的劳动成果的公众号们。 当然了,R包本来就是免费的,你只是不会下载而已,所以...

4218
来自专栏全栈之路

工作以来用过的工具和网站

这是一个特别棒的编辑器,支持各种语言,内部集成了插件下载工具和git版本管理工具,而且界面结构特别简洁优雅,重要的它还是免费的。目前用它来开发服务器端,使用语言...

1052
来自专栏信安之路

审计某开源商城中的漏洞大礼包

首先这个 CMS 并不怎么出名,拿来当审计样板却很合适。给我的感觉是适合初级水平升中级之间的过程,也算是对上一篇审计文章的后续文了。

1320
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器 好,我个人推荐大家使用 atom 编辑器,第一是免费,第二是好看,第三是好用。 安装...

5098
来自专栏游戏杂谈

前端开发--优化工具

一般来讲优化前端,涉及到文件优化的有合并、压缩JS和CSS,以及对图片的优化处理,这篇文章的工具很不错,强烈推荐一下。

1273
来自专栏西安-晁州

Xss和Csrf介绍

Xss和Csrf介绍 Xss Xss(跨站脚本攻击),全称Cross Site Scripting,恶意攻击者向web页面中植入恶意js代码,当用户浏览到该页时...

3729
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性。主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5...

2498
来自专栏沈唁志

如何在Ubuntu 16.04上安装PrestaShop

如果您曾经考虑过开设在线商店,您可能会感受到各种免费的开源电子商务解决方案。虽然有这么多的选择意味着几乎可以肯定有一个可用的有效解决方案适合您的特定情况,但它也...

3043

扫码关注云+社区

领取腾讯云代金券