Out/In React Native 中相同元素的动画
Out/In animation on same element in React Native
我有一个 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>
为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供大家参考
我有一个 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>
为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供大家参考