Um mergulho profundo no React Native FlatList

Considere uma situação em que você deseja exibir uma lista de itens de uma API. Por exemplo, a resposta da API Coffee é parecida com esta:

Uma maneira possível de exibir isso para o cliente é usar o método de mapa nesta matriz da seguinte maneira:

const data=getDataFromAPI (); return ( {data && ( Seus dados foram carregados! Aqui está o resultado: {data.map ((item)=> ( {item.name} ))} )} );

Aqui, estamos usando renderização condicional para verificar se os dados foram carregados. Se verdadeiro, notificaremos o usuário e exibiremos a lista na tela.
Esta será a saída:

O código deve funcionar. Então, por que nossa lista não está visível?

É aqui que entra FlatList para mitigar esse problema. É um componente React Native que permite renderizar listas sem complicações e código mínimo.

Sintaxe FlatList

FlatList usa a seguinte sintaxe:

import {FlatList} from”reagir-nativo”; ; Na prop de dados, você digitará a matriz que deseja exibir. Podem ser dados JSON de uma API. A propriedade keyExtractor recuperará uma chave exclusiva para cada item na matriz
N.B., se a sua matriz contiver uma chave ou campo de id, você não precisa incluir esta propriedade. Por padrão, FlatList irá procurar a propriedade key ou id. renderItem dirá ao React Native como renderizar os itens da lista

Exemplo de uso

Agora que cobrimos a sintaxe, vamos usá-la para renderizar nossa lista:

//os dados array contém nosso array de itens. dados const=[{id: 1, título:”Preto”, descrição:””},…]; const Item=({title, description})=> ( {title} {description} ); const renderItem=({item})=> (); return ( {data && ( item.id}/>)} );

Vamos desconstruir este código peça por peça:

O componente Item aceitará dois adereços: título e descrição. Este componente irá exibi-los na IU. A função renderItem irá renderizar o componente Item para cada item na matriz. Como resultado, isso exibirá os campos de título e descrição de cada objeto. Além disso, o prop keyExtractor diz ao React Native que ele deve usar o campo id como uma chave. No final, usamos a renderização condicional para renderizar os dados com o FlatList React Native elemento

Exibindo dados de uma API

No mundo real, os desenvolvedores do React Native podem ter que lidar com a renderização de dados da API em listas.

No código abaixo , estamos obtendo dados de a API Coffee e conectando-os em nosso componente FlatList:

