当前位置:首页 » 《随便一记》 » 正文

react-native:解决使用webView后部分场景在安卓10崩溃闪退问题_优雅的颓丧的博客

4 人参与  2021年11月08日 13:43  分类 : 《随便一记》  评论

点击全文阅读


app闪退问题原因:

安卓7以上版本(7和7以下版本不会出现闪退):在屏幕不可视区域加载webView或者webView不在可视区域内切换页面时app崩溃闪退(在屏幕可视区域加载webView或者webView在可视区域内切换页面不会闪退)

解决办法

  • 进入页面时
    给wevView设置状态为false并且延时加载,设置lodding,等其他视图渲染完毕后wevView状态设置为true,然后加载webView。
import {useNavigation} from '@react-navigation/native';

const navigation = useNavigation();
const [showChart, setShowChart] = useState(false)
useEffect(() => {
	dispatch(changeLoading({isShow: true, message: "加载中"}))
	setTimeout(() => {
		setShowChart(true);
		dispatch(changeLoading({isShow:false,message:"加载中"}));
	}, 1000);
},[])

<View>
	{showChart?<wevView
	    h5height={scale(150)}
	    h5width={scale(300)}
	    cannotTouch={true}
   	/>:null}
</View>
  • 切换页面时
    设置自定义返回事件,同样延时切换页面,在切换时先销毁webView然后在进行页面切换(这里举例返回上一页)
// BackHandler API 用于监听设备上的后退按钮事件,可以调用你自己的函数来处理后退行为。此 API 仅能在 Android 上使用。
// 官网地址:https://reactnative.cn/docs/backhandler
import { TouchableOpacity,BackHandler } from 'react-native'
import {useNavigation} from '@react-navigation/native';

const navigation = useNavigation();

// 自定义返回按钮
navigation.setOptions({
	headerBackImage: () => (
	    <TouchableOpacity
    		// pop返回时执行操作
	        onPress={pop}
	        style={{
	            height: scale(34),
	            width: scale(80),
	            paddingLeft: scale(12),
	            justifyContent: 'center',
	            // backgroundColor:'red',
	        }}>
	        <Image
	  			// 可点击区域设置大一点
	            style={{width: scale(12), height: scale(20)}}
	            source={require('../image/back.png')}
	        />
	    </TouchableOpacity>
	),
});

const pop = () => {
	// 设置webView状态为false,延时退出
	setShowChart(false);
	setTimeout(() => {
	    navigation.pop();
	}, 200);
	return true;
}

useEffect(() => {
	if (Platform.OS == 'android') {
		//添加返回监听事件
		BackHandler.addEventListener('hardwareBackPress', pop);
	}
	return () => {
		if (Platform.OS == 'android') {
			// 删除监听事件
			BackHandler.removeEventListener('hardwareBackPress', pop);
		}
	};
},[])

分割线————————————————————————————

定位问题与解决问题的过程

定位问题的过程比较痛苦
开发使用安卓版本:android10
因为项目中已经有很多功能使用webView并没有什么问题,所以当出现闪退的时候并没有第一时间考虑到时webView的问题(踩坑无数)

解决问题的过程更加痛苦
第一次怀疑是webView的问题的时候是测试在使用android7的模拟器并不会出现闪退现象(初步怀疑可能与安卓10的垃圾回收有关,并没有仔细排查)
后来发现其他功能用到的webView都是在页面可视区域加载且页面不可滑动,后来把闪退页面的webView放到屏幕可视区域并延时渲染在进入页面时不会出现闪退问题(以为解决了)
再后来发现在页面滑动后,webView不在可视区域内进行返回上一页操作时,又出现闪退,然后添加返回监听,延时退出(此时彻底解决问题)(踩坑无数)


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/30647.html

页面  可视  延时  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 此去经年人未还,沈青禾霍沉洲_此去经年人未还,沈青禾霍沉洲
  • 我爸娶了九十九个媳妇都死了,这次准备娶我的女同学小说精彩章节免费试读_[小梅娶媳妇孤儿]全文免费在线阅读
  • 此去经年人未还结局+番外文章简述(沈青禾霍沉洲)列表_此去经年人未还结局+番外文章简述
  • 完结文寻你寻不到归期结局+完结列表_完结文寻你寻不到归期结局+完结(姜昭意盛西)
  • 江以蓁的潮起时问归期高分佳作江以蓁秦司礼全书在线
  • 「亲手逼死儿子后,男人悔不当初」后续全文免费阅读_[傅司衍轩轩佳佳]最新章节免费阅读
  • (番外)+(全书)寻你寻不到归期+后续+结局(姜昭意盛西辞)全书在线_寻你寻不到归期+后续+结局免费列表_笔趣阁(姜昭意盛西辞)
  • 全文他亲手埋葬的爱结局+番外(谢怀商温南枝)列表_全文他亲手埋葬的爱结局+番外宝藏文(谢怀商温南枝)全文他亲手埋葬的爱结局+番外在线
  • 孟棠音的愿将过往秋收冬藏爽文孟棠音季怀瑾全书在线
  • 「逃婚后,女知青逼我破镜重圆」精彩节选推荐_「雪怡李添智林婷」小说***章节抢先看
  • 且放烟霞云天间+番外+结局全书洛千姮青夜在线
  • 江以蓁秦司礼(潮起时问归期全书+后续+结局)全江以蓁秦司礼文读结局_(江以蓁秦司礼潮起时问归期全书+后续+结局读全书结局)结局列表_笔趣阁(江以蓁秦司礼)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1