2020-08-28 react native安卓全面屏手势，无虚拟按键，滚动上拉图片闪烁白屏

项目场景：

一个商城app的商品详情页，顶部状态栏侵染，顶部图片幻灯片和中间图片大量宽度为屏幕宽度的图片竖向堆叠，FlatList包裹

---

问题描述：

在滚动上拉范围到高度超过手机屏幕高度时，显示的大图片闪烁变成白色方块，下拉又显示正常。目前尝试机型有小米大部分支持全面屏手势的机型，OPPO部分机型，锤子手机以及一加10P，前两者表现非常明显，锤子和一加10P没有触发该问题。在切换回非全面屏，存在虚拟按键时所有机型表现正常。

---

原因分析：

具体原因目前仍不能确定，有多种情况会导致出现该问题。

1.由于图片数据异步后端获取，适应屏幕的图片宽高需要计算，react-native-fastImage组件在页面初始加载的时候如果未给与图片高度，高度为空，后续setState赋予高度会触发该问题。

2.图片分辨率超过750 * 2500，FastImage对于大图的支持不是很友好，分辨率过大会直接加载失败显示为白图，换用Image表现正常并且能支持大分辨率图片，但是Image对于图片的清晰度支持会很差，必须调高原图分辨率。

3.状态栏侵染，导致第二页的内容触碰到状态栏位置时，触发了某种bug，图片被白色块遮盖闪烁无法显示。

---

解决方案：

目前解决方式有点玄乎，个人也无法给出具体的理论分析，希望后续有大佬补充原因。这个问题卡了自己两天时间，在github翻了很久的issues，也没找到具体的解决方案。最终自己的解决方法是：

1.安卓环境下，分辨率过大的图片从FastImage改为Image组件。

2.FastImage组件在图片高度未确定时，先不加载渲染，判定宽高数据都存在的条件下再加载渲染

3. 图片的宽度不能等于手机屏幕的宽度，普通宽度=屏幕宽度-2，然后外层设置居中，加背景色并且该背景色不能与状态栏的颜色一样，建议黑色或者灰色，黑色会因为手机的屏幕边缘变得不显眼。