Bilder vor dem Navigieren zur Komponente laden.

Question

Dies ist eher eine konzeptionelle Frage, aber ich bin mir nicht sicher, wie genau es gelöst werden soll.

Ich habe eine Komponente, von der ich Bilder herunterladen möchte, aber ich möchte in der Lage sein, anzuzeigen, dass die Komponente geladen wird, bevor der Benutzer dann Router Flux verwenden kann, um zu es zu wechseln.

Ich vermute, das ist etwas, was ich in redux erreichen müsste, ist das die richtige Idee? Ich habe versucht, ein Beispiel für eine reaktive native App zu finden, die dies tut.

Vielen Dank!

Answer 1

RN Bildkomponente eine bestimmte statische Methode, um diesen Fall zu behandeln: https://facebook.github.io/react-native/docs/image.html#prefetch

Hinweis: Image.prefetch ein Versprechen

Unten gibt ein Beispiel dafür, wie dies zu implementieren unter Verwendung nativer Router Flux (RNRF) Reaktion, ohne Redux mit:

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 Ihrer someScene Komponente, die die Bildkomponente verwenden, wie Sie es normalerweise tun und das Bild wird von y abgeholt werden unsere lokale Festplatten-Cache eher dann aus der Ferne:

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

auch nur bewusst sein, Sie Probleme haben werden, wenn Sie versuchen, von http Bilder zu laden, anstatt gesicherte https-Endpunkte: https://github.com/facebook/react-native/issues/8520

Wenn Sie es benutzen wollen mit Redux setzen den obigen Code in eine Aktion und stellen sicher, dass Ihre Reduzierer auf die Aktion reagieren und den neuen Status gemäß Ihren Anwendungsanforderungen festlegen.