React Native 调试篇

这篇文档主要是为了帮助搭建React Native示例程序和调试环境而写。

我的环境配置

1. Windows 10 操作系统

2. 本机已经装好了 NodeJS, Python, JDK8

3. 以官方文档 https://facebook.github.io/react-native/docs/getting-started.html 作为参考。

(https://reactnative.cn/docs/0.51/getting-started.html 这个是中文版的,基于0.51的版本,如果你没有VPN,最好按照中文文档来配置。)

4. 当前React Native 版本是0.56-RC

详细配置

官方提供两种方式来生成React Native示例程序,一个是基于Expo,另一个是传统方式。

1. 第一种方式 Expo,比较方便快捷,但是还是有点坑的。Expo似乎是官方推荐方式。命令比较简单,跑完之后,等于在Expo这个APP的壳子里玩,感觉像个包装器。

npm install -g create-react-native-app

create-react-native-app AwesomeProject

cd AwesomeProject

npm start

官方文档提到:

Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.

要求在同一个无线网络之下,我的不行啊,我笔记本是有线,手机是WIFI。命令跑完了,似乎有问题。只好下了个EXPO XDE (https://expo.io/tools#xde),比命令行启动的稍微好一点。这个XDE提供多个连接方式,我试了一下,用tunnel/localhost(点击Host)方式部署是可以的。于是连接成功了。


EXPO XDE

2. 第二种方式是传统方式。就是把之前的先决条件NodeJS, Python, JDK8装好,配置好。

然后跑下面命令:

npm install -g yarn react-native-cli

yarn是替代npm,似乎方面点,也快一点。 官方说要用Python2,不过我Python3也试过了,感觉没什么影响。

接下来就要装Android Studio了,可以安装官方文档按部就班的安装配置,最后模拟器能跑起来,然后跑过命令:

adb devices

可以看到你打开的模拟器或者连接的实体机就算OK啦。


List Devices

接下来跑命令:

react-native init AwesomeProject

cd AwesomeProject

react-native run-android

这个命令会开一个Metro Bundler在指定端口上,像一个JS server,以后debugger是要attach这个端口进行调试的。


Metro Bundler (JS Server)

关于端口

Expo的端口默认是19001,基本不会与其他程序冲突。

第二种方式启动的话默认端口是8081,与我本地的MaCfee端口冲突,又关不掉MaCfee,所以只好,切换端口啦。

两个地方需要改变

1.  set RCT_METRO_PORT=8088

2.  手机上的调试设置,摇晃手机:

DEV Settings:

Debug server host & port for device:

localhost:8088

之后再跑,端口就变了。

调试

也有两种方式:

1. Chrome调试

在Chrome扩展里安装React Developer Tools

之后摇晃手机点击 “Debug JS Remotely”会在chrome打开页面。


Debug in Chrome

2. IDE调试

我这边用的是VSCode,其他工具类似。

首先在Extensions搜索“React Native”,安装插件。

Install React Native Extension

然后点击调试里的小齿轮,选择React Native


Set Debug as React Native

更改Settings - WORKSPACE SETTINGS:

{

    "react-native.packager.port": 8088

}


Settings in VSCode

点击"Attach to packager", 连接上你打开的JS server。


Debug in VSCode

设置好断点,同事确定之前Chrome没有打开debug, 摇晃手机点击 “Debug JS Remotely”,可以看到进入到VSCode进行调试了。

大功告成。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容

  • 在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利...
    简而精阅读 1,755评论 1 0
  • 1 基础开发技巧 1.1 AppRegistry AppRegistry模块则是用来告知React Native哪...
    Kevin_Junbaozi阅读 1,425评论 0 2
  • 利用代理排错 MacOS代理配置(Sierra) 如果发生了错误,您可以在系统网络设置中切到自动代理设置,使用自动...
    ladybug阅读 12,345评论 0 5
  • 昨天看了«七月与安生»的电影,周冬雨和马思纯,安生和七月,很感伤纠结的一个故事。 你有过安生那样的朋友吗?...
    苏苏落叶阅读 315评论 0 0
  • 门前风卷起黄沙飞舞, 落下思绪万千, 雨声落下万般愁绪, 带不走千丝万缕的哀愁, ...
    一日光阴阅读 308评论 0 0