React Native 在华为手机上的几个诡异bug处理

bug1：页面上的某模块闪烁，或者部分区域白屏（其他区域良好），手按一下或点击下，又会展示出来。

原因：该模块区域，比如整个是一个View组件包着的内容，是 overflow:'hidden' 和 borderRadius 两个属性冲突导致，当需要圆角视图而内容区域又确实超出了内容，所以一定是需要溢出隐藏 overflow:'hidden' 这个属性的。

解决方法： 用图片来代替圆角效果，麻烦ued同学切两个圆角图片，布局上用定位盖上去。

 

解决方法2: 页面跳走的时候把圆角去掉， 页面显示的时候重新处理圆角属性。这种相对来说是最快捷的

 

bug2: 大致表现还是如上面现象，但当前页面并没有用到 overflow:'hidden' 和 borderRadius 任何一个属性。滚动内容，内容经过容易某一块区域就会白屏或者闪烁。

原因：上个页面有用这2个属性，overflow:'hidden' 和 borderRadius,上个页面堆叠在当前页面的下方，也会影响当前页面的同等位置上模块的展示。

论证：直接通过url跳到该页面，则一切正常，若经过上页面再到当前页面就会出现此现象。

解决方法： 如上 bug1

 

bug3: view标签，设置了圆角，在华为手机上偶现（特别是内容重新render后），会导致圆角不生效。

原因： 只能称之为猜测原因，从RN层或者react角度无法解释。安卓的渲染机制是把圆角属性滞后处理，可能缓存当中存的是圆角属性生效之前的该控件状态，所以render之后取缓存来渲染，导致圆角失效。

解决方法：加个key值，比如 <View style={styles.wrap} key={'radius'}></VIew>  就是如此神奇。

 

总结：RN在安卓机型上的确是诡异的bug很多，特别是华为和oppo,一加等机型上。由于各厂商都是基于开源安卓系统之上自己会去做一些个性化定制化的改动处理，导致出现的各种差异就很诡异。以上几个bug虽说是短短几句话，但找原因可是找了好几天，google也没能找到啥答案，如果对您有帮助，欢迎留言点赞呀！