react native中ScrollView嵌套WebView导致的闪退（rn版本0.70.0）

已于 2023-02-02 15:03:06 修改
阅读量1.1k 收藏 1
点赞数 2
分类专栏： 前端 文章标签： react native javascript
于 2022-12-23 23:22:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aa494661239/article/details/128425331
版权

react native中ScrollView嵌套WebView导致的闪退（rn版本0.70.0）

网上找了一圈，WebView的问题区也看了一圈，没有可以解决我的闪退的问题，重复进出页面后依然会闪退，最终解决方案
1.在ScrollView中添加overScrollMode=“never”
2.在退出页面时卸载包含WebView的组件，可以用公共变量进行控制，退出时卸载，进入后重新加载
3.在webview中不建议使用透明度0.99这个属性，在我的rn版本中这么使用会有样式问题，请谨慎使用

2023-1-5新增闪退原因：
我使用函数组件的情况下，动态调整webview高度的时候使用了useState，重新渲染组件的时候会闪退，原因也不知道是不是因为二次渲染导致的，最终我将webview组件单独抽出放在一个组件中，为了避免数据被重新加载，我将所有webview用到的数据通过父组件传递给存放webview的组件中，至于动态的高度使用redux的数据，改为调用父组件的方法对redux数据进行修改，不再使用useState进行渲染，这样就解决了闪退问题

2023-2-2新增闪退原因：
问题：在rn进入页面和退出页面的时候会发生闪退
解决方法：进入页面时延时对webView进行渲染（延时100-500毫秒即可）；退出页面时控制延时退出，先卸载webView后退出页面
说明：这个解决方式也是在网上找到的，链接目前找不到了，闪退的原因是因为webView渲染和卸载的时候不在屏幕范围内，就会造成闪退，因为我使用的webView只是用于页面的一小部分，刚进入的时候webView不在我的屏幕内，就会造成这个问题
下面是我的参考链接：
参考链接

诚实可靠王大锤
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react native 关于ScrollView嵌套WebView的交互问题
移动开发技术分享
12-06 3680
react native 关于ScrollView嵌套WebView的交互问题，这个问题很早前就解决过了，但是发现好多人有这方面问题，之前是因为写资讯的需求在网页下面还得显示评论等内容所以发现的这个问题，写个我的解决方案吧！ 首先常规下，WebView正常的展示网页： <SafeAreaView style={styles.safeAreaView}> <WebVi...
RN(react-native) 按导航回退闪退，程序崩溃。Native navigation 与 WebView 可视区域外程序崩溃闪退
龙腾麟的博客
12-05 1004
RN(react-native) 按导航回退闪退，程序崩溃。Native navigation 与 WebView 可视区域外程序崩溃。经调查发现，导致程序崩溃的原因是因为地图功能使用的 WebView 组件导致的问题，大量测试之后，终于再现了这个问题。 如果 WebView 组件，在屏幕上显示过，就可以成功回退到上一页。如果 WebView 组件仅仅只是渲染在了 可视化区域外。并没有显示过。导航栏的回退功能就会导致程序崩溃。
解决 Android WebView 多进程导致App崩溃
Lighthouse
11-29 6331
Android WebView MultiProcess导致App崩溃。
启动react-native项目时 node窗口闪退
最新发布
weixin_40466351的博客
06-03 115
进入：node_modules\metro-config\src\defaults\blacklist.js。
react-native：解决使用webView后部分场景在安卓10崩溃闪退问题
weixin_43413824的博客
09-15 3777
app闪退问题原因： 安卓7以上版本（7和7以下版本不会出现闪退）：在屏幕不可视区域加载webView或者webView不在可视区域内切换页面时app崩溃闪退（在屏幕可视区域加载webView或者webView在可视区域内切换页面不会闪退） 解决办法 进入页面时 给wevView设置状态为false并且延时加载，设置lodding，等其他视图渲染完毕后wevView状态设置为true，然后加载webView。 import {useNavigation} from '@react-navigatio
WebView is not allowed in privileged processes解决方案
lujianfeiccie2009的专栏
11-12 955
如题，如何应对以上问题，解决方案如下： 在 MainActivity 中的 onCreate 调用以下方法即可 import android.os.Build /** *@date 创建时间:2020/5/27 *@name 作者:陆键霏 *@describe 描述: */ object WebViewHelper { const val TAG = "WebViewHelper" fun hookWebView() { val
react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web', ... 'react-native-...
启动react-native项目时 node窗口闪退.docx
06-16
启动react-native项目时 node窗口闪退，问题直接，效果显著，欢迎下载。信誉第一，值得信赖
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
10-15
在React Native中，ScrollView组件是用于创建可滚动内容的视图容器，它可以包含多个子视图，用户可以通过滑动来查看超出视口的内容。ScrollView具备多种属性，可以根据开发者的需求进行定制，例如： 1. `...
react-native-autoheight-webview：React Native的自动高度Webview
02-05
react-native-autoheight-webview React Native的自动高度webview，甚至内联html的自动宽度。 版本控制 npm install react-native-autoheight-webview --save （rn> = 0.60，rnw> = 10.9.0） npm install react-...
react-native-webview.zip
08-06
1. **版本兼容性**：确保React Native WebView库的版本与React Native框架版本兼容，避免出现兼容性问题。 2. **性能优化**：合理使用`shouldOverrideUrlLoading`方法，避免不必要的页面重载。另外，可以考虑使用`...
Android ScrollView嵌套Webview(实际使用CoordinatorLayout嵌套Webview实现需求，效果都差不多)
潇潇
12-25 4260
2019-5-15补充说明： 1.在build.gradle加入 implementation 'com.android.support:appcompat-v7:27+' implementation 'com.android.support:support-v4:27+' implementation 'com.android.support:design:27+' ...
行业资讯 | Android WebView 致安卓应用闪退，mPaaS 助你规避这波 Bug
移动开发平台 mPaaS 的博客
03-25 483
近日，大量安卓用户因 WebView 发生故障而出现应用闪退，而通过使用 mPaaS 集成独立的 UC 浏览器内核以及容器与离线包技术，即可规避这类长期令众多安卓开发同学头疼不已兼容性问题
Android WebView 加载闪退问题处理（Error inflating class android.webkit.WebView）
一个IT人的技术成长历程。创造未来的行为就发生在今天，没有明天的目标，今天的行动就是重复昨天的事情。
02-11 5696
前言 在布局文件中直接使用 WebView ，Activity 运行时，APP崩溃 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_paren...
React-Native 程序出现闪退原因之一
热门推荐
sinat_34194127的博客
10-27 1万+
React-Native 程序出现闪退原因之一1、RN的iOS端release版本和staging版本出现闪退原因：使用了Number.isInteger(), 该方法在iOS端debug模式下运行不会出现异常，一旦生成release版本或staging版本导致程序异常退出，犹豫日志捕捉麻烦，属于一个潜在的小地雷。
React Native app闪退 显示 “很抱歉， ‘xxx’ 无法运行”的解决方法
Aichiwawacai的博客
12-28 1547
React Native app闪退 显示 “很抱歉， ‘xxx’ 无法运行” 这种情况一般是因为第三方库的配置有问题或者js 代码写的有问题 首先看看js代码是否有问题 去官方下载正确的代码 import React from 'react'; import { View, Text } from 'react-native'; import { createAppContainer } f...
android内嵌入webview导致闪退
09-03 1545
这里碰到的是各种闪退情况之一，webview退出后，程序里立马需要申请内存空间做别的事情，这时内存不够就会闪退，做法就是延时个几百毫秒，在这段时间内让java把该回收的内存都回收，然后延时到了再做接下来的事情。 转载于:https://www.cnblogs.com/JD85/p/3299196.html...
native固定吸顶 react_ReactNative用ScrollView简单实现吸顶隐藏导航栏
weixin_32226023的博客
01-14 872
效果如下效果.gif参考ScrollView代码如下在ScrollView顶部嵌套一个Nav导航栏和一个搜索框，stickyHeaderIndices={[1]}让搜索框吸顶固定。此时已经可以实现吸顶，但还可处理一下，滑动一半便停下的情况。先给ref方便调用它的方法。onScroll={this.onScroll}stickyHeaderIndices={[1]}showsVerticalScro...
React native闪退问题
wyw223的博客
11-20 4985
react native 版本0.57.4 最近在用react native打包成apk，打开打包后的apk，发现闪退， 经过排查是因为最近用的 第三方库 react native mapbox gl 的配置不对， 还有js代码写的有问题 所以闪退一般是因为第三方库的配置有问题或者js 代码写的有问题 ...
reactnative中安卓如何实现scrollview嵌套scrollview时，子scrollview可以滑动？
06-02
在React Native中，当一个ScrollView嵌套在另一个ScrollView中时，子ScrollView默认是不可以滑动的。为了让子ScrollView可以滑动，需要在父ScrollView的onTouchStart、onTouchMove和onTouchEnd事件中对事件进行处理。 具体来说，可以在父ScrollView的onTouchStart事件中记录下当前手指的位置，然后在onTouchMove事件中判断当前手指的位置是否在子ScrollView的范围内，如果是，则将事件交给子ScrollView处理；如果不是，则将事件交给父ScrollView处理。在onTouchEnd事件中，可以清除掉已经记录的手指位置信息。 以下是一个示例代码： ``` import React, { Component } from 'react'; import { ScrollView, View } from 'react-native'; class ParentScrollView extends Component { constructor(props) { super(props); this.state = { isChildScrolling: false, childScrollTop: 0, }; } handleChildScroll = (event) => { const { contentOffset } = event.nativeEvent; this.setState({ childScrollTop: contentOffset.y, }); } handleTouchStart = (event) => { const { locationY } = event.nativeEvent; if (locationY > this.state.childScrollTop) { this.setState({ isChildScrolling: true, }); } } handleTouchMove = (event) => { const { locationY } = event.nativeEvent; if (this.state.isChildScrolling) { this.childScrollView.scrollTo({ y: locationY - this.state.childScrollTop }); } } handleTouchEnd = () => { this.setState({ isChildScrolling: false, childScrollTop: 0, }); } render() { return ( <ScrollView onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd} > <View style={{ height: 200 }}> <ScrollView ref={(ref) => { this.childScrollView = ref; }} onScroll={this.handleChildScroll} > {/* 子ScrollView的内容 */} </ScrollView> </View> {/* 父ScrollView的其他内容 */} </ScrollView> ); } } export default ParentScrollView; ``` 在上面的代码中，首先在父ScrollView的state中记录了一个isChildScrolling和childScrollTop变量，分别表示子ScrollView是否正在滑动，以及子ScrollView的当前scrollTop值。然后在父ScrollView的onTouchStart事件中，根据手指位置是否在子ScrollView的范围内，来判断是否将事件交给子ScrollView处理。在onTouchMove事件中，如果子ScrollView正在滑动，则通过scrollTo方法来滑动子ScrollView。在onTouchEnd事件中，清除掉记录的变量信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值