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

摘要： 前言 只是記錄一下，說不上是什麼分享吧，也是最近reactNative專案遇到的問題。場景是這樣的。我用react-native0.51的時候，display:none可以正常使用，升級到0.58之後，不能用了。查閱了一下資料，RN0.54以上，安卓手機爆出的問題，在display: no...

前言

只是記錄一下，說不上是什麼分享吧，也是最近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，說不定後面就會修復了。