接手一个react-native项目

最近接手了一个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

需要注意的点：
1、安装依赖时，请检查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解决一切，折腾什么啊真的是。另外，文中有错误的地方，欢迎指正、交流！