React Native中的序列动画

Question

我正在尝试利用react-native-animatable来使一系列图像动画化。这是我的代码：

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

constructor(props) {
    super(props);
    this.images = [
            require('../../assets/img/04_rec_img/b1.png'),
            require('../../assets/img/04_rec_img/b2.png'),
            require('../../assets/img/04_rec_img/b3.png'),
    ];
    this.next = this.next.bind(this);
    this.state = {index: 0};
}

componentDidMount() {
    this.next();
}

next() {
    setTimeout(() => {
        this.setState({index: (this.state.index+1)%3});
        this.next();
    }, 1000);

}

render(){
       <View style={{backgroundColor:'rgba(142, 142, 147, 0.24)', 
        width:67,height: 67, borderRadius: 67/2, justifyContent:'center', alignItems:'center',
         }}>
              <Animatable.Image duration={500} ease="ease-out" animation="slideInRight" source={this.images[this.state.index]}
               style={{width:36, height:36}} /> 

        </View> 

}  

第一个图像会滑动，但其余两个不会滑入，而只会出现。

我想实现以下目标：

请帮助！！如果您有其他方法，也请分享。预先感谢