重启React Native老项目的奇幻之旅:填坑实录与解决方案分享

  • 重启React Native老项目的奇幻之旅:填坑实录与解决方案分享已关闭评论
  • 54 次浏览
  • A+
所属分类:Web前端
摘要

这两天为了重启五年前基于 React Native(版本 0.59.9)开发的老项目,经过各种填坑查询等操作,最终把它成功地运行起来了。

这两天为了重启五年前基于 React Native(版本 0.59.9)开发的老项目,经过各种填坑查询等操作,最终把它成功地运行起来了。

在这篇文章中,我将详述那些遭遇的挑战以及对应的解决方案,以期为同样面临此类困境的开发者提供宝贵的经验参考。

这个项目涉及到的环境基本版本信息如下:

react: 16.8.3

react-native: 0.59.9

下载Gradle包

本来想着很简单,因为这个项目在之前是能正常运行的,我的机器环境就没有改变过,代码也没有修改过,所以直接执行如下命令:

react-native run-android 

然而现实却是Gradle包下载缓慢且频繁中断,后来就通过上外网的方式把它解决了。

不过这种上网的方式下载也是挺慢的,想以后如果不是通过其它上网方式该如何解决呢?

这里提供一个链接,估计按照下面的方式应该是能更快地下载Gradle包的。

国内最方便的AndroidStudio Gradle包下载方法

NPM证书过期与镜像源迁移

想着Gradle下载好了,我又没有修改过什么代码,总可以把项目给运行起来了吧。

然而是我小看整个过程中碰到的难题了。

再次运行 react-native run-android 命令,直接报了如下的错误:

[npm] ERR: request to https://registry.npm.taobao.org failed, reason: certificate has expired 

碰到问题就直接在网上搜索相关问题,了解下来应该是 npm.taobao.org 和 registry.npm.taobao.org 域名于 2022 年 05 月 31 日零时起停止服务,而 npm.taobao.org 这个网站的证书也于 2024年01月22日过期了,这也就是为啥会出现request to https://registry.npm.taobao.org failed, reason: certificate has expired错误的原因。

既然知道了原因,那就把镜像源给换掉,新的镜像源要切换成 https://registry.npmmirror.com

网上一搜就知道如何切换了,由于我这边有时用npm有时用yarn,所以就一起把npm和yarn的镜像源都设置掉了。

使用的命令如下:

#设置npm的镜像源 npm config set registry https://registry.npmmirror.com #设置yarn的镜像源 yarn config set registry https://registry.npmmirror.com 

为了查看镜像源是否被设置过来了,就用如下的命令进行验证:

#查看npm当前的镜像源 npm config get registry #查看yarn当前的镜像源 yarn config get registry 

经过验证,当前的镜像源确实被修改成了https://registry.npmmirror.com

想着这下问题总归被解决了吧,继续执行 react-native run-android命令,但出乎我的意料,依然报 request to https://registry.npm.taobao.org failed, reason: certificate has expired 错误,而且看起来镜像源也没有被切换过来。

难道是npm中代理设置的问题?

那就查看一下目前的代理:

#查看代理 npm config list yarn config list 

发现确实设置过代理,那就先把代理给删除掉:

# npm删除代理 npm config delete proxy npm config delete https-proxy  # yarn删除代理 yarn config delete proxy yarn config delete https-proxy 

如果以后还要设置代理的话,就把设置代理的命令记录在这里,免得以后可以用到:

# npm设置代理 npm config set proxy http://127.0.0.1:8080 npm config set https-proxy http://127.0.0.1:8080  # yarn设置代理 yarn config set proxy http://127.0.0.1:8080 yarn config set https-proxy http://127.0.0.1:8080 

删除了代理后,继续执行 react-native run-android命令进行验证,依然报上面的certificate has expired错误。看起来有点到了山群水尽的地步,

最后,索性一不做二不休,直接跳过SSL证书验证,执行下面的命令。

# 跳过npm SSL证书验证 npm set strict-ssl false # 跳过yarn SSL证书验证 yarn config set "strict-ssl" false -g 

再次执行react-native run-android命令,这次certificate has expired错误消失了。

至少把问题往前推进了一步。

不过也别高兴得太早,又碰到了新的问题。且继续看下面的填坑记录。

Invalid regular expression引发的困扰

这次报告的错误消息为:

error Invalid regular expression:  /(.*\__fixtures__\.*|node_modules[\]react[\]dist[\].*|website\node_modules\. *|heapCapture\bundle.js|.*\__tests__\.*)$/:  Unterminated character class. Run CLI with --verbose flag for more details. 

好家伙,直接报告这一堆乱七八糟的错误消息给我,把我给整懵了。

还好遇事不懂网络搜索,最后可以通过下面的方式进行解决:

修改文件node_modulesmetro-configsrcdefaultsblacklist.js,把其中的某段内容替换为:

var sharedBlacklist = [   /node_modules[/\]react[/\]dist[/\].*/,   /website/node_modules/.*/,   /heapCapture/bundle.js/,   /.*/__tests__/.*/ ]; 

