React native 是否切换本机元素的可见性?

React native 是否切换本机元素的可见性?,react-native,React Native,在React Native中,是否有切换元素可见性的方法 例如: <Text visibility={this.state.isVisible}>Visibility depends on state</Text> 可见性取决于状态 这可能很粗糙,但它确实有效 渲染下 var visibletext = null; if (this.state.isVisible) { visibletext = (<Text>Visibility depends o

在React Native中,是否有切换元素可见性的方法

例如:

<Text visibility={this.state.isVisible}>Visibility depends on state</Text>
可见性取决于状态

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

渲染下

var visibletext = null;
if (this.state.isVisible) {
   visibletext = (<Text>Visibility depends on state</Text>);
} 
var visibletext=null;
if(this.state.isVisible){
visibletext=(可见性取决于状态);
} 
然后,在返回部分下

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

{visibletext}

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

一种简单的方法是使用内联:

{this.state.isVisible&&
某物
}

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

// 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>
//更改文本颜色
某物
//将文本设置为空字符串
{this.state.isVisible?“:”}

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

我认为当变量更改时,这不会动态更新,是吗?如果使用
setState
方法更新状态,这将自动重新渲染组件。此外,简单地不呈现组件(即本例中的视图)并返回null似乎也是在React中实现所需的方法,因此我假设这与React Native中的方法相同。此外,此答案将完全删除元素(如display:none),它不会让元素不可见,但仍会占用DOM中的空间。这将使元素既不可见又不可见。通常不太有用。有没有办法不用状态来实现这一点?@Zack你可以不用状态来实现这一点。你只需要一个布尔值。要获取布尔值,可以使用prop而不是state,或者创建一个函数,根据某些内容返回布尔值。
// 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>