公告:携程招聘java、前端、测试、产品等,请发简历至374947554@qq.com,帮内推!

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

3115次浏览

前言

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

解决方案一:

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

if (haorooms_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,说不定后面就会修复了。

Tags: react-nativejs

相关文章: