如何使用 react-native 显示/隐藏内容？

【问题标题】：How to show/hide content using react-native?如何使用 react-native 显示/隐藏内容？
【发布时间】：2016-03-29 19:41:00
【问题描述】：

如何使用 react-native 创建下拉菜单？

如何显示/隐藏内容？

【问题讨论】：

你能提供迄今为止你尝试过的例子吗？您问如何创建下拉菜单以及如何显示/隐藏内容...显示和隐藏是为了尝试创建下拉菜单还是这两个独立的问题？
例如我需要这样的下拉菜单getbootstrap.com/components/#btn-dropdowns-single

标签： javascript react-native mobile-development

【解决方案1】：

https://github.com/alinz/react-native-dropdown

这将为您提供类似于您所要求的下拉菜单。显示/隐藏内容只是决定是否呈现内容，可以通过多种方式完成。

render() {
    let hideableContent;

    if (this.state.shouldRenderContent) {
        hideableContent = <Text>I AM SHOWING</Text>;
    }

    return (
        <View>
            <Text>This doesn't hide</Text>
            {hideableContent}
        </View>
    );
}

【讨论】：

我喜欢这个不那么冗长的版本：{this.state.shouldRenderContent && (<Text>I AM SHOWING</Text>)}.
是的，这种方式也可以。有很多方法可以做到这一点，我怀疑其中大多数会带来性能问题，所以这一切都归结为团队（或个人，如果只有你）偏好。