切换 React Native 元素的可见性？答案

【问题标题】：Toggle visibility for React Native elements?切换 React Native 元素的可见性？
【发布时间】：2015-08-13 20:56:19
【问题描述】：

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

例如：

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

【问题讨论】：

标签： react-native

【解决方案1】：

这可能很粗糙，但它确实有效。

渲染中

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

然后，在返回部分下

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

【讨论】：

我不认为当变量改变时它会动态更新，不是吗？
如果您使用setState 方法更新状态，这将自动重新渲染组件。此外，简单地 not 渲染一个组件（即本例中的视图）并返回 null 似乎也是在 React 中实现您想要的东西的方法，所以我假设这在 React Native 中是一样的。
另外，这个答案将完全删除元素（如 display:none），它不会让它不可见，但仍会在 DOM 中占用空间
这将使元素既不可见又无形。通常没那么有用。

【解决方案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>

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

【讨论】：

有什么方法可以在不使用状态的情况下实现这一点？
@Zack 你可以在没有状态的情况下做到这一点。您只需要一个布尔值。要获取布尔值，您可以使用道具而不是状态，或者创建一个根据某些内容返回布尔值的函数。