React Native上的动画图像序列

Question

我有一个包含一系列图像的动画：image01.png，image02.png，image03.png等。如何让这些动画在React Native上持续动画？

Answer 1

你可以与图书馆尝试：

• https://github.com/madsleejensen/react-native-image-sequence
• https://github.com/remobile/react-native-image-animation

首先是更加更加高效，二是纯JavaScript。另一种方式是实现它自己的方式，喜欢这里：https://github.com/facebook/react-native/issues/9280

它应该看起来像这样

export default class Animation extends Component { 
    constructor(props) { 
     super(props); 
     this.images = [ 
      require('./img_01.png'), 
      require('./img_02.png'), 
      require('./img_03.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(); 
     }, 300); 
    } 

    render() { 
     return (
      <Image 
       source={this.images[this.state.index]} 
       style={styles.image} 
      /> 
     ) 
    } 
}