React Nativeで画像シーケンスを処理する方法

Question

現在、iOS（iPad 4）用の基本的な1ページのReact Nativeアプリ（iPad 4）は、カメラのフィードを表示し、画像シーケンスをオーバーレイします。この画像シーケンスは149フレームで構成され、連続してループします。

Imageコンポーネントのソースを24回/秒で置き換えることで、イメージシーケンスループを実現しました。

ここにappクラスがあります（スタイル小道具はありません）。

class App extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      frame: 1 
     }; 
    } 

    componentDidMount() { 
     setInterval(() => { 
      let frame = this.state.frame; 

      frame++; 

      if (frame > 149) { 
       frame = 1; 
      } 

      this.setState({frame}); 
     }, 1000/24); 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <Camera ref={(cam) => {this.camera = cam}}> 
        <Text>Frame: {this.state.frame}</Text> 
        <Image source={{uri: `./gifs/${this.state.frame}.gif`}}/> 
       </Camera> 
      </View> 
     ); 
    } 

} 

これはこれを出力として示しています。

私は取得しています問題は、時間の長さを変化させた後にアプリがクラッシュします。場合によっては、クラッシュする前に3秒間実行することも、クラッシュする前に2分間実行することもあります。

これはメモリの問題だと思っていますが、Xcodeのデバッガでは使用可能なメモリの約10％しか使用していませんでした。どういうわけか、必要な画像だけをメモリに読み込んで、私が使っていない画像を削除するか、これが自動的に管理されるのですか？

Answer 1

try react-native-spriteは、javascriptのsetIntervalソリューションの代わりにネイティブUIImageViewを使用して画像シーケンスをアニメートします。