Question

我想控制Text组件的外观

在我的代码中，Text组件仅在呈现特定Image时才会显示

此Text组件应在特定Image出现

后5秒后显示

我怎么能在这里做我的示例代码：

renderImage1() {
    return (
      <Image
        source={require('./Images/image1.png')}
        style={styles.image1Style} >
        <Text         // I need to control this component's appearance
        style={styles.textStyle}
        onPress={() => this.setStep(2)}>
        Touch To Play
        </Text>
      </Image>
    );
  }

Answer 1

根据您的评论：

现在它渲染我想要的是显示图像然后在大约5秒后向用户显示文本

我可以建议：
1.尝试使用this.state创建显示prop，它将使用布尔值（对于if语句）或“none”/“initial”值（用于显示文本样式prop）或“visibile”/“hidden”值（用于可见性文本样式道具）。
2.在this.setState（{showText：！showText}）函数调用上设置timeout 3.对于 if语句解决方案，使您的render方法呈现Image with Text或不基于 this.state.display 真实性或虚假。

render() {
    if (this.state.display) {
        return <Image><Text></Text></Image>
    }
    return <Image></Image>
}

对于显示或可见性解决方案，请使用ternary opertor 在其样式的Text组件的display / visibility之间波动：

显示：

<Text
    style={{ display: this.state.display })
/>

可见性：

<Text
    style={{ visibility: this.state.visibility })
/>

如何在反应原生中控制组件的外观

1 个答案: