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

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

19 人参与  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