Javascript 反应本机动画：条件动画视图

我正在使用。我有以下可设置动画的

。视图

：

<Animatable.View ref={ref => this.view = ref} animation="fadeInUp">
   <TextInput style={{ flex: 1 }}
     value={this.state.text}
     onChangeText={(text) => { this.setState({ text: text }) }}
   />
</Animatable.View>

this.view=ref}animation=“fadeInUp”>
{this.setState（{text:text}}}
/>

当我按下按钮时，我使用其引用（

this.View

）触发

Animatable.View

），以执行以下任一操作：

• 动画中的（

  this.view.fadeInUp（300）；

  ）
• 或者一个输出动画（

  这个.view.fadeOutDown（300）；

  ）

---

但是，我希望最初隐藏

可设置动画的.View

。我希望它仅在按下按钮后使用动画进行渲染和显示。这是如何实现的？

使用状态，并在第一次触发按钮时将其设置为true

{this.state. show && Animatable.View ref={ref => this.view = ref} animation="fadeInUp">
   <TextInput style={{ flex: 1 }}
     value={this.state.text}
     onChangeText={(text) => { this.setState({ text: text }) }}
   />
</Animatable.View>}

{this.state.show&&Animatable.View ref={ref=>this.View=ref}animation=“fadeInUp”>
{this.setState（{text:text}}}
/>
}

无

导致错误，无法工作。我还尝试了

undefined

，它成功地没有执行动画，但是元素仍然可见。我希望在按钮和fadeIn动画触发之前将其隐藏。另一个选项是使用状态变量隐藏可设置动画的.View部分