React Native：重新使用渲染图像

我试图构建一个类似“徽标墙”的东西，但可能存在（并且经常是）相同的图像。渲染它们时，即使已经提取了相同的图像url，它们也会分别加载。React Native：重新使用渲染图像

这里是我的代码：

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

我怎么能改善这个加载一个图像只有一次，但让他们多次显示（无重取）？

来源

2017-10-11 Dennis

你确定图像被重新提取吗？你有没有检查网络活动来验证？如果反应本机还没有做一些缓存，我会有点惊讶，但我会假设他们不会为您的答案带来好处，因为有解决方案，例如...

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

如果你使用这个包，你只需要更换...

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

与

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

但请核实冗余取是否实际发生并让我们知道。此外，此软件包使用本机模块，因此它假定您愿意从博览会（或CRNA）中退出，或者正在使用基于标准react-native init的应用程序。你没有提及你正在使用的是什么。如果您需要基于JavaScript的解决方案，那么您可以尝试使用memoizingrenderLogo函数。

来源

2017-10-11 11:48:04

谢谢您的回复。是的，我可以确认它正在重新获取，因为当墙包含例如20个徽标，每个人都会以〜1s的延迟逐一渲染（也检查网络活动）。一旦他们被下载，他们被缓存（但只有在重新启动应用程序后）。我真正想要的是访问图像的渲染实例。当我将它们存储到变量（如上所示）时，它会尝试重新提取（或在重新启动应用程序后使用缓存）。所以我需要一种方法来存储它的渲染实例，所以它不会重新渲染它。 – Dennis

这是个很难解决的问题。我很想了解您找到的任何解决方案。我会想象，在核心中也会有用 –

React Native：重新使用渲染图像

回答

相关问题