逻辑性最强的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优化”

逻辑性最强的React Native环境搭建与调试相关推荐

React Native 环境搭建步骤
之前一直用RN写APP,但是真正对于RN的安装以及环境配置缺不太了解.相当于站在巨人的肩膀.这次,研究RN的同事离职,所以这块儿就必须要接手.从新搭建了一次环境.在此记录一下. 一.RN环境搭建的必须 ...
React Native 环境搭建
搭建开发环境在React Native官网 https://reactnative.cn/docs/environment-setup 网址上有两种环境,一种完整原生环境,所谓原生环境, RN之所以 ...
webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新
工具准备: SDK Android SDK Build-tools:23.0.1 SDK Platform:Android N .6.0 .5.1.1.5.0.1.4.4.2.4.1.2 Androi ...
React native 环境搭建遇到问题解决(android)
新建项目 react-native init TestApp 运行项目 react-native run-android 不好意思,错误马上就到了问题一通常遇到这个错误之后,系统会给出这个具体详情 ...
Mac M1 搭建 React Native 环境
Mac M1 搭建 React Native 环境环境安装可以参考对照官方文档,本文针对M1芯片目前未完全适配情况下的方案,算是临时解决方案,不具有时效性. 你需要自行准备的依赖:Xcode &g ...
android 网络时区错误,React native 安卓机器上调试代码报错：网络请求出错TypeError: Network request failed...
React native 安卓机器上调试代码报错:网络请求出错TypeError: Network request failed 安卓机器 usb连接调试报错信息 TypeError: Networ ...
QQ玩一玩(轻游戏)开发环境搭建与调试
玩一玩开发环境搭建与调试前言 Android 调试下载Android Studio 配置环境变量进入用户当前目录设置环境变量设置生效检查配置是否正常下载特殊版测试Q 调试时Android ...
史上最详细Windows版本搭建安装React Native环境配置
说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...
react native windows 搭建（完整版）
声明:用windows 搭建的react native只能开发安卓应用 1.准备安装java jdk,以及Android SDK 传送门: java JDK Android SDK(自行寻找) ...

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

逻辑性最强的React Native环境搭建与调试相关推荐

最新文章

热门文章