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

但请验证是否确实发生了冗余提取并告知我们。此外，此软件包使用本机模块，因此假定您愿意从 expo（或 CRNA）中弹出，或者正在使用基于标准 react-native init 的应用程序。你没有提到你使用的是哪个。如果您需要基于 javascript 的解决方案，那么您可以尝试 memoizing 您的 renderLogo 函数。