display:'none'|‘flex’做隐藏显示效果在ios低版本里面无效。

1,062 阅读1分钟
    场景:有时候我们希望将某些元素提前渲染出来,但是又不想过早的展示在界面上, 只有等符合某个条件时,再去展示。也就是说要做显示和隐藏功能功能。
    我们首先想到的是用display:'none'|'flex'属性来实现。这个属性确实可以实现这一功能,但是在ios低版本里面存在兼容性问题,不管我们如何切换display的值,始终不可见。我们可以通过设置宽高来达到隐藏效果,但是这里需要注意,如果我们设置了padding,即使将宽高设置成0,依然会显示一部分,所以要将宽高设置成0.
const hidden: ViewStyle = {
  flex: 0,
  height: 0,
  width: 0,
  paddingTop: 0,
  paddingBottom: 0,
  paddingLeft: 0,
  paddingRight: 0,
  overflow: 'hidden',
};