无论什么事,如果不断收集材料,积之十年,总可成一学者。

RN调试

在RN的开发中,存在两种情况,一种情况是具有Android或者IOS原生的开发经验。另一种是前端来搞,对原生开发了解少。
而我目前就是第二种,而且这两种在开发上也有差异,如果你有原生开发经验,一般很少用指令来启动,大部分是先打开Xcode或AS来编译,编译完成直接调试。

iphone的真机调试

大致了解一下iphone的真机调试,它需要苹果开发者账号,当你用use连接iphone的时候,iTunes会提示你已经连接电脑,是否同步。

RN调试 - 图1
你需要打开xcode,在product/Destination/
RN调试 - 图2
下一步,需要你设置一下开发者账号。关于注册苹果开发者账号就不再这里细说。
RN调试 - 图3
然后在你项目中设置Team,两个地方设置,Tests也需要设置。
RN调试 - 图4
编译成功后,会出现一个弹框,需要你重复输入好几次你的mac锁屏密码,才可以把App下载到你的手机上调试。
RN调试 - 图5
在这里还有一种方式,方便你把手机屏幕投射到mac上,打开mac上自带的QuickTime Player,新建设置。
RN调试 - 图6

Android的真机调试

Android的真机调试相对来说,比较简单点,android需要打开在手机打开usb调试。然后通过指令adb devices来查看连接的设备。
RN调试 - 图7
下一步,在项目中运行react-native run-android来启动,android需要注意的是,android手机需要在手机点击提示安装的按钮才能安装到手机,而iphone是直接安装到手机上的。

JS调试

当我们把App下载到手机上的时候,我们调试js,我们需要下载React Native Debugger。
RN调试 - 图8
首先,你摇一摇,点击Debug JS Remotely,会在浏览器打开一个提示的界面。(确保你的usb接口一直连着,否则debugger会不成功。
RN调试 - 图9
RN调试 - 图10

expo调试

当还有一种调试方式是expo调试,什么是expo?
Expo提供了一个共享的本地运行时,所以你不用编写本地代码,你专注于用JavaScript编写你的React应用程序。您不必担心iOS或Android的特定设置,甚至不必打开Xcode。 Expo拥有自己的工作流程,包括一个名为XDE的应用程序和命令行界面,使开发和部署变得轻松。
expo尚未准备好用于所有应用程序。有很多情况下,目前的限制可能不适合您的项目。所以不建议适用expo,不过对于初学者来说,expo能很好的练习官方组件。
首先你可以打开https://snack.expo.io。
RN调试 - 图11
第二步,设置DeviceID。设备ID需要你在手机上下载expo。注册账号就会有。
RN调试 - 图12
然后在在RUN中输入设备ID。连接之后就会在页面底部出现的手机名称。
RN调试 - 图13
在手机上显示。
RN调试 - 图14
还有一种方式就是在电脑上下载expo的客户端。
RN调试 - 图15
对expo了解的不是很多,如果你感兴趣的化,可以尝试玩玩。粗暴的RN调试就先说到这里,后期会聊一些针对ios和安卓的特殊配置。

原文链接:https://mp.weixin.qq.com/s/RfRbmwf3z3U8IT6t0NCwYQ