リアクションネイティブ：レンダリングされた画像を再利用

Question

「ロゴウォール」のようなものを構築しようとしていますが、同じ画像があることがよくあります。それらをレンダリングするとき、同じイメージURLが既にフェッチされていても、それらはそれぞれ別々にロードされます。ここで

は私のコードです：

export default class LogoWall extends React.Component 
{ 
    //... 

    renderLogo(logoUrl) 
    { 
     // need to wrap into a function to have unique keys... 
     return (key) => <Image 
      key={key} 
      source={{uri: logoUrl}} 
      style={styles.logo} 
     /> 
    } 

    render() 
    { 
     // trying to save logos within this object 
     const logos = {}; 

     return (
      <View style={styles.rowContainer}> 
       {(() => { 
        let logoRows = []; 

        for (let i = 0; i < this.props.rows; i++) { 
         logoRows.push(<View style={styles.logoRow} key={i}> 
          {this.getLogos(i % 2 === 0).map((logoUrl, key) => { 

           // should only render when this image doesn't exist 
           if (typeof logos[logoUrl] === 'undefined') { 
            logos[logoUrl] = this.renderLogo(logoUrl); 
           } 

           return logos[logoUrl](key) 
          })} 
         </View>) 
        } 

        return logoRows; 
       })()} 
      </View> 
     ) 
    } 
} 

どのように私は一度だけ1枚の画像をロードするために、これを改善するが、それらは、（再フェッチなし）、複数回表示持つだろうか？

Answer 1

イメージが再度フェッチされるのは確かですか？確認するためにネットワークアクティビティをチェックしましたか？反応ネイティブがまだキャッシングをしていないのであれば少し驚いているかもしれませんが、あなたの答えの利益のために、そしてそこに解決策があると仮定します。

https://github.com/kfiroo/react-native-cached-image

あなたがこのパッケージを使用する場合は、あなただけ交換する必要があるだろう...

<CachedImage 
    key={key} 
    source={{uri: logoUrl}} 
    style={styles.logo} 
/> 

と

<Image 
    key={key} 
    source={{uri: logoUrl}} 
    style={styles.logo} 
/> 

しかし、冗長なフェッチがあるかどうかを確認してください実際に起こって私たちに知らせてください。また、このパッケージはネイティブモジュールを使用しているため、エクスポ（またはCRNA）から取り出したい、または標準のreact-native initベースのアプリを使用していると想定しています。あなたはあなたが使っていることは言及していませんでした。 javascriptベースのソリューションが必要な場合は、memoizingrenderLogo機能を試してみてください。