React Native flex 布局縫隙問題

問題描述:

父元素flexDirection:row,子元素flex:1,子元素間有時會存在縫隙,而漏出背景色。如圖:


紅色縫隙為漏出的背景層

縫隙個數(shù)隨寬度變化不定。

造成縫隙的原因為:父元素/子元素個數(shù)不為整數(shù),導(dǎo)致像素不能平均分配,如圖中為子元素個數(shù)為7,父元素寬度為404,余數(shù)為5,故產(chǎn)生縫隙。

經(jīng)進(jìn)一步測試,當(dāng)余數(shù)為偶數(shù)時,不會產(chǎn)生縫隙。

解決方案:

在container組件上onLayout中監(jiān)聽width變化,當(dāng)((width%7)%2)不為0時,動態(tài)更改container的width+1。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ),沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 4,662評論 2 19
  • 在React-Native中使用flexbox規(guī)則來指定某個組件的子元素的布局。Flexbox可以在不同屏幕尺寸上...
    Coder_Answer閱讀 1,636評論 1 2
  • 本文只是簡單地介紹下在React-Native中,使用CSS的Flex布局方式,完成RN中的控件布局,掌握這個布局...
    劉是丑閱讀 1,196評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,155評論 1 92
  • 本文主要講解與flex布局相關(guān)的屬性,包括flex,flexDirection,alignItems,justif...
    Gooooood閱讀 9,849評論 0 10

友情鏈接更多精彩內(nèi)容