Exibindo imagens com o componente React Native Image

Em uma era governada pelo valor estético do seu produto, as imagens são cruciais para comunicar a distinção e exclusividade do seu produto. As imagens ajudam a comunicar as ideias, soluções e identidades dos produtos que construímos.

Como desenvolvedores, devemos ter as melhores ferramentas para alcançar essas qualidades-e é isso que o componente React Native Image nos capacita a fazer. Neste artigo, vamos mergulhar nos fundamentos do componente React Native Image , discutir os tipos e acessórios disponíveis e cobrir suas limitações e alternativas.

Tipos de imagem

Antes de mergulharmos nos detalhes do componente de imagem, vamos revisar os vários tipos de imagens que temos para aplicativos móveis e, especificamente, os tipos de imagem que o componente React Native Image espera.

• Imagens locais: imagens disponíveis no dispositivo do usuário que são usadas temporariamente ou encontradas no rolo da câmera
• Imagens de rede: imagens fornecidas pela web, como imagens encontradas e carregadas do Google
• Recursos estáticos: recursos disponíveis no dispositivo que são sempre os mesmos-não são carregados dinamicamente, nem mudam

Propriedades

O componente React Native Image fornece algumas propriedades que você pode usar para configurar o componente e exibir as imagens de acordo com as necessidades técnicas ou comerciais de sua equipe. Existem alguns deles, mas vamos nos concentrar nos básicos por enquanto.

source

Esta é a propriedade principal que informa ao componente sobre a imagem que você deseja carregar. Você pode usar um arquivo local ou remoto aqui e, basicamente, apenas passar o URI da imagem para carregá-la. Se você precisar especificar as dimensões de largura e altura da imagem, também pode passar vários URIs por ela e deixar para o dispositivo selecionar o melhor para uso.

source também aceita uma propriedade de cache que informa ao componente como armazenar imagens de rede em cache, mas isso só funciona para iOS.

defaultSource

Esta propriedade é útil quando seu componente espera carregar uma imagem de rede. Uma imagem padrão pode ser especificada, que será carregada até que a imagem de rede esteja disponível.

resizeMode

Este adereço controla como as imagens são ajustadas quando suas dimensões não se ajustam ao tamanho do quadro. Os valores disponíveis são:

• cover : dimensiona a largura e a altura da imagem para ser igual ou maior que o tamanho da visualização
• contain : o oposto da propriedade da capa, contain dimensiona a largura e a altura da imagem para ser igual ou menor que o tamanho da visualização
• stretch : dimensiona a largura e a altura independentemente uma da outra
• repetir : repete a imagem para cobrir a visão até que seja preenchida
• center : centraliza a imagem na visualização ao longo de ambas as dimensões
• style : usado para estilizar o componente da imagem

Se estiver interessado, você pode navegar por outros adereços no Reaja a documentação nativa.

Imagens de fundo no React Native

CSS é normalmente a linguagem usada para adicionar imagens de fundo, mas o React Native fornece um componente ImageBackground que disponibiliza funcionalidade semelhante em aplicativos da web. O componente ImageBackground também aceita os mesmos adereços que o componente Image aceita.

Usando o componente React Native Image

Agora que superamos a teoria, vamos sujar as mãos com uma demonstração. Para começar, você deve usar esta configuração de ambiente React Native . Para este tutorial, estou seguindo as instruções de instalação e configuração da Expo.

Se desejar acompanhar, você pode clonar este repositório e check-out para a ramificação startup . O código final está na ramificação principal .

Primeiro, vamos adicionar uma imagem de plano de fundo ao aplicativo. Para esta demonstração, adicionei uma imagem chamada “static-image” no diretório src/assets . Vamos usá-lo para demonstrar como o React Native carrega imagens estáticas.

Abra App.js e adicione o seguinte código:

 importar {StatusBar} de"expo-status-bar";
importar React de"react";
import {StyleSheet, Text, View, ImageBackground} de"react-native"; const staticImage=require ("./src/assets/static-image.png");
função padrão de exportação App () { Retorna (    {/* TODO: algo vai aqui */}   );
} estilos const=StyleSheet.create ({ container: { flex: 1, backgroundColor:"#fff", alignItems:"center", justifyContent:"center", }, ImageBackground: { flex: 1, resizeMode:"cover", largura:"100%", alignItems:"center", }, });

Como você pode ver, importamos o ImageComponent e, em seguida, armazenamos a localização da imagem estática em uma variável chamada staticImage<✓. The CommonJS A sintaxe é usada para informar ao servidor metro quando carregar a imagem no pacote do aplicativo. As instruções require dizem ao servidor metro para incluir a imagem no pacote.

 const [carregando, setLoading]=React.useState (falso);

  {IMAGES.map ((imagem, i)=> { Retorna (   setLoading (true)} onLoadEnd={()=> setLoading (false)} /> {carregando && }  ); })} 

 ImageContainer: { marginHorizontal: 16, marginTop: 30, largura:"100%", }, Imagem: { shadowColor:"preto", shadowOffset: { largura:-10, altura: 9, }, shadowOpacity: 0,5, shadowRadius: 2, elevação: 5 },