De serviços de mídia social a aplicativos de rideshare e plataformas de blog, as imagens ocupam uma posição importante para a representação de dados. Eles desempenham um grande papel no aprimoramento da experiência do usuário e são, de fato, vitais para a facilidade de uso do seu aplicativo.
Do ponto de vista do desenvolvedor, carregar imagens remotas não é um grande problema no React Native. Mas mesmo com a melhor das otimizações adicionadas ao componente, seja uma classe ou um componente funcional, o carregamento e a renderização da imagem podem tornar o aplicativo lento, o que gera uma interface lenta.
Neste tutorial, mostraremos primeiro como armazenar imagens em cache no React Native usando a biblioteca react-native-fast-image. Em seguida, demonstraremos como construir seu próprio componente de cache de imagem React Native do zero com instruções passo a passo e exemplos detalhados.
Aqui está o que vamos cobrir:
O que é cache de imagem no React Native?
O que é react-native-fast-image?
Usando o componente FastImage: um exemplo prático
React propriedade de cache nativo
Como construir um componente de cache de imagem do zero
Para acompanhar, você deve estar familiarizado com os fundamentos do React Native-por exemplo, JSX, componentes (classe e funcional) e estilo. Você pode simplesmente copiar e colar os blocos de código deste guia, mas sugiro a leitura de todo o tutorial para melhor compreensão.
O que é cache de imagem no React Native?
O cache é uma ótima maneira de resolver problemas associados ao carregamento e renderização de imagens de terminais remotos. O armazenamento em cache de imagens basicamente significa baixar uma imagem para o armazenamento local no diretório de cache do aplicativo (ou qualquer outro diretório que seja acessível ao aplicativo) e carregá-la do armazenamento local na próxima vez que a imagem for carregada.
Existem algumas maneiras de abordar o cache de imagens no React Native. Se você estiver construindo um aplicativo React Native básico, há um componente maravilhoso disponível que lida com todo o cache de imagens automaticamente sem escrever nenhum código extra chamado React Native FastImage . Ou, se você estiver usando Expo ou trabalhando em um projeto mais complexo, pode decidir construir seu próprio componente de cache de imagem do zero.
O que é react-native-fast-image?
react-native-fast-image é um componente React Native de desempenho para carregando imagens. FastImage armazena em cache de forma agressiva todas as imagens carregadas. Você pode adicionar seus próprios cabeçalhos de autenticação de solicitação e imagens de pré-carregamento. react-native-fast-image tem até suporte de cache GIF.
Para começar a usar o React Native FastImage, primeiro importe o componente FastImage:
importar FastImage de’react-native-fast-image’;
Abaixo está a implementação básica do componente FastImage:
Esta é uma prévia de como isso se parece:
Usando o componente FastImage: um exemplo prático
Vejamos um exemplo básico de uso do componente FastImage com alguns adereços:
Como você pode ver, este exemplo é quase igual ao componente básico da imagem React Native, mas com esteróides. Vamos detalhar o código em detalhes.
fonte contém a imagem, seus cabeçalhos e muito mais
uri representa o caminho da imagem que você deseja carregar
cabeçalhos representam os cabeçalhos de que você pode precisar (token de autenticação no exemplo acima)
prioridade significa a prioridade das imagens-por exemplo, se você precisa carregar uma determinada imagem primeiro, você pode definir a prioridade para FastImage.priority.high
React propriedade de cache nativa
o cache é onde as coisas ficam emocionantes. Você provavelmente está familiarizado com uri, cabeçalho e outros adereços do componente Imagem. É o mesmo para FastImage, com apenas pequenas alterações. cache é o que você usaria para alterar o comportamento do armazenamento em cache e do carregamento de imagens.
Existem três propriedades que você pode usar no cache:
FastImage.cacheControl.immutable é a propriedade padrão do componente FastImage. A imagem só armazena em cache ou atualiza se o uri for alterado
FastImage.cacheControl.web permite que você configure o componente FastImage para armazenar imagens em cache como o navegador, usando cabeçalhos e o procedimento normal de armazenamento em cache
FastImage.cacheControl.cacheOnly permite que você restrinja o componente FastImage para buscar imagens já armazenadas em cache-ou seja, sem fazer novas solicitações de rede.
Aqui está um exemplo de uma imagem com a propriedade cache:
Para declarar o benefício de forma simples, se você puder manter um banco de dados local de imagens que são carregadas uma vez, você pode usar essa propriedade de cache para economizar nos custos de largura de banda, buscando imagens em cache do armazenamento do dispositivo.
Como construir um componente de cache de imagem do zero
FastImage é ótimo para projetos React Native básicos, mas se você estiver usando Expo ou tiver necessidades que não podem atender a react-native-fast-image, convém escrever seu próprio componente de cache de imagem.
Antes de construir seu próprio componente de cache de imagem, é crucial entender os fundamentos do cache de uma imagem. Vamos revisar: armazenar uma imagem em cache é armazená-la no armazenamento local do dispositivo para que possa ser acessada rapidamente da próxima vez, sem nenhuma solicitação de rede.
Para armazenar uma imagem em cache, precisamos do URI da rede, ou URL dessa imagem, e um identificador de string para buscá-la na próxima vez. Precisamos de um identificador exclusivo para cada recurso porque várias imagens podem ter o mesmo nome, o que pode ser um problema ao diferenciar entre o cache local e imagens com nomes redundantes.
Para este guia, assumirei que você está construindo seu aplicativo usando expo ou usando expo-file-system por meio de unimodules no React Native.
Nosso componente deve ter três adereços básicos:
fonte para o URI da imagem de rede
cacheKey para o identificador único de uma imagem
estilo para definir o estilo do componente da imagem:
let image={ uri:”https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-800×825.jpg”, id:”MFdcdcdjvCDCcnh”,//o id exclusivo que você pode armazenar em seu banco de dados local };
Para a lógica do nosso componente de cache de imagem personalizado, importaremos expo-file-system:
import * como FileSystem de”expo-file-system”;
Primeiro, precisamos criar um novo caminho local para nossa imagem remota usando o cacheKey (ID exclusivo) para verificar se ele já existe no cache local e, se não, baixe-o.
Precisamos inicializar os adereços que vamos receber:
const CustomFastImage=(props)=> { const { fonte: {uri}, cacheKey, estilo, }=adereços;
…
E a função para obter a extensão da imagem do uri:
function getImgXtension (uri) { var basename=uri.split (/[\\/]/). pop (); return/[.]/.exec(nomedobase)?/[^.]+$/.exec(basename): indefinido;
}
Esta função retorna uma série de extensões. Você pode apenas usar o primeiro item da matriz.
Então, chamaremos esta função para obter a extensão do useEffect Conecte do componente e use a extensão retornada para criar o caminho do cache local para a imagem:
useEffect (()=> { função assíncrona loadImg () { let imgXt=getImgXtension (uri); if (! imgXt ||! imgXt.length) { Alert.alert (`Não foi possível carregar a imagem!`); Retorna; } const cacheFileUri=`$ {FileSystem.cacheDirectory} $ {cacheKey}. $ {imgXt [0]}`; } loadImg (); }, []);
FileSystem.cacheDirectory é o caminho do diretório de cache. Você pode alterar isso de acordo com sua preferência.
Agora, precisamos verificar se a imagem neste caminho já existe usando uma função como esta:
função assíncrona findImageInCache (uri) { tentar { let info=await FileSystem.getInfoAsync (uri); return {… info, err: false}; } catch (erro) { Retorna { existe: falso, err: verdade, msg: erro, }; }
}
Adicione para useEffect> loadImg ():
useEffect (()=> { função assíncrona loadImg () { let imgXt=getImgXtension (uri); if (! imgXt ||! imgXt.length) { Alert.alert (`Não foi possível carregar a imagem!`); Retorna; } const cacheFileUri=`$ {FileSystem.cacheDirectory} $ {cacheKey}. $ {imgXt [0]}`; deixe imgXistsInCache=esperar findImageInCache (cacheFileUri); } loadImg (); }, []);
Agora precisamos de uma função para fazer o cache da imagem no armazenamento local se ainda não estiver em cache e retornar a saída desejada:
função assíncrona cacheImage (uri, cacheUri, callback) { tentar { const downloadImage=FileSystem.createDownloadResumable ( uri, cacheUri, {}, ligue de volta ); const baixado=espera downloadImage.downloadAsync (); Retorna { cached: true, err: falso, caminho: baixado.uri, }; } catch (erro) { Retorna { cached: false, err: verdade, msg: erro, }; }
}
Também precisaremos de um const com o gancho useState () para armazenar o caminho da imagem depois de carregada:
const [imgUri, setUri]=useState (“”);
Para uma melhor experiência do usuário, você pode adicionar um ActivityIndicator (ou qualquer indicador de carregamento desse tipo de acordo com sua preferência) e implementá-lo de acordo com a mudança no estado imgUri.
Retorna ( <> {imgUri? (
);
No gancho useEffect, precisamos atualizar o imgUri quando a imagem estiver em cache ou já estiver disponível no armazenamento local:
useEffect (()=> { função assíncrona loadImg () { let imgXt=getImgXtension (uri); if (! imgXt ||! imgXt.length) { Alert.alert (`Não foi possível carregar a imagem!`); Retorna; } const cacheFileUri=`$ {FileSystem.cacheDirectory} $ {cacheKey}. $ {imgXt [0]}`; deixe imgXistsInCache=esperar findImageInCache (cacheFileUri); if (imgXistsInCache.exists) { console.log (“em cache!”); setUri (cacheFileUri); } senão { deixe cached=await cacheImage (uri, cacheFileUri, ()=> {}); if (cached.cached) { console.log (“cache NEw!”); setUri (cached.path); } senão { Alert.alert (`Não foi possível carregar a imagem!`); } } } loadImg (); }, []);
Aqui está o código completo para o componente CustomFastImage que criamos:
import React, {useEffect, useRef, useState} de”react”;
import {Alert, Image, View, ActivityIndicator} de”react-native”;
import * como FileSystem de”expo-file-system”;
function getImgXtension (uri) { var basename=uri.split (/[\\/]/). pop (); return/[.]/.exec(nomedobase)?/[^.]+$/.exec(basename): indefinido;
}
função assíncrona findImageInCache (uri) { tentar { let info=await FileSystem.getInfoAsync (uri); return {… info, err: false}; } catch (erro) { Retorna { existe: falso, err: verdade, msg: erro, }; }
}
função assíncrona cacheImage (uri, cacheUri, callback) { tentar { const downloadImage=FileSystem.createDownloadResumable ( uri, cacheUri, {}, ligue de volta ); const baixado=espera downloadImage.downloadAsync (); Retorna { cached: true, err: falso, caminho: baixado.uri, }; } catch (erro) { Retorna { cached: false, err: verdade, msg: erro, }; }
}
const CustomFastImage=(props)=> { const { fonte: {uri}, cacheKey, estilo, }=adereços; const isMounted=useRef (true); const [imgUri, setUri]=useState (“”); useEffect (()=> { função assíncrona loadImg () { let imgXt=getImgXtension (uri); if (! imgXt ||! imgXt.length) { Alert.alert (`Não foi possível carregar a imagem!`); Retorna; } const cacheFileUri=`$ {FileSystem.cacheDirectory} $ {cacheKey}. $ {imgXt [0]}`; deixe imgXistsInCache=esperar findImageInCache (cacheFileUri); if (imgXistsInCache.exists) { console.log (“em cache!”); setUri (cacheFileUri); } senão { deixe cached=await cacheImage (uri, cacheFileUri, ()=> {}); if (cached.cached) { console.log (“cache NEw!”); setUri (cached.path); } senão { Alert.alert (`Não foi possível carregar a imagem!`); } } } loadImg (); return ()=> (isMounted.current=false); }, []); Retorna ( <> {imgUri? (
};
exportar CustomFastImage padrão;
Conclusão
Neste tutorial, cobrimos tudo o que você precisa saber sobre o cache de imagens no React Native. Vimos como usar react-native-fast-image para armazenar imagens em cache no React Native e também como construir seu próprio componente de cache de imagem do zero.
Para as próximas etapas, você pode considerar adicionar animações, indicadores de carregamento e outros recursos para o componente. Você também pode adicionar um indicador de progresso ou melhor uma função de retorno de chamada usando a API FileSystem .
A postagem Cache de imagens no React Native: um tutorial com exemplos apareceu primeiro no LogRocket Blog .
