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

app闪退问题原因：

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

解决办法 

• 进入页面时
  给webView设置状态为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?<wevViewh5height={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不在可视区域内进行返回上一页操作时，又出现闪退，然后添加返回监听，延时退出（此时彻底解决问题）（踩坑无数）
                        
原文链接：https://blog.csdn.net/weixin_43413824/article/details/120301018