função padrão de exportação App ( ) {const [data, setData]=useState (null); const getData=async ()=> {const resp=await fetch (“https://api.sampleapis.com/coffee/hot”); dados const=aguarda resp.json (); setData (dados); };//na primeira montagem, busca dados. useEffect (()=> {getData ();}, []); const Item=({title, description, index})=> ( {index}. {title} {description} ); const renderItem=({item, index})=> (); return ( {data && ()} ); }

Algumas inferências a partir deste código:

Quando o componente do aplicativo é renderizado pela primeira vez, o React invoca o método getData. Isso fará uma solicitação GET para a API. Na função renderItem, também estamos usando o argumento index. Este é o índice correspondente ao item atual na matriz Observe que não estamos usando a propriedade keyExtractor. Isso ocorre porque um campo de id já está presente, então FlatList o usará como a chave

Personalização de FlatList

Componente de cabeçalho

FlatList também tem suporte para componentes do cabeçalho. Isso pode ser útil nos casos em que você deseja exibir uma barra de pesquisa no topo de um inventário de contatos.
A prop ListHeaderComponent pode ajudá-lo a fazer isso:

import {Divider} from”react-native-elementos”; const header=()=> {return ( Lista de cafés ); }; return ( {data && ()} );

No bloco de código acima, primeiro criamos uma função de cabeçalho e depois a passamos para nossa propriedade ListHeaderComponent. Isso produzirá um componente Text and Divider simples na parte superior do componente FlatList.

Componente de rodapé

Considere uma situação em que o usuário rolou totalmente para baixo e deseja volte para cima. Aqui, seria sensato mostrar um botão que levasse o cliente de volta automaticamente. Nesse caso, você pode anexar um componente de rodapé à sua lista. Isso indicará que a lista foi concluída.

Você pode fazer isso por meio da prop ListFooterComponent da seguinte forma:

//Este será nosso componente de rodapé const endComponent=()=> {return ( Lista finalizada ); }; return ( {data && ()} );

Separadores

Os componentes do separador ajudam o usuário a distinguir cada elemento da lista. Isso contribui para uma melhor experiência e interface do usuário.

Para conseguir isso, use a proposta ItemSeparatorComponent da seguinte maneira:

const separator=()=> {return ; }; return ( {data && ()} );

Lidando com listas vazias

Digamos que você construiu um aplicativo de anotações no React Native. Se o usuário não tiver registros, seria adequado mostrar a mensagem “Nenhuma nota encontrada”.

Para isso, a prop ListEmptyComponent é útil:

const data=[];//array vazio const handleEmpty=()=> {return Nenhum dado presente! ; }; return ( {! data && Carregando } {data && ()} );

Métodos de navegação FlatList

FlatList também inclui algumas funções utilitárias para operações relacionadas à rolagem.

Role para o fim

Suponha que você tem uma lista contendo centenas de itens. Aqui, seria bom exibir um botão que permite ao usuário descer até o fim. Isso resultará em uma melhor experiência do usuário, pois o usuário não precisa rolar manualmente até o final, economizando tempo.

Para tornar isso possível, você pode usar o método scrollToEnd da seguinte maneira:

lista const=useRef (null); const press=()=> {list.current.scrollToEnd ({animado: verdadeiro}); }; const header=()=> {return press ()} title=”Ir para o fim”/>; }; return ( {! data && Carregando } {data && ()} );

Neste trecho de código, criamos um useRef Hook que nos concederá acesso às funções utilitárias do FlatList. Quando o usuário clica no elemento Button, o aplicativo executa o método scrollToEnd.

Navegando para um item de índice específico

Podemos até rolar para um item específico chamando o método scrollToIndex da seguinte forma:

const list=useRef (null); const press=()=> {//rolar para o 12º item no índice. list.current.scrollToIndex ({animado: verdadeiro, índice: 12}); }; const header=()=> {return

press ()} title=”Vá para o 12º índice”/>; }; return ( {! data && Carregando } {data && ()} );

Neste snippet de código, dissemos ao React que se o usuário clicar no botão, ele deve redirecionar o usuário para o décimo segundo item na matriz.

Práticas recomendadas

Evite funções anônimas

Tente evitar o uso de funções anônimas em sua FlatList. A equipe do React Native sugere isso para que a função não se recrie toda vez que sua lista for exibida. Isso economiza memória e recursos da CPU:

//maneira correta: nenhuma função anônima const renderItem=({item, index})=> ( {index}. {Item.title} ); {data && ( item.id} renderItem={renderItem}/>); }//o caminho errado. Fique longe disso: {data && ( item.id} renderItem={({item, index})=> ( {index}. {Item.title} )}/>); }

Componentes mais leves

Quanto mais pesados ​​são os componentes, mais memória eles ocupam. Exiba o mínimo de informações possível sobre o item da lista. Como um bônus, isso faz sua IU parecer mais limpa.

Mesmo se você tiver itens que precisam exibir muito texto, você pode usar Navegação do React . Se o usuário tocar em qualquer item, o React o direcionará para uma página separada que mostrará os detalhes restantes. Aqui está um exemplo:

Conclusão

Neste artigo, cobrimos o uso do FlatList do React Native, suas funções úteis e opções de personalização. É um componente crucial se você deseja renderizar listas em seu aplicativo React Native . É uma brisa absoluta de usar e é sólido como uma rocha.

Obrigado por ler! Boa codificação.