Módulo 2 BÁSICO

Atividade 8: Trabalhando com Imagens

Um app sem fotos é um app triste. Vamos aprender a usar o componente Image!

🎯 Objetivos desta aula

  • ✓ Usar o componente nativo <Image>
  • ✓ Aprender a carregar imagens locais (do projeto) e da Internet (URLs)
  • ✓ Usar a propriedade resizeMode para controlar recortes e encaixes

🖼️ O Componente Image

No HTML usamos a tag <img src="...">. No React Native, usamos o componente <Image source={...} />. Lembre-se que ele não tem tag de fechamento dupla e precisamos dizer qual a origem da foto.

1. Imagem Local (Do Projeto)

Estão salvas na pasta assets/. Usamos a função auxiliar require().

<Image 
  source={require('./assets/logo.png')} 
  style={styles.logo}
/>

2. Imagem da Web (URL)

Vêm da internet. Passamos um objeto indicando a propriedade uri.

<Image 
  source={{ uri: 'https://site.com/foto.jpg' }} 
  style={styles.fotoUrl}
/>
⚠️ Imagens URI exigem que você defina largura e altura (width/height) no estilo, caso contrário elas desaparecem (ficam invisíveis com tamanho 0x0)!

Como a imagem se ajusta à caixa? (resizeMode)

O que acontece se uma foto retangular for obrigada a caber numa View quadrada? A propriedade resizeMode resolve isso:

  • 🎯 'cover': A foto preenche sua caixa inteira (pode dar zoom e cortar as sobras). (Mais usado!)
  • 🎯 'contain': Mostra a foto inteira sem cortar, mas pode deixar faixas em branco (vazias) nas laterais se a proporção não bater.
  • 🎯 'stretch': Estica e esmaga a foto para preencher a caixa toda (a foto fica distorcida/feia).

💻 Exemplo Prático

Neste exemplo carregamos uma imagem bonitinha da web usando uma URL através do uri:

App.js 
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      
      <Text style={styles.titulo}>Meu Pet Avatar</Text>
      
      {/* Imagem vinda da Internet (URI) */}
      <Image 
        source={{ uri: 'https://images.unsplash.com/photo-1543852786-1cf6624b9987?w=300&h=300&fit=crop' }} 
        style={styles.avatarFoto}
        resizeMode="cover"
      />

      <Text style={styles.nome}>Rex, O Gato</Text>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#111827',
  },
  titulo: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 30
  },
  avatarFoto: {
    width: 200,      // Largura da foto
    height: 200,     // Altura da foto
    borderRadius: 100, // Raio da borda = metade da altura vira um círculo perfeito!
    borderWidth: 4,
    borderColor: '#3b82f6',
    marginBottom: 20 // Espaço abaixo da imagem
  },
  nome: {
    fontSize: 18,
    color: '#9ca3af'
  }
});

🎮 Desafios Práticos

Copie o app do "Pet Avatar" acima pro Snack e vamos manipulá-lo!

DESAFIO 1

Modificar 🛠️

  • O App precisa do seu pet: encontre o link (uri) de uma imagem quadrada de um cachorro ou do seu pet na internet, e troque na propriedade source! Lembre-se que o link vai entre aspas simples: 'https://...'
  • Modifique também o texto que diz "Rex, O Gato" para o nome do seu novo pet.
DESAFIO 2

Melhorar 🚀

Explore a ResizeMode quebrando a caixa.

  • Desfaça o círculo. No StyleSheet `avatarFoto`, mude o borderRadius: 100 para borderRadius: 10. Ele voltará a ser quadrado.
  • Teste visualmente mudando o resizeMode="cover" direto na Tag do Componente Image (no painel principal do JS) para "stretch" e veja como a foto estica caso não seja originamente quadrada!
DESAFIO 3

Criar ✨

Uma galeria dupla.

  • Logo abaixo da tag Image original, crie mais COPIAS dela, apontando para outras imagens da internet.
  • Tente alterar a Largura/Altura (width e height) das imagens originais para 100 para caberem várias menores. O que aconteceu com o Flexbox pai? A tela centralizou os itens abaixo um do outro né?

📝 Quiz - Teste seus conhecimentos

Anterior ← Atividade 7 Próxima Atividade 9 →