React Native-一种无需缓存就可以非常快速地加载图像的更好方法 [英] React Native - Better way to load image very fast without caching it

问题描述

我正在使用 FastImage 来缓存图像，并在加载图像后非常快地加载图像按预期缓存数据.但是我的服务器每次都为同一张图片生成新的uri(s3前置网址).

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

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

解决方案

如果您有机会修改服务器端应用程序，则可以创建Authorization标头，而不是创建预签名的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

I am using FastImage for caching image and it loads image very fast after caching data as expected. But my server is generating new uri (s3 presigned url) each time for same image.

So, FastImage is considering it as new image and tries to download everytime which affects my app performance.

My question is, Is there any optimistic way to render images fast as possible without caching it?

解决方案

If you have chance to modify the server side application, you can create Authorization headers instead of creating presigned urls.

This function should help.

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',
        }
    }
}

See: 609974221

这篇关于React Native-一种无需缓存就可以非常快速地加载图像的更好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！