コンポーネントにナビゲートする前に画像をプリロードする

Question

これは概念的な問題ですが、これを解決する正確な方法はわかりません。

イメージをダウンロードしたいコンポーネントがありますが、コンポーネントがロードされてからルータフラックスを使用してそのコンポーネントに切り替えることができるようにしたいと考えています。

私はそれが私がreduxで成し遂げなければならないことを推測しています、それは正しい考えですか？私はこれを行う反応するネイティブアプリの例を見つけることを試みてきました。

ありがとうございます！

Answer 1

RN画像成分このケースを処理する特定の静的メソッド：https://facebook.github.io/react-native/docs/image.html#prefetch

注：プロミス以下

を返しImage.prefetchはせずに、ネイティブルータフラックス（RNRF）と反応用いてこれを実現する方法の例でありますReduxのを使用して：あなたは正常に行うと画像をyからフェッチされるように

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

はその後、あなたのsomeSceneコンポーネントで画像コンポーネントを使用しますいうし、リモートで私たちのローカルディスクキャッシュ：

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

また、ちょうどあなたがセキュアなHTTPSエンドポイントではなく、HTTPからイメージをロードしようとすると、あなたが問題を持っています注意してください：https://github.com/facebook/react-native/issues/8520

あなたがそれを使用したい場合Reduxは上記のコードをアクションに入れ、あなたのレデューサーがアクションに応答し、アプリケーションの要件に従って新しい状態を設定するようにします。