代码之家 › 专栏 › 技术社区 › khateeb

React Native中同一元素的Out/In动画

react-native-animatable react-native reactjs javascript

1

khateeb · 技术社区 · 7 年前

我有一个 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>

1 回复 | 直到 7 年前

1

slashsharp 7 年前

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