React Native：如何隐藏条件渲染以外的元素？

Question

除了条件渲染（每次都会渲染视图）之外，我如何隐藏/显示视图元素？ 我尝试将视图的高度设置为 0/1，但它在 IOS 上不起作用，并且默认为内部孩子的高度。

我需要这个来显示从上到下滑动的菜单。这个菜单也是一个带有绝对坐标的叠加层。

<View style={styles.container}>        
    <Animated.View style={[styles.toggleMenu]} >
        <MenuScreen onPress={()=>{this.toggleMenu()}}/>
    </Animated.View>
</View>

Styles

container: {
flex: 1,  
backgroundColor: '#FFFFFF',
borderRadius: 8,
borderColor: '#000000'
},

toggleMenu:{
position: 'absolute',
left: 0,
top: 0,
width:WindowSize.width,
height: 0,
backgroundColor: '#2b3643',
opacity:0.95,
padding:0,
overflow: 'hidden'
}

谢谢

Answer 1

在您的元素上设置 overflow: "hidden"，这应该允许 height 属性正确“隐藏”子元素。

请注意，使用 height 与其他 flexbox 属性可能存在一些冲突，我需要您的代码来诊断。

有趣的事实：您可能在 iOS 而不是 Android 上遇到问题的原因是，在 Android 上，所有 View 都固有地隐藏了超出其边界的子项。默认情况下，此功能在 iOS 上不存在。