Nos momentos de lazer, quando estamos navegando na web, ou usando um aplicativo muitas vezes continuamos a ler arrastando para cima incontáveis vezes, e sempre temos novos conteúdos para usufruir. Já se perguntou como isso é possível ou até mesmo como inserir esta "rolagem infinita" na sua própria aplicação? Neste artigo, iremos analisar como utilizar o Scroll Infinite, e aplicar tal prática numa aplicação real.
O Scroll Infinito é uma técnica popular no desenvolvimento de aplicativos móveis e web para melhorar a experiência do usuário. Ele permite que o usuário role a página sem limites e, assim, carregar mais conteúdo dinamicamente conforme ele se aproxima do final da página. No React Native, é possível implementar o Scroll Infinito usando componentes nativos e bibliotecas populares de gerenciamento de estado.
Vamos explorar como criar um Scroll Infinito no React Native usando a API PokeAPI para carregar dinamicamente dados a partir de uma API.
Instalando as dependências -
Para começar, precisamos instalar as dependências em nossa aplicação. Para isso, execute o seguinte comando no terminal:
npm install react-native-infinite-scroll axios
Criando o componente -
Em seguida, podemos criar nosso componente de Scroll Infinito. Para isso, precisamos de um componente de lista, como o FlatList ou ScrollView, que suporte a rolagem e um componente de item que renderize cada item da lista.
Vamos criar uma lista simples de Pokémon que serão carregados dinamicamente à medida que o usuário rola para baixo. Para isso, vamos usar a API PokeAPI, que retorna uma lista de Pokémon. Crie um novo arquivo chamado PokemonList.js e adicione o seguinte código:
import React, { useState, useEffect } from 'react';
import { View, Text, Image, FlatList } from 'react-native';
import InfiniteScroll from 'react-native-infinite-scroll';
import axios from 'axios';
const API_URL = 'https://pokeapi.co/api/v2/pokemon/';
const PokemonList = () => {
const [pokemon, setPokemon] = useState([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
useEffect(() => {
loadPokemon();
}, []);
const loadPokemon = async () => {
setLoading(true);
try {
const response = await axios.get(`${API_URL}?limit=10&offset=${(page - 1) * 10}`);
setPokemon([...pokemon, ...response.data.results]);
setPage(page + 1);
setLoading(false);
} catch (error) {
console.log(error);
setLoading(false);
}
};
const renderItem = ({ item }) => {
const { name, url } = item;
const id = url.split('/')[6];
return (
<View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10 }}>
<Image
source={{ uri: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png` }}
style={{ width: 50, height: 50 }}
/>
<Text style={{ marginLeft: 10, fontSize: 16 }}>{name}</Text>
</View>
);
};
const renderFooter = () => {
if (loading) {
return (
<View style={{ alignItems: 'center', justifyContent: 'center', padding: 10 }}>
<Text>Carregando...</Text>
</View>
);
}
return null;
};
return (
<InfiniteScroll
horizontal={false}
data={pokemon}
renderItem={renderItem}
keyExtractor={(item) => item.name}
onEndReached={loadPokemon}
onEndReachedThreshold={0.5}
ListFooterComponent={renderFooter}
/>
);
};
export default PokemonList;
Vamos analisar um pouco este código:
No seu início, ele é mais um código padrão importando dependências e criando uma const
chamada API_URL
que irá ser a busca da chamada HTTP.
Em seguida, definimos o componente de lista PokemonList
usando o useState para gerenciar o estado de pokemon, page e loading. O estado pokemon é uma matriz vazia que armazenará os dados dos Pokémon, enquanto o estado page é um número que representará a página atual de dados carregados. O estado loading é um valor booleano que indicará se a lista está carregando novos dados ou não. Usamos o hook useEffect para chamar a função loadPokemon assim que o componente for montado.
A função loadPokemon é responsável por carregar os dados da API PokeAPI. Começamos definindo o estado de loading como true
para indicar que a lista está carregando novos dados. Em seguida, usamos o axios para fazer uma chamada HTTP para a URL da API PokeAPI, especificando o número de itens para carregar e o deslocamento com base na página atual.
Assim que recebemos a resposta da API, atualizamos o estado de pokemon usando a função setPokemon, que adiciona os novos dados carregados à lista existente usando o operador spread
. Também atualizamos o estado de page, adicionando 1 à página atual para carregar a próxima página de dados na próxima chamada de loadPokemon. Finalmente, definimos o estado de loading como false
para indicar que a lista terminou de carregar os novos dados.
A chamada à API PokeAPI é feita usando o método axios.get e passando a URL da API com os parâmetros limit e offset
para carregar 10 itens por página. O número de offset
é calculado com base no número da página atual. Os novos dados são adicionados à matriz existente usando o operador spread ... e as variáveis de estado são atualizadas.
Em seguida, definimos a função renderItem, que é usada pelo componente FlatList para renderizar cada item da lista. A função renderItem extrai o nome e o ID do Pokémon da resposta da API e renderiza uma imagem e o nome do Pokémon:
Perto de seu final, o renderItem está guardando como objeto item
, name
e url
são passados para ele. Seu retorno será uma imagem e texto com nome do pokemon, e em sua finalização temos o InfiniteScroll com todos os seus parâmetros e renderizando dinâmicamente diversos pokemons por meio de um scroll Infinite.
Espero que esse artigo tenha o ajudado a compreender o uso desta técnica muito utilizada por grandes aplicativos como Facebook, TikTok e Instagram. Obrigado por ler até aqui.
Top comments (0)