React Native android 8以上版本闪退踩坑笔记

背景

我的android的测试机版本是android 8，我使用React Native开发的应用，自己测试是正常的。iOS上也是正常的。但是一放到android8以上的版本本就出现了闪退的现象，让我非常的苦恼。

本文就简单的总结一下，给遇到相同情况的朋友避坑。

探索过程

探索过程是及其痛苦，代码一点点注释。最终找到了两种可以导致Android 8以上版本闪退的情况。

1. WebView隐藏导致闪退
2. React Navigation 嵌套过多，从子叶跳转祖叶会导致闪退。

而且这两种基本是在Android8 以上版本中安卓中出现，在iOS上也不会出现闪退。

解决过程

WebView隐藏导致的闪退

解决办法有两种：

1. 不要隐藏WebView，比如：设置成flex:0 只要WebView不显示在界面中就会导致闪退。
   我把WebView的宽高设置成很小的数值，比如：2 界面上只能看到一个小点，但是不会闪退了。
2. 延时加载WebView。其他组件先渲染，WebView组件延时渲染，也可以避免闪退。

代码示例如下：

	const [showChart, setShowChart] = React.useState(false)

	React.useEffect(() => {
		setTimeout(() => {
			setShowChart(true);
		}, 100);
	}, []);

<View style={{flex: 0}}>
				{showChart?<LoginWebView
					url={url}
					height={20}
					loginScript={loginScript}
					onLoginSuccess={handleLoginSuccess}
					onLayerMsg={handleLayerMsg}
				/>:null}
</View>

React Navigation 嵌套过多，从子叶跳转祖叶会导致闪退。

解决办法：
尽量减少嵌套，子叶跳转祖页有问题，那就尽量避免这种情况发现。

• 页面1
  • 页面11
    • 页面111
    • 页面112
• 页面2
  • 页面21
    • 页面211
    • 页面212

比如：子叶跳转祖叶会导致闪退

页面212 navigation.navigate(’页面11’)
会出现闪退。

解决办法就是尽量避免越级的调用，实在遇到调用，就在同级创建相同的页面，这样虽然麻烦，至少解决了闪退的问题。

比如：
页面212 navigation.navigate(’页面211’) 这样同级调用就不会闪退。

我感觉这可能是某种BUG导致的，很难受啊。