根据这个修改的内容推测应该是某个工具对于windows下的打包路径正则表达式没有写好导致的。

再次执行react-native run-android命令,又出现新的幺蛾子了...

程序包com.facebook.react.bridge不存在

这次出现的错误消息为:

> Task :react-native-camera:compileGeneralDebugJavaWithJavac E:projectexphoneexphoneapp2node_modulesreact-native-cameraandroidsrcmainjavacomgoogleandroidcameraviewCamera1.java:31: 错误: 程序包com.facebook.react.bridge不存在 import com.facebook.react.bridge.ReadableMap;                                 ^ E:projectexphoneexphoneapp2node_modulesreact-native-cameraandroidsrcmainjavacomgoogleandroidcameraviewCameraViewImpl.java:23: 错误: 程序包com.facebook.react.bridge不存在 import com.facebook.react.bridge.ReadableMap; 

依然是上网搜索,找到了一个解决方案:

如果react-native版本低于0.63,在 androidbuild.gradle 添加如下内容:

def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())  allprojects {     configurations.all {         resolutionStrategy {             // Remove this override in 0.65+, as a proper fix is included in react-native itself.             force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION         }     } 

我的react-native版本是0.59.9,低于0.63,那就直接用上面的方法。

再次运行react-native run-android进行验证,这次总算打包成功了!!!

不过也不要高兴得太早,预知后事如何,请继续...

DeviceException: No connected devices

执行后出现如下的异常:

PS E:projectexphoneexphoneapp2> react-native run-android (node:18976) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency (Use `node --trace-warnings ...` to show where the warning was created) info Starting JS server... info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)... > Task :app:installDebug FAILED  FAILURE: Build failed with an exception.  * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices!  * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. 

这个异常的核心是com.android.builder.testing.api.DeviceException: No connected devices!

也就是没有连接到模拟器。

我用的模拟器是BlueStacks蓝叠,这个模拟器要比Google的模拟器快。

需要设置的地方是勾选其中允许ADB连接:
重启React Native老项目的奇幻之旅:填坑实录与解决方案分享

明明我的模拟器启动起来了,为何不能连接上呢?

输入命令查看当前模拟器设备:

# adb devices列出模拟器设备 PS E:projectexphoneexphoneapp2> adb devices List of devices attached 

发现确实没有显示出连接上的模拟器。

那我们就手动连接一个:

# 使用adb connect进行连接 PS E:projectexphoneexphoneapp2> adb connect 127.0.0.1:5555 connected to 127.0.0.1:5555 PS E:projectexphoneexphoneapp2> adb devices                List of devices attached 127.0.0.1:5555  device     

连接上android模拟器之后,就继续用react-native run-android命令进行验证。

打包成功,android模拟器也连接上了,不过期望的界面没有呈现,只显示了一个红色的醒目的错误界面。革命尚未成功,同志还需努力... 😭😭😭

运行时TypeError: cb.apply is not a function

在模拟器加载应用后,却不幸收到了类似如下的异常:

/node_modules/npm/node_modules/graceful-fs/polyfills.js:287       if (cb) cb.apply(this, arguments)  TypeError: cb.apply is not a function     at /node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18     at FSReqCallback.oncomplete (node:fs:199:5) 

经过一通网上搜索,找到其中一个相对简单的解决方案,就是在package.json中添加:

  "resolutions": {     "**/graceful-fs": "^4.2.4"   } 

执行react-native run-android终于在模拟器中看到了应用程序成功启动起来的界面:

重启React Native老项目的奇幻之旅:填坑实录与解决方案分享

总结

至此有种经过九九八十一难总算到了西天取到真经的感觉。

为了便于后续查阅与实践,这里整理了一些前面用到的命令,以备后事之需。

镜像源管理

#设置npm的镜像源 npm config set registry https://registry.npmmirror.com #设置yarn的镜像源 yarn config set registry https://registry.npmmirror.com   #查看npm当前的镜像源 npm config get registry #查看yarn当前的镜像源 yarn config get registry 

缓存管理

# 查看已缓存包的列表 yarn cache list  # 查询cache缓存文件目录路径 yarn cache dir  # 清理缓存包 npm cache clean --force yarn cache clean 

代理管理

#查看代理 npm config list yarn config list  # npm删除代理 npm config delete proxy npm config delete https-proxy  # yarn删除代理 yarn config delete proxy yarn config delete https-proxy   # npm设置代理 npm config set proxy http://127.0.0.1:8080 npm config set https-proxy http://127.0.0.1:8080  # yarn设置代理 yarn config set proxy http://127.0.0.1:8080 yarn config set https-proxy http://127.0.0.1:8080 

证书验证

# 跳过npm SSL证书验证 npm set strict-ssl false # 跳过yarn SSL证书验证 yarn config set "strict-ssl" false -g 

模拟器管理

# adb devices列出模拟器设备 adb devices # 使用adb connect进行连接 adb connect 127.0.0.1:5555