公告:攜程招聘java、前端、測試、產品等,請發簡歷至[email protected],幫內推!

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

1704次瀏覽

前言

只是記錄一下,說不上是什么分享吧,也是最近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

相關文章:

任选9场吧