Question

我正在使用React Native Animatable。我有以下Animatable.View：

<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>

当我按下按钮时，我会使用参考（Animatable.View）触发this.view来执行以下任一操作：

动画中的（this.view.fadeInUp(300);
或 out动画（this.view.fadeOutDown(300);）

但是，我希望最初隐藏Animatable.View。我希望它仅在按下按钮后才呈现并使用动画显示。这如何实现？

Answer 1

使用状态，并在首次触发按钮时将其设置为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>}

React Native Animatable：条件动画视图

1 个答案: