React Native

Trabalhando com Listas: O Poder da FlatList React Native

Imagine que você está criando um app como o Instagram ou o WhatsApp. Como o celular consegue exibir milhares de mensagens ou fotos sem travar? A resposta não é carregar tudo de uma vez, mas usar uma técnica chamada Reciclagem de Elementos. A a ferramenta mestre para isso é a FlatList React Native.

1. Por que não usar o ScrollView?

O ScrollView carrega todos os itens da lista na memória de uma só vez. Se você tiver 1.000 itens, o app vai ficar lento ou fechar. Já a FlatList é inteligente: ela só renderiza os itens que estão aparecendo na tela. Conforme você rola, ela “destrói” o que saiu por cima e “cria” o que está vindo por baixo.

2. A Anatomia da FlatList React Native

Para funcionar, a FlatList precisa de três “ingredientes” principais:

  1. data: O array (lista) com as suas informações.
  2. renderItem: A função que diz como cada item deve aparecer (o “desenho” da linha).
  3. keyExtractor: Um RG único para cada item, para que o React não se confunda.

3. Prática de Laboratório: Lista de Tarefas

Vamos criar uma lista simples de tecnologias que um desenvolvedor de sistemas precisa dominar.

Prompt Sugerido (Toque para selecionar)
import React from 'react'; import { View, Text, StyleSheet, FlatList, StatusBar } from 'react-native';const tecnologias = [ { id: '1', nome: 'React Native', nivel: 'Avançado' }, { id: '2', nome: 'JavaScript', nivel: 'Intermediário' }, { id: '3', nome: 'TypeScript', nivel: 'Iniciante' }, { id: '4', nome: 'Node.js', nivel: 'Intermediário' }, { id: '5', nome: 'SQL', nivel: 'Avançado' }, ];export default function ListaApp() { // Criamos o componente que representa UMA linha da lista const Item = ({ nome, nivel }) => ( <View style={estilos.item}> <Text style={estilos.nome}>{nome}</Text> <Text style={estilos.nivel}>{nivel}</Text> </View> );return ( <View style={estilos.container}> <StatusBar barStyle="light-content" /> <Text style={estilos.titulo}>Minhas Tecnologias</Text> <FlatList data={tecnologias} renderItem={({ item }) => <Item nome={item.nome} nivel={item.nivel} />} keyExtractor={item => item.id} style={estilos.listaConteudo} /> </View> ); }const estilos = StyleSheet.create({ container: { flex: 1, backgroundColor: '#121212', paddingTop: 50 }, titulo: { fontSize: 24, fontWeight: 'bold', color: '#FFF', textAlign: 'center', marginBottom: 20 }, listaConteudo: { paddingHorizontal: 20 }, item: { backgroundColor: '#1E1E1E', padding: 20, borderRadius: 10, marginBottom: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderLeftWidth: 5, borderLeftColor: '#6200ee' }, nome: { color: '#FFF', fontSize: 18, fontWeight: '600' }, nivel: { color: '#BB86FC', fontSize: 14 } });

🧠 Pensamento Analítico: O Desafio da Performance

Observe que usamos o contentContainerStyle na FlatList React Native em vez de apenas style. Desafio: Tente adicionar 50 itens à sua lista e observe como a rolagem permanece fluida. O que aconteceria se tentássemos colocar uma imagem (Image) dentro de cada item da lista? Como o desempenho seria afetado?

⬅️ Artigo Anterior: Dominando Modais: O Padrão Bottom Sheet

➡️ Próximo Passo: Consumindo APIs: Conectando seu App ao Mundo

Compartilhe:

prof.wsp

Profissional engajado com as últimas tendências tecnológicas e de gestão, buscando continuamente aprimorar suas competências e compartilhar seu conhecimento.

view all posts

Postagens relacionadas

Publicar comentário

Vale a pena conferir