解决ReactNative老项目跑不起来的问题

muguo321

已于 2022-06-09 10:09:05 修改

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

文章标签： react native react.js javascript

于 2022-02-07 11:23:24 首次发布

本文链接：https://blog.csdn.net/weixin_41043580/article/details/122806004

在运行一个React Native 0.51.0版本的老项目时遇到红屏和打包错误。通过查看gradlew assembleRelease的报错，发现正则表达式问题，修正了blacklist.js文件中的配置。接着解决了'ProgressComplete'事件处理的错误，通过在android目录下运行带参数的打包命令排除了错误。最终项目成功打包并正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行react-native 以前的项目，发现运行起来但无法正常跑，运行成功，但一直红屏，也不出现nodejs cli黑窗体，我的解决办法是进入项目android目录下，运行打包命令:./gradlew assembleRelease,查看报错信息，我这边报错信息是“Invalid regular expression: /(node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.”，之后就把这个问题解决了一下，找到项目目录下的\node_modules\metro-bundler\src\blacklist.js，将原有的sharedBlacklist替换为

var sharedBlacklist = [

/node_modules[\/\\]react[\/\\]dist[\/\\].*/,

/website\/node_modules\/.*/,

/heapCapture\/bundle\.js/,

/.*\/__tests__\/.*/

];

如果找不到此路径，试试\node_modules\metro-config\src\defaults\blacklist.js。

再次运行打包命令，查看是否还有报错信息，我的是出现报错信息如下“Unable to process incoming event 'ProgressComplete ' (ProgressCompleteEvent)”，解决下此报错信息，解决办法如下，在项目的android目录下，运行./gradlew.bat assembleRelease --console plain

然后再次运行打包命令就没有报错了，可以正常打包，这次在切换回项目目录，运行react-native run-log，即可正常把项目跑起来了。

总结，我的排查办法就是如果运行项目不报错，就输入打包命令，如果打包报错就解决相应报错，解决之后再运行试试是否正常。顺便说一下，我的老项目版本是reactnative：0.51.0，react ：16.0.0。