RN(react-native) 按导航回退闪退，程序崩溃。Native navigation 与 WebView 可视区域外程序崩溃闪退

最新推荐文章于 2024-09-05 10:57:25 发布

龙腾麟

最新推荐文章于 2024-09-05 10:57:25 发布

阅读量1.0k

点赞数

本文链接：https://blog.csdn.net/weixin_42209682/article/details/128189355

版权

React Native 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨了在特定条件下WebView组件导致应用崩溃的现象。当WebView未完全显示在可视区域时，回退操作会导致程序异常终止。文章分析了可能的原因，并提出了两种解决方案：隐藏不可见内容和尝试延迟加载。

摘要由CSDN通过智能技术生成

问题描述：在开发过程中，发现按导航回退时，程序会崩溃。

调查结果：

经调查发现，导致程序崩溃的原因是因为地图功能使用的 WebView 组件导致的问题，大量测试之后，终于再现了这个问题。

如果 WebView 组件，在屏幕上显示过，就可以成功回退到上一页。如果 WebView 组件仅仅只是渲染在了可视化区域外。并没有显示过。导航栏的回退功能就会导致程序崩溃。

原因：调查过程中，实在没有查到什么原因导致的这种现象，我只能初步判断出

WebView 组件与 Native Navigation组件之间可能有冲突
WebView 组件有Bug。
WebView 组件与 Android 环境之间出现了问题。（个人更倾向于这种，因为并非所有智能手机都会出现这个问题）

解决方案：

1. 将可视化区域外的内容隐藏 hidden （个人研究出的方案，应该多数人不适合使用）

2. 延迟加载。

我使用延迟加载失败了，因为组件调用 setInterval 时，报了个undefined。大概是因为调用该方法时 set方法还没有生成吧。思路应该就是，将可视化区域内的内容延迟加载，这样就能先加载webview。暴露在可视化区域，然后渲染其他内容，将webview挤出可视化区域，由于已经在可视化区域中显示过了，这样退出就不会闪退了、

我的 WebView 组件是包裹在了 <ScrollView> 组件之内。所以直接使用属性将可视化区域外的内容hidden就可以了。所以才说不适合所有人。如果想采用该方法，需要用什么组件包裹一下，然后隐藏掉

使用属性 removeClippedSubviews

<ScrollView
  h="90%"
  borderBottomWidth={1}
  borderBottomColor={'#d0d1d3'}
  removeClippedSubviews>
    ......

  <WebView/>

</ScrollView>