ReactNative报错记录以及原因分析+ReactNative报错记录

简介: ReactNative常用命令指定版本安装react-native init demo --verbose --version 0.59.9手机调出调式模式直接在开发环境输入 adb shell input keyevent 82 调出调试菜单命令行查看连接的手机设备adb devic...

ReactNative常用命令

指定版本安装

react-native init demo --verbose --version 0.59.9

手机调出调式模式

直接在开发环境输入 adb shell input keyevent 82 调出调试菜单

命令行查看连接的手机设备

adb devices

blob.jpg

调试模式网络面板查看请求

ReactNative项目运行的两种方式

  • 命令行运行(ReactNative项目根目录下)
react-native run-android
  • android studio中运行

先在命令行启动(ReactNative项目根目录下)
如果在android studio启动的时候发现无法访问加载js脚本文件,注意用命令 adb shell input keyevent 82 调出手机调式菜单,然后设置IP地址和端口号(ip地址=本地电脑的ip地址:8081)。

react-native start

然后就可以在android studio中像启动其它原生app项目一样启动项目了。

运行react-native中的android项目及问题解决

安装第三方组件

npm insatll xxxx --save
react-native link XXXX

注意点:安装第三方组件link的时候,需要格外注意,link操作的时候,默认添加的是项目包名下的 MainApplication和MainActivity。

如果你的原生android项目不是默认的在项目包路径下的根目录,需要手动添加link。

卸载第三方组件

react-native unlink xxxx (如果link了)
npm uninstall xxxx --save

ReactNative运行错误汇总

error: bundling failed: Error: ENOENT: no such file or directory

错误1: error: bundling failed: Error: ENOENT: no such file or directory, open

error: bundling failed: Error: ENOENT: no such file or directory, open 'C:\Users\Arison\AppData\Local\Temp\metro-cache\49\500c58513b375385ec57106b3863f96b40276578a46ddc09a7dc04d623e70940841960'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.writeFileSync (fs.js:1299:33)
    at FileStore.set (C:\Users\Arison\Desktop\developer\reactNativeApp\node_modules\metro-cache\src\stores\FileStore.js:55:10)
    at Cache.set (C:\Users\Arison\Desktop\developer\reactNativeApp\node_modules\metro-cache\src\Cache.js:124:31)
    at C:\Users\Arison\Desktop\developer\reactNativeApp\node_modules\metro\src\DeltaBundler\Transformer.js:223:13
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\Arison\Desktop\developer\reactNativeApp\node_modules\metro\src\DeltaBundler\Transformer.js:46:24)
    at _next (C:\Users\Arison\Desktop\developer\reactNativeApp\node_modules\metro\src\DeltaBundler\Transformer.js:66:9)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

项目中出现过这个错误,当时也没有解决,项目多短时间就突然好了。估计是缓存问题,可以尝试清理react native 编译产生的缓存文件。

of output files for task ':app:processDebugResources' property 'sourceOutputDir

错误2:of output files for task ':app:processDebugResources' property 'sourceOutputDir'

参考:https://stackoverflow.com/questions/53986342/failed-to-capture-snapshot-of-output-files-for-task-appprocessdebugresources

解决方法:
a.清除gradle缓存文件

cd android
./gradlew clean
cd ..
react-native run-android

b.删除android项目中的build文件目录,重新gradle语法编译项目。

bundling failed: Error: Unable to resolve module

**错误3:bundling failed: Error: Unable to resolve module

error: bundling failed: Error: Unable to resolve module 路径: Module XXXXXXXX does not exist in the Haste module map**

解决方案: 就按照提示在命令行输出就行了,每一条都执行一下

npm watchman watch-del-all            
npm rm -rf node_modules && npm install       
npm rm -rf /tmp/metro-bundler-cache-*       
npm start -- --reset-cache                     
npm rm -rf /tmp/haste-map-react-native-packager-*       


参考:https://www.cnblogs.com/da-yao/p/9409368.html

Application has not been registered

**错误4:Application has not been registered

React Native出错:Application XXX has not been registered解决方案**

解决方法:
1.可能先前运行过其他ReactNative项目,此时退出终端程序,重新运行即可。
2.设置项目名称在AppDelegate.m和index.ios.js中不一致,或者在主业务逻辑页面中的名称不一致,如下图所示。找到问题更换即可

  @Override
    protected String getMainComponentName() {
        return "gitHubClient";//
    }


app.json中的名字需要与android原生activity调用的组件名字保持一致。

**问题5:Show network requests such as fetch, WebSocket etc. in chrome dev tools

谷歌浏览上的network面板使用fetche网络请求的时候,无法查看请求信息。**

解决方案:暂时没有好的解决方案,请查阅https://github.com/facebook/react-native/issues/934

Command failed: gradlew.bat installDebug

