从零接手一个RN项目如何开发与调试

·  阅读 806

最近接手了一个react-native的项目,因为从来没接触过,前人留下的文档也没什么这方面的内容,再加上windows系统什么奇葩问题都有,在踩坑的路上披荆斩棘,可算是成功配好环境并调试。 这里记录一下这个过程中遇到的问题和解决方案。

注:本次记录的对象是我接手的项目,版本是0.57,并非最新版本,且我对于RN并不熟悉,不保证这里的解决方案对其他RN项目有作用。如果你手上有mac,那恭喜你,你可以不用阅读本文。 mac的环境搭建可参考这里

1、react-native中文官网

2、官方文档----搭建环境

3、官方文档----调试

一、开发准备

1、一个可运行的RN项目(我是接手的项目,这里不讨论从0到1)

2、一台可用作开发的windows电脑

3、一台安卓手机、一条支持USB调试的数据线(可以用模拟器,但是我没试过

二、搭建环境

环境的搭建可直接参考官网。这里简单说一下需要注意的点: 1、安装JDK,官网的下载若是很慢,可以试下网盘下载,提取码:jdk0

2、安装SDK。网上有很多安装SDK的工具,这里建议使用Android Studio。下载Android Studio后,利用Android Studio来下载SDK,严格按照中文官网的要求下载对应的SDK。

3、按照中文官网配置JDK和SDK的环境变量。

4、按照官网创建一个新项目,并顺利运行,调试。如果你之前的环境配置都没问题,应该能在你的安卓手机或者模拟器上看到下图,试着改一下app.js里的代码,你的修改会响应到这个页面上。如果没有,你可能需要reload一下,具体操作看官网。到这一步,你的环境就算是配好了。 在这里插入图片描述

三、构建项目,连接真机

模拟器自行百度,这里只有安卓真机

1、打开你的安卓手机,打开设置,找到开发者选项(找不到百度,不同机型需要的操作不一样),把USB调试打开。

在这里插入图片描述

2、USB连接你的windows和你的安卓手机,模拟器自行百度。连接之后,如果你的数据线和USB接口没有问题,你的电脑和你的手机应该都会有弹窗提示。然后随便打开一个终端,运行如下代码:

adb devices
复制代码

如果你看到这样的,就说明你连接成功。由于我已经换了mac设备,所以下面的图是网上找的,不同电脑可能不一样。

在这里插入图片描述

如果你看到这样的,list下面没有连接的列表,说明你的连接失败了。原因可能是你的数据线有问题(我之前的数据线就是只能充电,后面换了一根就可以了),也可能是你没有正确打开手机的USB调试,具体操作自行百度。

在这里插入图片描述

3、保持手机和电脑的连接,关掉你之前按照官网创建的新项目,抛弃丑不拉几的Android Studio,使用美丽的VScode(当然用你自己的编辑器也可以的啦)打开你自己的RN项目,在根目录运行如下代码启动项目

npm install  // 这一步你可能会遇到很多问题,可以看下文,说不定就有你需要的
npx react-native run-android
复制代码

需要注意的点:

安装依赖时,请检查node的版本,不能过低,react-native的版本和node的版本并不全部兼容。node下载

4、假设你上面的步骤都成功了,你应该会看到你的任务栏打开了一个node的窗口。

在这里插入图片描述

你的VS code终端还会有这样的任务

在这里插入图片描述

上面是进行到99%的时候,这时候说明准备在你的手机安装应用了。你会在你的手机上看到安装的弹窗,允许就完事了。

5、安装完成后应该会自动打开这个应用,如果你看到了白屏会没反应,别急,看下你任务栏的node窗口,这时候可能还在编译,等到全部完成就可以。

6、你还可能会看到下图,淡定,这是因为你的手机还没有连上你电脑的本地服务

在这里插入图片描述

解决方法:

1、在终端执行adb reverse tcp:8081 tcp:8081

2、摇一摇手机,或者执行adb shell input keyevent 82 打开调试窗口,点击Dev Settings,然后点击Debug server host for device,输入你的电脑的IP地址+端口号。IP地址可以在终端输入ipconfig获得,比如你的IP地址是192.168.1.110,那你就应该输入192.168.1.110:8081,注意符号的中英文。输入之后,重新摇一摇手机,重新点击reload。

3、详细操作可查看官网

四、开始调试

准备工作:安装调试工具react-native-debugger,打开链接,点击release查看以往版本。

在这里插入图片描述

注意按照文档的指引安装对应版本

在这里插入图片描述

1、拉起真机的调试窗口,在终端允许如下代码。开发过程中这个操作会比较频繁,建议使用快捷键,具体自行查看官网。

adb shell input keyevent 82
复制代码

2、启动热更新。热更新默认是不启动的,你修改的代码需要reload才能更新,如果你想要热更新,点击下图,变成disable hot reloading就是启动成功。

注: 如果启动热更新后,你修改代码频繁报错(手机上红屏),可能是你的修改跟热更新 不相性不好,原因,哈哈,咱也不知道啊。关掉热更新慢慢reload吧。

在这里插入图片描述

3、查看你的打印信息。这里提供两种方式,更多方式请查看官网。

谷歌浏览器调试 调试窗口点击remote js debug,成功的话会在谷歌浏览器打开一个窗口,如果是IP地址的需要改成localhost,否则会跨域,在谷歌上调试只能看到console,不能查看网络请求。

在这里插入图片描述

react-native-debugger调试

这个东西就是上面准备工作下载的东东,这个可查看网络请求、打印、节点构成,nice。

1、打开你下载好的debugger,然后再真机调试窗口点击remote js debug,同上。 如果你之前没安装过,你点击remote js debug应该还是会打开谷歌浏览器,这时候需要你关闭谷歌,然后stop remote js debug,打开react-native-debugger之后,再点击remote js debug。

2、查看网络请求:再debugger的空白处右键点击【enable network incept】,reload一下,你就可以再network栏看到请求了。

在这里插入图片描述

3、windows启用这个工具会使项目变得很卡,热更新会很慢,可以的话强烈建议更换mac。

4、开启节点选择,就相当于谷歌浏览器控制台的选择dom,查看dom的功能。这个功能有局限性,而且不好用。还是调试窗口点击下图位置。

注:同时开启热更新和节点选择,还要使用debugger,会很卡

在这里插入图片描述

点击之后会重新reload,然后你就可以看到下面这个东东。点击inspect,就是开启/关闭节点选择,开启之后,直接点击页面,就会在debugger上看到你选择的节点信息。我用起来感觉比较难用,RN包了很多层自带的节点,选择的节点可能是RN自己的节点,而不是你代码上写的节点,目前没有找到好的办法

在这里插入图片描述

在这里插入图片描述

五、伤寒杂病论

这里记录了我遇到的一些问题和我的解决方案,可能会帮到你

1、Barcode.js文件报undefined is not an object(evaluating'_react.PropTypes.func')

在这里插入图片描述

解决方案: 找到这个文件,找到下面的代码

import React, {
    PropTypes,
    Component,
} from 'react'
复制代码

改成这样子:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
复制代码

2、RCTCapturepackage.java文件报错,方法不会覆盖或实现超类型的方法@override在这里插入图片描述 解决方案: ctrl+左键打开这个文件,找到@override,注释掉

在这里插入图片描述

3、正则报错

return new RegExp( ^ SyntaxError: Invalid regular expression: /(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/: Unterminated character class at new RegExp () at blacklist (D:node_modules\metro-config\src\defaults\blacklist.js:38:10)

在这里插入图片描述

解决方案:

找到这个blacklist.js文件,把里面的正则的 / 前面加上转义字符 \

在这里插入图片描述

4、SceneComponent文件报错,XXXXmust be the last element

解决方案: 找到文件,把逗号去掉

在这里插入图片描述

5、Module HMRClient is not a registerd callable module

解决方案: 执行以下命令,注意这是在andriod这个文件夹目录执行的,自行调整

cd android
./gradlew clean
复制代码

6、> local.properties (系统找不到指定的文件。)

解决方案: 这个文件一般是运行项目编译的时候就生成的,是个记录你sdk目录的文件,如果你运行项目发现这个报错,可以多试几次启动,不行可以试下下面的方法。

项目根目录有个android文件夹(一般跟node_modules同级),加上这个文件local.properties,文件里写上sdk的路径sdk.dir=C:\xxxxx\AppData\Local\Android\Sdk,路径一般是用户的AppData中。

在这里插入图片描述

7、编辑报错

在这里插入图片描述 解决方案: 像这种带有build的,不妨直接找到build文件夹整个删掉,然后就重新运行

8、java.lang.RuntimeException: java.util.zip.ZipException: duplicate entry: com/reactnativecommunity/webview/events/TopLoadingErrorEvent.class

解决方案: 在andriod目录下运行./gradlew clean

六、总结

这些都是我开发过程中一点点摸索、查资料得出来的,这些坑大部分都是环境配置和依赖相关的,RN的版本和npm依赖包不太友好,随随便便就能出现个坑,总之充分感受到了react-native对windows开发的恶意,如果可以,换mac吧,一个Xcode解决一切,折腾什么啊真的是。另外,文中有错误的地方,欢迎指正、交流!

分类:
前端