react-native：解决使用webView后部分场景在安卓10崩溃闪退问题

Posted 2021-10-04 优雅的颓丧

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不在可视区域内进行返回上一页操作时，又出现闪退，然后添加返回监听，延时退出（此时彻底解决问题）（踩坑无数）