错误5:Error: Command failed: gradlew.bat installDebug

Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
Downloading https://services.gradle.org/distributions/gradle-4.4-all.zip
..
Exception in thread "main" javax.net.ssl.SSLException: Connection has been shutdown: javax.net.ssl.SSLException: java.net.SocketException: Connection reset
        at sun.security.ssl.SSLSocketImpl.checkEOF(SSLSocketImpl.java:1541)
        at sun.security.ssl.AppInputStream.available(AppInputStream.java:60)
        at java.io.BufferedInputStream.available(BufferedInputStream.java:410)
        at sun.net.www.MeteredStream.available(MeteredStream.java:170)
        at sun.net.www.http.KeepAliveStream.close(KeepAliveStream.java:85)
        at java.io.FilterInputStream.close(FilterInputStream.java:181)
        at sun.net.www.protocol.http.HttpURLConnection$HttpInputStream.close(HttpURLConnection.java:3409)
        at org.gradle.wrapper.Download.downloadInternal(Download.java:91)
        at org.gradle.wrapper.Download.download(Download.java:51)
        at org.gradle.wrapper.Install$1.call(Install.java:62)
        at org.gradle.wrapper.Install$1.call(Install.java:48)
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:69)
        at org.gradle.wrapper.Install.createDist(Install.java:48)
        at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:107)
        at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
Caused by: javax.net.ssl.SSLException: java.net.SocketException: Connection reset
        at sun.security.ssl.Alerts.getSSLException(Alerts.java:208)
        at sun.security.ssl.SSLSocketImpl.fatal(SSLSocketImpl.java:1949)
        at sun.security.ssl.SSLSocketImpl.fatal(SSLSocketImpl.java:1906)
        at sun.security.ssl.SSLSocketImpl.handleException(SSLSocketImpl.java:1870)
        at sun.security.ssl.SSLSocketImpl.handleException(SSLSocketImpl.java:1815)
        at sun.security.ssl.AppInputStream.read(AppInputStream.java:116)
        at java.io.BufferedInputStream.read1(BufferedInputStream.java:284)
        at java.io.BufferedInputStream.read(BufferedInputStream.java:345)
        at sun.net.www.MeteredStream.read(MeteredStream.java:134)
        at java.io.FilterInputStream.read(FilterInputStream.java:133)
        at sun.net.www.protocol.http.HttpURLConnection$HttpInputStream.read(HttpURLConnection.java:3336)
        at sun.net.www.protocol.http.HttpURLConnection$HttpInputStream.read(HttpURLConnection.java:3329)
        at org.gradle.wrapper.Download.downloadInternal(Download.java:72)
        ... 7 more
Caused by: java.net.SocketException: Connection reset
        at java.net.SocketInputStream.read(SocketInputStream.java:209)
        at java.net.SocketInputStream.read(SocketInputStream.java:141)
        at sun.security.ssl.InputRecord.readFully(InputRecord.java:465)
        at sun.security.ssl.InputRecord.readV3Record(InputRecord.java:593)
        at sun.security.ssl.InputRecord.read(InputRecord.java:532)
        at sun.security.ssl.SSLSocketImpl.readRecord(SSLSocketImpl.java:973)
        at sun.security.ssl.SSLSocketImpl.readDataRecord(SSLSocketImpl.java:930)
        at sun.security.ssl.AppInputStream.read(AppInputStream.java:105)
        ... 14 more
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

Command failed: gradlew.bat installDebug

Error: Command failed: gradlew.bat installDebug
    at checkExecSyncError (child_process.js:602:13)
    at Object.execFileSync (child_process.js:622:13)
    at runOnAllDevices (C:\Users\Arison\Desktop\百度云盘\GitHub_Advanced-master\github_advanced\node_modules\react-native\local-cli\runAndroid\runAndroid.js:299:19)
    at buildAndRun (C:\Users\Arison\Desktop\百度云盘\GitHub_Advanced-master\github_advanced\node_modules\react-native\local-cli\runAndroid\runAndroid.js:135:12)
    at isPackagerRunning.then.result (C:\Users\Arison\Desktop\百度云盘\GitHub_Advanced-master\github_advanced\node_modules\react-native\local-cli\runAndroid\runAndroid.js:65:12)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

React Native version mismatch

错误6:React Native version mismatch 错误

https://blog.csdn.net/awy1988/article/details/80336913

Unable to load script from assets 'index.android.bundle'

错误7:Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server. App crash in release build only

搜索关键词:that your bundle index.android.bunde is packaged correctly for release

错误原因:这里报错原因是没有找到index.android.bundle
解决方案:
https://segmentfault.com/a/1190000019529044
https://github.com/facebook/react-native/issues/22076
https://cloud.tencent.com/developer/ask/151569/answer/263098

找到app/build.gradle:

project.ext.react = [
        entryFile: "index.js",
        bundleAssetName: "index.android.bundle",
        bundleInDebug: true,
        bundleInRelease: true
]

Unable to load script.Make sure you're either running a metro server( run 'react-native start' ) or that your bundle 'index.android.bundle' is packaged correctly for release.

报错描述:

在android studio中启动ReactNative项目的时候报错,报错信息如上。通过命令行react-native run-android启动ReactNative项目不会报错。

