реагировать нативно, как использовать несколько анимаций на одном элементе

Question

Я использую плагин реагировать на нативную анимацию, и я хотел бы использовать несколько анимаций для одного и того же текста.По сути, я хочу увеличить масштаб текста с задержкой 1 с и 0 с, а затем, когда это будет сделано, выполнить анимацию импульса для того же текста, используя длительность 1 с и задержку 3 с.затем, наконец, zoomOut тот же текст с длительностью 1 с и задержкой 5 с

пока что только последняя анимация выполняет

вот мой код

import * as Animatable from 'react-native-animatable';

<View style={{ backgroundColor: '#203546', flex: 1, alignItems: 'center', }}>
    <Animatable.Text animation="zoomIn" duration={1000} delay={0} 
                     animation="pulse" duration={1000} delay={3000} 
                     animation="zoomOut" duration={1000} delay={5000} 
                    style={{ color: 'white', fontSize: 20, position: 
                         'absolute', bottom: 0 }}>my text
   </Animatable.Text>
 </View>

Answer 1

Вы можете установить ref для элемента «Текст» и запустить анимацию с помощью Обязательное использование .

Пример:

componentDidMount() {
  this.textRef.zoomIn(1000).then(() => {
    setTimeout(() => {
        this.textRef.pulse(1000).then(() => {
          setTimeout(() => {
              this.textRef.zoomOut(1000)
          }, 5000)
      }, 3000)
    })
  });
}

render() {
  return (
    <Animatable.Text
        ref={el => this.textRef = el}
        style={{ color: 'white', fontSize: 20, position: 'absolute', bottom: 0 }}
      >
        my text
      </Animatable.Text>
  )
}