As imagens são fáceis de adicionar ao seu aplicativo React Native. Obtenha todos os prós e contras do componente Image integrado.

As imagens fornecem muito valor para aplicativos móveis. Eles podem ajudar a ilustrar conceitos, transmitir informações, criar interesse visual e fornecer contexto para conteúdo específico que você pode não querer que os usuários do seu aplicativo percam.

O componente React Native Image

O componente de imagem React Native é o componente padrão fornecido pela biblioteca React Native para renderizar imagens em seus aplicativos móveis. O componente pode carregar imagens de fontes locais e remotas. Ele fornece vários acessórios para personalização e estilo das imagens renderizadas.

Para usar o componente de imagem em seu aplicativo, importe Imagem de react-native biblioteca:

importar Reagir de'reagir';
importar { Folha de estilo, imagem, visualização } de'reagir nativo';
const aplicativo = () => {
retornar (

 estilo={estilos.imagem}
 fonte={exigir('./assets/minha-imagem.jpg')}
 />
 </View>
 );
};





instagram viewer

const estilos = StyleSheet.create({
 recipiente: {
 flexível: 1,
 itens de alinhamento: 'Centro',
 justificarConteúdo: 'Centro',
 },
 imagem: {
 largura: 200,
 altura: 200,
 borderRadius: 100,
 },
});

Acima é um simples Aplicativo componente com uma imagem. O Imagem componente leva um estilo suporte que define o largura, altura, e borderRadius da imagem. Também leva um fonte prop que carrega a imagem de um arquivo local localizado na pasta "assets" dentro do diretório app. O fonte prop define o caminho da imagem a ser incluída e pode aceitar fontes de imagens locais e de rede/remotas.

As imagens locais estão disponíveis no dispositivo do usuário e você pode armazená-las temporária ou permanentemente. Você pode armazenar imagens locais no diretório do projeto do aplicativo, como um ativos pasta. Você também pode localizar imagens fora do diretório do aplicativo, como no rolo da câmera ou na biblioteca de fotos do dispositivo. Aqui está um exemplo de um caminho de origem para uma imagem local:

uri: 'arquivo:///caminho/para/minha-imagem.jpg' }} />

As imagens de rede são entregues via web. Eles podem incluir URLs HTTP/HTTPS ou URIs de dados codificados em base64, que incorporam dados diretamente na URL usando o esquema de codificação Base64.

Adereços para personalizar o componente de imagem

Existem vários adereços que você pode usar para estilizar e personalizar o componente React Native Image.

resizeMode

O resizeMode prop determina como o React deve redimensionar e posicionar uma imagem dentro de seu contêiner. Existem vários valores disponíveis para resizeMode, cada um dos quais afetará a imagem de maneira diferente.

  • cobrir: esse valor dimensionará a imagem uniformemente para que ambas as dimensões sejam iguais ou maiores que o elemento que a contém. A imagem é então centralizada dentro do contêiner. O uso desse valor pode fazer com que a imagem seja cortada para manter a proporção.
  • conter: isso tentará ajustar e centralizar a imagem perfeitamente dentro das dimensões do contêiner. No entanto, isso pode resultar em espaço vazio ao redor das bordas da imagem.
  • esticar: O esticar value estica a imagem para preencher todo o contêiner, independentemente da proporção. Às vezes, causando a distorção da imagem.
  • repita: esse valor repete a imagem horizontal e verticalmente para preencher todo o contêiner.
  • Centro: isso centralizará a imagem no elemento contêiner sem dimensioná-la.

carregando

Isto é um função de retorno de chamada que é executado quando a imagem termina de carregar. Você pode usá-lo para executar ações após o carregamento da imagem, como atualizar o estado do componente ou exibir uma mensagem para o usuário.

onError

O onError prop será executado se ou quando a imagem falhar ao carregar. Ele fornece uma maneira de executar as ações necessárias se houver um erro ao tentar carregar a imagem. Você pode exibir uma mensagem de erro para o usuário ou tentar carregar a imagem novamente.

fonte padrão

Este prop especifica uma imagem de fallback para exibir se a imagem principal falhar ao carregar. Você pode usá-lo para fornecer uma imagem padrão ou uma imagem de espaço reservado enquanto a imagem principal está sendo carregada.

Manipulando imagens remotas de uma API

Pode ser necessário obter a imagem para seu aplicativo de uma API ou servidor remoto e exibi-la em seu aplicativo. Você pode usar o React embutido buscar função ou um Biblioteca de solicitações de API como Axios para este fim.

Aqui está um exemplo de como buscar e exibir uma imagem de uma API remota usando o buscar função:

const [imageUri, setImageUri] = useState(nulo);
useEffect(() => {
 buscar(' https://example.com/api/images/1')
 .então(resposta => resposta.json())
 .então(dados => setImageUri (data.url))
 .pegar(erro =>console.erro (erro));
}, []);
retornar (

 {imageUri? (
uri: imageUri }} />
 ): (
Carregando...</Text>
 )}
 </View>
);

A execução desse código em seu aplicativo buscará uma imagem do link API remoto definido. O exemplo primeiro cria uma variável de estado para o imageUri. dentro de um useEffect gancho, o buscar A função recupera o imageUri e o armazena na variável de estado usando setImageUri().

Finalmente, torna o Imagem componente com o fonte prop definido como o URI da imagem enquanto um indicador de carregamento é exibido, aguardando a exibição da imagem.

Usando a proposta de política de cache para controlar o comportamento do cache

Seu navegador pode armazenar em cache as imagens que carrega de URLs remotos, para que possa carregá-las novamente rapidamente no futuro. Você pode personalizar o comportamento da imagem em cache usando o cache suporte. Este prop pode especificar como um navegador deve armazenar em cache a imagem e como deve invalidar esse cache.

A cache prop pode receber valores como padrão, recarregar, forçar cache, e apenas se armazenado em cache.

Aqui está um exemplo de como usar o cache prop para controlar o comportamento do cache de uma imagem:

 fonte={{
 uri: ' https://example.com/images/my-image.png',
 Cache: 'force-cache',
 cacheKey: 'minha imagem',
 imutável: verdadeiro
 }}
/>

O cache propriedade está definida como 'force-cache', que indica que o navegador deve carregar a imagem do cache se estiver disponível, mesmo que a versão do cache seja antiga.

um novo adereço cacheKey também está em jogo aqui. Está definido para 'minha imagem', que servirá como uma chave de cache personalizada que você pode usar para referenciar a imagem em cache posteriormente.

Também o imutável propriedade está definida como verdadeiro, que informa ao navegador para tratar essa entrada de cache como imutável e nunca invalidá-la.

Tudo o que há sobre imagens

O componente React Native Image fornece um meio poderoso e flexível para exibir imagens, incluindo estilização, manipulação de imagens remotas e controle do comportamento do cache.

Para imagens remotas, você sempre pode usar um espaço reservado para exibir uma imagem ou texto temporário enquanto a imagem remota está sendo carregada. Isso criará uma melhor experiência do usuário, fornecendo feedback visual imediato e evitando que o aplicativo pareça não responder.