解决方法:

Failed to resolve: com.facebook.react:react-native+ 版本号为0.20.1问题解决

问题描述:

Android项目和RN混编, 在集成RN过程中,遇到了Failed to resolve: com.facebook.react:react-native+时,RN版本号始终为0.20.1的问题.
事实上, 当前RN库的版本号最新为0.59.5

解决方法:

allprojects {
    repositories {
        maven { url "$rootDir/../node_modules/react-native/android" }
    }
}

这个本地的maven库地址一定要可以找得到, 才能使用com.facebook.react:react-native:+获得最新的rn版本号.

我的项目之所以出问题是因为,项目在集成rn时本地的仓库地址做了更新, 走错了仓库, 所以没有拿到正确的本地maven地址.

关于这个问题,github上有相应的issue.附上地址:
https://github.com/facebook/react-native/issues/12309
大家只要把本地maven库配置好久可以啦!

React Native开发报错Task 'installDebug' not found in project ':app'.的解决办法

问题描述:

解决方法:

参考: React Native开发报错Task 'installDebug' not found in project ':app'.的解决办法

Error: Activity class {xxx/xxx.MainActivity} does not exist.

问题描述:

Android studio中能正常通过“react-native start” 的方式正常启动APP混编项目中RN界面。
但是通过命令行“react-native run-android”的方式启动,就发生了如下的异常!

blob

Starting: Intent { cmp=com.rnapp/.MainActivity }
Error type 3
Error: Activity class {com.rnapp/com.rnapp.MainActivity} does not exist.

问题解决:

原因是:MainActivity类必须要在项目包路径下的根目录。
后期通过react-native run-android的方式启动项目,需要支持自定义APP启动类的路径,而不是默认放在项目的根路径下,并且是MainActivity这个默认类。

RN 集成navigation时Android报错 null is not an object (evaluating '_RNGestureHandlerModule.default.Direction

问题描述:

项目架构搭建的时候集成react-navigation报错。大致分析下原因,应该是link操作失败,需要手动完成link操作。为什么会失败,大致由于link操作的时候,默认的是:包路径根项目下的MainApplication和MainActivity这两个类 但是很多时候,我们的原生项目中的类不在包路径根目录,所以会报link失败,无法找到第三方组件的错误!

问题解决:

手动link相关操作
资料参考:React Navigation的集成及使用

原文地址:http://cloud.yundashi168.com/archives/622 (想要获得持续的资料查询,请关注原文,原文会持续更新哦)

相关文章
|
4月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
370 1
|
5月前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
93 4
|
3月前
|
前端开发 JavaScript Android开发
Flutter 与 React Native - 详细深入对比分析(2024 年)
Flutter和React Native是两大跨平台框架,各有优缺点。Flutter性能优越,UI灵活,使用Dart;React Native生态广泛,适合JavaScript开发。
1031 5
Flutter 与 React Native - 详细深入对比分析(2024 年)
|
3月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
4月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
77 3
|
5月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
112 0
|
5月前
|
开发者 缓存 数据库
【性能奇迹】Wicket应用的极速重生:揭秘那些让开发者心跳加速的调优秘技!
【8月更文挑战第31天】在软件开发中,性能优化是确保应用快速响应和高效运行的关键。本书《性能调优:Apache Wicket应用的速度提升秘籍》详细介绍了如何优化Apache Wicket应用,包括代码优化、资源管理、数据库查询优化、缓存策略及服务器配置等方面。通过减少不必要的组件渲染、优化SQL查询、使用缓存和调整服务器设置等方法,本书帮助开发者显著提升Wicket应用的性能,确保其在高并发和数据密集型场景下的稳定性和响应速度。
52 0
|
5月前
|
开发框架 前端开发 JavaScript
探索现代Web开发中的框架选择:Blazor、Angular和React的全面比较与分析
【8月更文挑战第31天】随着Web开发技术的发展,选择合适的框架对项目成功至关重要。本文对比了三大前端框架:Blazor、Angular和React。Blazor是微软推出的.NET Web客户端开发框架,支持C#编写前端代码;Angular由Google支持,基于TypeScript,适用于大型应用;React是由Facebook维护的高效JavaScript库。
136 0
|
5月前
|
开发框架 Dart 前端开发
移动应用开发中的跨平台策略:React Native与Flutter的比较分析
【8月更文挑战第31天】 在快速变化的移动应用市场,开发者面临着如何在众多平台间高效部署应用的挑战。本文将深入探讨两种主流的跨平台移动应用开发框架——React Native和Flutter,通过对比它们的核心特性、性能表现以及社区生态,为开发者提供选择框架时的参考依据。我们将借助代码示例,展现两者在实际开发中的应用差异,并分析各自的优势和潜在局限,以期帮助开发者根据项目需求做出明智的技术选型。
|
7月前
|
移动开发 Dart 前端开发
深度分析:React Native、Flutter、UniApp、Taro、Vue的差异
深度分析:React Native、Flutter、UniApp、Taro、Vue的差异
520 6