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

Posted 2023-02-22

【中文标题】React Native：如何隐藏条件渲染以外的元素？

【英文标题】：React Native: How to hide an element other than conditional render?

【发布时间】：2016-03-16 04:21:30

【问题描述】：

除了条件渲染（每次都会渲染视图）之外，我如何隐藏/显示视图元素？ 我尝试将视图的高度设置为 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'

谢谢

【问题讨论】：

你看过 Animated in React Native 吗，你可以用动画执行隐藏/显示，有或没有过渡（有或没有定时动画）。

【参考方案1】：

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

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

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

【讨论】：

抱歉回复晚了，我已经设置了overflow:'hidden'，但是好像还是和其他一些样式冲突，并且在height设置为0时仍然显示内部内容。我已经编辑了我的帖子包括代码..

谢谢，overflow:'hidden' 解决了IOS中的问题。对于 Android，将高度设置为 0 是行不通的，因此尝试通过将其设置为 0.1 来尝试解决方法。

确保您试图隐藏的父视图上没有任何填充。删除填充解决了我的问题