React Native flex 布局缝隙问题

问题描述:

父元素flexDirection:row,子元素flex:1,子元素间有时会存在缝隙,而漏出背景色。如图:


React Native flex 布局缝隙问题_第1张图片
红色缝隙为漏出的背景层

缝隙个数随宽度变化不定。

造成缝隙的原因为:父元素/子元素个数不为整数,导致像素不能平均分配,如图中为子元素个数为7,父元素宽度为404,余数为5,故产生缝隙。

经进一步测试,当余数为偶数时,不会产生缝隙。

解决方案:

在container组件上onLayout中监听width变化,当((width%7)%2)不为0时,动态更改container的width+1。

你可能感兴趣的:(React Native flex 布局缝隙问题)