Umgang mit Bildsequenzen in React Native

Question

Ich habe derzeit eine grundlegende 1 Seite React Native App für iOS (iPad 4), die die Kamera Feed zeigt und eine Bildsequenz überlagert. Diese Bildsequenz besteht aus 149 Bildern und wird kontinuierlich wiederholt.

Ich erreiche die Bildsequenz Schleife durch Ersetzen der Quelle der Image Komponente 24 Mal pro Sekunde.

Hier ist die App-Klasse (ohne die Requisiten).

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

} 

Das gibt dies als die Ausgabe.

Das Problem, das ich bin immer ist, dass der App stürzt nach Zeitlängen variieren. Manchmal kann es 3 Sekunden lang laufen, bevor es abstürzt und manchmal kann es 2 Minuten lang laufen, bevor es abstürzt.

Ich vermute, das ist ein Speicherproblem, aber im Debugger in Xcode war es nur mit ~ 10% des verfügbaren Speichers. Gibt es eine Möglichkeit, nur die Bilder, die ich brauche, in den Speicher zu laden und die Bilder zu entfernen, die ich nicht oder nicht automatisch verwalte?

Answer 1

Versuchen Sie react-native-sprite, die animiert eine Bildsequenz mit nativen UIImageView anstelle einer Javascript setInterval-Lösung.