在 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

为可动画组件分配一个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>

这里有一个小吃供您参考