javascript - React Native 中同一元素上的出/入动画

Question

我有一个TextView，它将在下一次渲染时fadeOutDown旧数据和fadeInDown新数据。我该如何实现这个目标？我正在使用 react-native-animatable 库，并已成功制作一个动画，但不知道如何制作两个动画。

<Animatable.View animation={this.props.animation} style = {styles.innerView2}>
  <Text text = "abcd" style = {{alignItems: 'flex-start', width: DEVICE_WIDTH - 20, textAlign: 'left'}}/>
</Animatable.View>

Answer 1

为 Animatable 组件分配一个 ref，然后在 componentDidUpdate 上，您可以重新触发动画

componentDidUpdate() {
  if (this.view !== undefined && this.view !== null) {
    this.view.fadeIn(1000);
  }
}

<Animatable.View
  ref={ref => (this.view = ref)}
  animation="fadeIn"
  easing="ease-in">
  <Text>{this.state.newText}</Text>
</Animatable.View>

这是一个snack供您引用