Question

在React Native中，有没有办法切换元素的可见性？

例如：

<Text visibility={this.state.isVisible}>Visibility depends on state</Text>

Answer 1

这可能是粗糙的但是有效。

在渲染

下

var visibletext = null;
if (this.state.isVisible) {
   visibletext = (<Text>Visibility depends on state</Text>);
}

然后，在返回部分

<View style={styles.container}>
   {visibletext}
</View>

Answer 2

有多种方法可以做到这一点。请参阅React.js网站上的Conditional Rendering指南，其中介绍了不同的选项。

一种简单的方法是使用&& operator内联：

{this.state.isVisible &&
<Text>Something</Text>
}

请注意，使用条件渲染方法时，如果您拥有（例如）一些垂直居中的视图，则当文本出现时，这些视图将突然向上或向下移动（为新视图腾出空间）。避免这种跳转的另一种方法是更改文本颜色或将文本设置为空字符串：

// Change the text color
<Text style={this.state.isVisible ? {color: 'black'} : {color: 'white'}}>Something</Text>

// Set text to empty string
<Text>{this.state.isVisible ? "Something" : ""}</Text>

更改文本的颜色是确保显示文本时其他视图不会突然移动的最佳方法，因为文本已经占用了所需的布局空间。

切换React Native元素的可见性？

2 个答案: