React Native - レンダリング前に画像を準備する

Question

私は問題の良いアプローチを見つけ出す過去数日間、苦労してきました。一度に1つずつ< Image>コンポーネントを表示する必要があります（ListViewはオプションではありません）。このコンポーネントは、firebaseイメージを指すuriをソースとして持っています。私は、私はまだする必要がレンダリング機能に、そのアレイ上の特定の画像を表示しようとすると、しかし

let mediaArray = this.props.list.map(function(media){ 
    return <Image style={styles.imageStyle} source={{uri: media}} />; 
}); 
this.setState({list: mediaArray}); 

：私はcomponentWillMount上などに表示されるすべてのコンポーネント画像を含む配列を準備しようとしていますイメージを見るために数秒待ってください。

render(){ 
    {this.state.list[currentIndex]} 
} 

以前に準備されていた場合、なぜイメージを再度取得しようとしますか？これは、Reactはレンダリング時のみソースを探しますか？

私は「フィード」（インスタントグラム、フェイスブックなど）を作成しようとしていますが、一度に1つのイメージコンポーネントを表示する必要があるため、従来とは異なります。

キャッシュイメージを調べてみましたが、現実には何百ものイメージを取得しようとしているため、それは役に立たないでしょう。

Answer 1

あなたはReact Nativeがレンダリングされるまでイメージのソースを取得しないことを実感してお金を稼いでいます。画像をプリロードする場合は、画像ソースにprefetchと電話する必要があります。あなたのコードを使用した簡単な例では、このように見えるmediaArrayを作成modifywhereすることです：

let mediaArray = this.props.list.map(function(media){ 
    Image.prefetch(media); // that's it! 
    // you can now remove this following line and just construct a single image tag later. 
    return <Image style={styles.imageStyle} source={{uri: media}} />; 
}); 
this.setState({list: mediaArray}); 

あなたはもう少し賢いようにしたい場合は、その都度currentIndexが更新され、今後の画像のほんの数をプリフェッチできます。より多くのガイダンスが必要な場合は、このコンポーネントのコードをもっと共有してください。

希望すると便利です。