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

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

调查结果:

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

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

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

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

解决方案:

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

        2. 延迟加载。

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

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

使用属性 removeClippedSubviews

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

  <WebView/>

</ScrollView>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值