React Native - 更快地加载图像而不缓存它的更好方法答案

【问题标题】：React Native - Better way to load image very fast without caching itReact Native - 更快地加载图像而不缓存它的更好方法
【发布时间】：2018-09-04 13:11:18
【问题描述】：

我正在使用FastImage 缓存图像，它在缓存数据后加载图像的速度非常快。但是我的服务器每次都会为同一张图片生成新的 uri（s3 预签名的 url）。

因此，FastImage 将其视为新图像并尝试每次下载，这会影响我的应用性能。

我的问题是，有没有什么乐观的方法可以在不缓存的情况下尽可能快地渲染图像？

【问题讨论】：

你是如何克服这个问题的？
我已将预签名的 url 到期时间设置为 1 年。因此，每当我访问它时，我都会得到相同的图像 url，这解决了我的问题。现在，Fast Image 显示缓存的图像数据

标签： image react-native amazon-s3 image-caching pre-signed-url

【解决方案1】：

如果您有机会修改服务器端应用程序，您可以创建授权标头而不是创建预签名的 url。

这个功能应该有帮助。

import aws4 from 'aws4';

export function getURIWithSignedHeaders(imagePath) {
    if(!imagePath){
        return null;
    }
    const expires = 86400; // 24 hours
    const host = `${process.env.YOUR_S3_BUCKET_NAME}.s3.${process.env.YOUR_S3_REGION}.amazonaws.com`;
    // imagePath should be something like images/3_profileImage.jpg
    const path = `/${imagePath}?X-Amz-Expires=${expires}`;
    const opts = {
        host,
        path,
        headers: {
            'Content-Type': 'image/jpeg'
        }
    };
    const { headers } = aws4.sign(opts, {accessKeyId: process.env.YORU_ACCESS_KEY_ID, secretAccessKey: process.env.YOUR_SECRET_ACCESS_KEY});
    return {
        uri: `https://${host}${path}`,
        headers: {
            Authorization: headers['Authorization'],
            'X-Amz-Content-Sha256': headers['X-Amz-Content-Sha256'],
            'X-Amz-Date': headers['X-Amz-Date'],
            'Content-Type': 'image/jpeg',
        }
    }
}

见：609974221

【讨论】：