React Native

Componentes Essenciais da Interface

View • Text • Image

ScrollView • FlatList • SectionList

TextInput • Button • TouchableOpacity • Modal

Objetivos da Aula

Ao final da aula o aluno deverá ser capaz de:

• Entender os principais componentes básicos do React Native
• Criar interfaces simples
• Manipular listas de dados
• Capturar entrada de usuário
• Criar interações com botões
• Exibir modais

O que são Componentes?

Em React Native, toda interface é composta por componentes.

Um componente é um bloco reutilizável de interface.

Exemplo:

• Caixa
• Texto
• Botão
• Lista
• Campo de entrada

Pense em componentes como peças de LEGO que formam a interface.

Estrutura básica de um App

import { View, Text } from 'react-native'

export default function App() {
  return (
    <View>
      <Text>Olá React Native</Text>
    </View>
  )
}

• View → container
• Text → exibe texto

View

O container básico do React Native

A View funciona como uma div do HTML.

Ela serve para:

• Agrupar componentes
• Organizar layout
• Aplicar estilos

Exemplo View

import { View, Text } from 'react-native'

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Text>Primeiro Texto</Text>
      <Text>Segundo Texto</Text>
    </View>
  )
}

A View organiza os elementos dentro dela.

Text

Exibição de texto

Diferente do HTML, todo texto deve estar dentro de Text.

Exemplo Text

import { Text } from 'react-native'

export default function App() {
  return (
    <Text>
      Bem vindo ao React Native
    </Text>
  )
}

Não é possível escrever texto diretamente fora de Text.

Image

Exibir imagens no aplicativo

Pode carregar imagens:

• locais
• da internet

Exemplo Image

import { Image } from 'react-native'

export default function App() {
  return (
    <Image
      source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
      style={{ width: 100, height: 100 }}
    />
  )
}

Sempre definir width e height.

ScrollView

Área com rolagem

Usado quando o conteúdo é maior que a tela.

Exemplo ScrollView

import { ScrollView, Text } from 'react-native'

export default function App() {
  return (
    <ScrollView>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
      <Text>Item 4</Text>
      <Text>Item 5</Text>
    </ScrollView>
  )
}

Ideal para conteúdo pequeno ou médio.

FlatList

Lista otimizada

Usada para listas grandes de dados.

Ela renderiza apenas os itens visíveis na tela.

Isso melhora muito a performance.

Exemplo FlatList

import { FlatList, Text } from 'react-native'

export default function App() {

  const dados = [
    { id: '1', nome: 'João' },
    { id: '2', nome: 'Maria' },
    { id: '3', nome: 'Pedro' }
  ]

  return (
    <FlatList
      data={dados}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Text>{item.nome}</Text>
      )}
    />
  )
}

SectionList

Lista agrupada por seções

Permite organizar dados em categorias.

Exemplo:

• Frutas
• Bebidas
• Doces

Exemplo SectionList

import { SectionList, Text } from 'react-native'

export default function App() {

  const dados = [
    {
      title: 'Frutas',
      data: ['Maçã', 'Banana', 'Laranja']
    },
    {
      title: 'Bebidas',
      data: ['Água', 'Suco', 'Refrigerante']
    }
  ]

  return (
    <SectionList
      sections={dados}
      keyExtractor={(item, index) => index}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section }) => (
        <Text>{section.title}</Text>
      )}
    />
  )
}

TextInput

Campo de entrada de texto

Permite que o usuário digite informações.

Exemplos:

• login
• senha
• busca

Exemplo TextInput

import { TextInput } from 'react-native'

export default function App() {
  return (
    <TextInput
      placeholder="Digite seu nome"
      style={{
        borderWidth: 1,
        padding: 10
      }}
    />
  )
}

Button

Botão simples

Executa uma ação quando pressionado.

Exemplo Button

import { Button } from 'react-native'

export default function App() {
  return (
    <Button
      title="Clique aqui"
      onPress={() => alert("Botão pressionado")}
    />
  )
}

O onPress define o que acontece ao clicar.

TouchableOpacity

Botão customizável

Muito usado para criar botões personalizados.

Quando pressionado, ele reduz a opacidade.

Exemplo TouchableOpacity

import { TouchableOpacity, Text } from 'react-native'

export default function App() {
  return (
    <TouchableOpacity
      onPress={() => alert("Clicou")}
      style={{
        backgroundColor: 'blue',
        padding: 15
      }}
    >
      <Text style={{ color: 'white' }}>
        Botão personalizado
      </Text>
    </TouchableOpacity>
  )
}

Modal

Janela sobreposta

Modal é uma janela que aparece sobre o conteúdo da tela.

Exemplos:

• confirmação
• login
• aviso

Exemplo Modal

import { Modal, View, Text, Button } from 'react-native'
import { useState } from 'react'

export default function App() {

  const [visivel, setVisivel] = useState(false)

  return (
    <View>

      <Button
        title="Abrir Modal"
        onPress={() => setVisivel(true)}
      />

      <Modal visible={visivel}>
        <View>
          <Text>Olá, este é um modal!</Text>
          <Button
            title="Fechar"
            onPress={() => setVisivel(false)}
          />
        </View>
      </Modal>

    </View>
  )
}

Comparação dos Componentes

Exercício Prático

Criar uma tela contendo:

• Um título
• Uma imagem
• Um campo de texto
• Um botão
• Uma lista de nomes
• Um modal ao clicar no botão

Objetivo:

Construir uma pequena interface de cadastro simples.

Conclusão

Hoje aprendemos os principais componentes de interface do React Native.

Eles são a base para qualquer aplicativo:

• organização de layout
• interação com usuário
• exibição de dados

Dominar esses componentes é essencial para evoluir no desenvolvimento mobile.