React Native:重用渲染图像

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

我如何改进它以仅加载一次图像，但多次显示它们（无需重新获取）？

Answer 1

您确定图像再次被获取吗？您是否检查了网络活动以进行验证？如果 react-native 还没有做一些缓存，我会有点惊讶，但我会假设他们不会为了你的答案，因为那里有解决方案，例如......

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的解决方案，那么你可以尝试记住你的renderLogo函数。