React Native项目真机调试(一)

之前介绍过如何搭建React Native开发环境并创建项目,React Native开发环境搭建方式更适合在需要构建原生ios或者android代码时使用,但是其真机调试比较麻烦,本篇介绍在不需要构建原生代码时,如何快速创建React Native项目,并且快速开启真机调试。

前言

本篇介绍的方式相较于前篇,不需要安装,配置XcodeAndroid Studio等工具和环境,只需要安装Node,另外推荐使用Yarn代替Npm进行安装包管理(可选):

npm install -g yarn

create-react-native-app

接下来使用npmyarn安装create-react-native-app脚手架:

$ npm install -g create-react-native-app
  # or
$ yarn global add create-react-native-app

注:Node版本必须大于版本v6,npm于版本v3。

创建项目

然后执行初始化指令:

$ create-react-native-app my-app

即在当前目录下创建了my-app项目,在该项目目录下可执行命令如下:

shell

启动项目

接着就可以启动项目,然后真机调试了:

$ cd my-app

$ yarn start 
 # or
$ npm start

项目本地启动,并在控制台输出如下信息:

yarn start

真机调试

项目已经在本地启动了,如果需要真机调试就需要在移动设备上安装Expo客户端(android 可能需要在google store上下载,备用下载资源地址:链接: https://pan.baidu.com/s/1LHIuId8ycxDJtaBFV9f7eA 密码: u3bd),然后打开Expo应用,扫描控制台输出的二维码即可真机访问应用,并支持项目代码更新热加载。

提示

需要注意几个问题:

  1. 此方式创建的项目,无法编辑原生ios或android代码;

  2. 移动设备安装的Expo客户端版本需要大于支持项目所安装的expo SDK版本的客户端版本,否则真机上无法预览项目,如下图,对应支持expo 26.0.0版本SDK的客户端版本需要大于v2.4.0,如果使用文章中提供的下载的Expo链接,则需要将expo SDK版本降级到25.0.0

    expo SDK

原创文章,转载请注明: 转载自 熊建刚的博客

本文链接地址: React Native项目真机调试(一)

熊 建刚

热爱前端,但不局限于前端,喜欢尝试各种新技术,爱好读书。

One thought on “React Native项目真机调试(一)

发表评论

电子邮件地址不会被公开。 必填项已用*标注