React native 如何在单个元素上使用多个动画

我使用的是react原生动画插件，我想对同一文本使用多个动画。基本上，我想做的是以1s和0s延迟的持续时间缩放文本，然后在完成时以1s和3s延迟的持续时间在同一文本上执行脉冲动画。然后最后以1s的持续时间和5s的延迟缩放相同的文本

到目前为止，只执行最后一个动画

这是我的密码

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>

import*作为“react native Animatable”中的动画；
我的文字

您可以在文本元素上设置一个

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>
  )
}

componentDidMount（）{
这个.textRef.zoomIn（1000）。然后（（）=>{
设置超时（（）=>{
这个.textRef.pulse（1000）。然后（（）=>{
设置超时（（）=>{
this.textRef.zoomOut（1000）
}, 5000)
}, 3000)
})
});
}
render（）{
返回(
this.textRef=el}
style={{color:'white'，fontSize:20，position:'absolute'，bottom:0}
>
我的文字
)
}

您可以在文本元素上设置一个

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>
  )
}

componentDidMount（）{
这个.textRef.zoomIn（1000）。然后（（）=>{
设置超时（（）=>{
这个.textRef.pulse（1000）。然后（（）=>{
设置超时（（）=>{
this.textRef.zoomOut（1000）
}, 5000)
}, 3000)
})
});
}
render（）{
返回(
this.textRef=el}
style={{color:'white'，fontSize:20，position:'absolute'，bottom:0}
>
我的文字
)
}

很抱歉这么晚才发表评论。我想知道如何根据答案设置每个动画之间的延迟above@sam编辑了我的答案。最简单的方法是添加一个

setTimeout

，很抱歉评论太晚。我想知道如何根据答案设置每个动画之间的延迟above@sam编辑了我的答案。最简单的方法是添加一个

setTimeout