react-native 中的元素(zIndex,elevation)層級關係

1、zIndex是rn在0.30開始支持的屬性,是可以生效的;

2、shadow和elevation

  • shadow(陰影)開頭的樣式現在可以在iOS上應用,但在安卓中是不生效的.
  • 而Android上對應的屬性是elevationelevation
    設置elevation屬性就等價於使用原生的elevation API,因而也有同樣的限制(比如最明顯的就是需要Android 5.0以上版本)。此外還會影響到層疊視圖在空間z軸上的順序

結論

對於Android,兩個同一層級的定位組件(position:“absolute”)

情況 在z軸的層疊關係
既沒有ZIndex屬性,又沒有elevation 屬性 由其擺放位置決定的,放在下面的組件會在上層
兩個組件只有zIndex沒有elevation屬性時 zIndex大的在上層
兩個組件有elevation屬性 elevation大的在上層
兩個組件既有zIndex屬性elevation屬性 以elevation爲準

注:對於IOS,同層級的組件,z軸的層疊關係只與擺放順序與zIndex有關,與elevation無關

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章