Bilder Vorausladen, bevor Sie navigieren zu Komponente

Dies ist mehr eine konzeptionelle Frage, aber ich bin nicht sicher, die genaue Art und Weise, es zu lösen.

Ich habe eine Komponente, die ich herunterladen möchten Bilder von, aber ich möchte in der Lage sein, um anzugeben, dass die Komponente geladen wird, bevor der Benutzer kann dann den router verwenden, der Fluss, um es zu wechseln.

Ich vermute, dass ist etwas, das ich haben würde, zu erreichen, in redux, ist das die richtige Idee? Ich habe versucht zu finden ein Beispiel für ein reagieren native app, die dies tut.

Vielen Dank!

InformationsquelleAutor Joe Caraccio | 2017-03-09
  1. 13

    RN Image-Komponente eine bestimmte statische Methode in diesem Fall behandeln: https://facebook.github.io/react-native/docs/image.html#prefetch

    Hinweis: Image.prefetch gibt ein Versprechen

    Unten ist ein Beispiel, wie man diese umsetzen mit React Native-Router Flux (RNRF), ohne Verwendung von Redux:

    let urlOfImages = [https://...]

let preFetchTasks = []; 

urlOfImages.forEach((p)=>{
    preFetchTasks.push(Image.prefetch(p));
});

Promise.all(preFetchTasks).then((results)=>{
    let downloadedAll = true;
    results.forEach((result)=>{
        if(!result){
            //error occurred downloading a pic
            downloadedAll = false;
        }
    })

    if(downloadedAll){
        Actions.someScene({ downloadedPics: urlOfImages})
    }
})

    Dann in Ihre someScene - Komponente verwenden, die image-Komponente, wie Sie normalerweise tun, und das Bild wird abgeholt von Ihrer lokalen Festplatte cache dann eher aus der Ferne :

     <Image style={...} source={{uri: this.props.urlOfImages[0]}} />

    Sich auch nur bewusst sein, haben Sie Problemen, wenn Sie versuchen, das laden von Bildern von http anstatt gesicherte https-Endpunkte: https://github.com/facebook/react-native/issues/8520

    Wenn Sie wollten, um es mit Redux setzen Sie den obigen code in eine Aktion und stellen Sie sicher, dass Ihre Reduzierstücke reagieren auf die Aktion und setzen Sie den neuen Status als pro Ihre Anforderungen.

    • Genial, vielen Dank.
    • Das einzige, was ich habe darüber nachgedacht, wie dies dynamisch.. wie sagen, Sie haben 3 Instanzen der gleichen Komponente, laden Sie Bilder von einer anderen url.. ich denke, Sie könnten nur pass in verschiedenen props.. aber es wäre schwer zu tun, dynamisch
    • Ich verstehe nicht, was du meinst mit dynamisch. Auch wenn ich beantwortet haben, Ihre ursprüngliche Frage bitte akzeptieren Sie die Antwort. Danke.
    • sorry.. habe gerade
    • Hat das array der urls der Materie als Quelle? Wenn ich den string von einem anderen Ort tut es immer noch dasselbe Verhalten?
    InformationsquelleAutor Shivam Sinha
Schreibe einen Kommentar