React Native flex 布局缝隙问题

问题描述:

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


红色缝隙为漏出的背景层

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

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

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

解决方案:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人...
    珍此良辰阅读 9,979评论 2 19
  • 在React-Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上...
    Coder_Answer阅读 5,404评论 1 2
  • 本文只是简单地介绍下在React-Native中,使用CSS的Flex布局方式,完成RN中的控件布局,掌握这个布局...
    刘是丑阅读 4,791评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 本文主要讲解与flex布局相关的属性,包括flex,flexDirection,alignItems,justif...
    Gooooood阅读 13,242评论 0 10