Componentes: De <div> a <View>

No React para a web, o coração de tudo é a componentização de elementos HTML. No React Native, a filosofia é idêntica, mas as peças do nosso quebra-cabeça são outras. Nesta seção, vamos aprender quais são os blocos de construção fundamentais de um aplicativo e como eles se comparam ao que já conhecemos do mundo web.

A Mentalidade é a Mesma, as Ferramentas Mudam

A boa notícia é que você não precisa reaprender a pensar. A ideia de criar componentes pequenos, reutilizáveis e com responsabilidade única continua sendo o pilar do desenvolvimento. Um componente de Card continuará sendo um Card, e um Button continuará sendo um Button. O que muda são os elementos que usamos dentro desses componentes para dar-lhes forma e função.

Traduzindo o HTML para o Nativo

No React Native, não temos acesso a tags HTML como <div>, <p> ou <span>. Em vez disso, importamos um conjunto de componentes essenciais da biblioteca react-native que são traduzidos para os elementos de interface nativos do iOS e do Android.

Os mais importantes são:

• <View>: O novo <div>
  O <View> é o contêiner mais fundamental para layout. Pense nele como uma <div> sem nenhuma estilização. Ele serve para agrupar outros componentes e organizar a estrutura da sua tela.
• <Text>: O único lugar para textos
  Esta é uma regra de ouro: qualquer texto que você queira exibir na tela precisa, obrigatoriamente, estar dentro de um componente <Text>. Diferente da web, onde textos podem viver soltos, no React Native isso causará um erro.
• Outros Essenciais:
  • <Image>: Para exibir imagens locais ou remotas.
  • <TextInput>: O equivalente ao <input type="text">.
  • <TouchableOpacity>: A forma mais comum de se criar botões e áreas clicáveis, dando um feedback visual de opacidade ao toque.

Veja um exemplo simples que combina esses componentes:

1

Renderizando Listas com FlatList

No React para a web, é muito comum usarmos a função .map() para renderizar uma lista. Embora isso funcione no React Native para listas pequenas, pode causar sérios problemas de performance em listas longas. O motivo é que o .map() renderiza todos os itens de uma só vez, consumindo muita memória.

A solução nativa para isso é o componente <FlatList>.

A <FlatList> é inteligente. Ela renderiza apenas os itens que estão visíveis na tela e "recicla" os componentes à medida que o usuário rola a lista. Para usá-la, precisamos passar três props principais:

1. data: O array de dados que você quer renderizar.
2. renderItem: Uma função que recebe um item do seu array e retorna o componente JSX que deve ser exibido para aquele item.
3. keyExtractor: Uma função que recebe um item e retorna uma string única para ser usada como a key do React.

Vamos ver um exemplo de uma lista de tarefas:

1

Com esses componentes básicos em mãos, você já tem o necessário para construir a estrutura de praticamente qualquer tela de um aplicativo.