炫意html5
最早CSS3和HTML5移动技术网站之一

RN0.54以上安卓中display: none 和 position: absolute不能同时使用

前言

只是记录一下,说不上是什么分享吧,也是最近reactNative项目遇到的问题。场景是这样的。我用react-native0.51的时候,display:none可以正常使用,升级到0.58之后,不能用了。查阅了一下资料,RN0.54以上,安卓手机爆出的问题,在display: none 和 position: absolute同时使用的时候,display:none无效。

解决方案一:

解决方案很简单,就是在display:none的时候把position:absolute变成position:relative就可以了。

if (炫H5_hidden) {
setState({display: none, position: relative})
} else {
setState({display: flex, position: absolute } )
}

具体可以看 https://github.com/facebook/react-native/issues/18415

解决方案二

假如你隐藏需要一些效果,或者动画之类的,可以使用插件

react-native-display

用法:

import Display from 'react-native-display';
<Display enable={this.state.enable}>
<Text> My custom components </Text>
</Display>

添加动画

 <Display
enable={this.state.enable}
enterDuration={500}
exitDuration={250}
exit="fadeOutLeft"
enter="fadeInLeft"
>
<View style={[styles.circle, {backgroundColor: '#2ecc71'}]} />
</Display>

小结

本文主要是记录react-native新版本 中display:none无效的这个bug,说不定后面就会修复了。

炫意HTML5 » RN0.54以上安卓中display: none 和 position: absolute不能同时使用

Java基础教程Android基础教程