Анимация Out/In для того же элемента в React Native

Question

Анимация Out/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>

2

javascript reactjs react-native react-native-animatable

Источник

user1797689 03 сен '18 в 13:05

1 ответ

Решение

Другие вопросы по тегам javascript reactjs react-native react-native-animatable

user3527465 03 сен '18 в 13:18 2018-09-03 13:18 · Accepted Answer · 2018-09-03 13:18

Назначить ref в Animatable компонент, а затем, например, на 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>

Вот закуска для вашей справки