A paginação personalizada com carregamento dinâmico de dados pode melhorar o desempenho e a experiência geral do usuário do seu aplicativo.
Paginação refere-se ao sistema de dividir grandes quantidades de dados em blocos ou páginas menores e mais gerenciáveis para melhorar o desempenho e a usabilidade. A paginação personalizada, se implementada corretamente, pode fornecer uma melhor experiência do usuário. Aprenda a criar uma solução de paginação personalizada no React Native que permite carregar dados dinamicamente.
Compreendendo a paginação personalizada
Com a paginação personalizada, os desenvolvedores podem criar um mecanismo de paginação que atenda aos requisitos específicos de seu aplicativo. A paginação personalizada pode envolver o design de uma interface de usuário exclusiva para navegar entre as páginas, implementando algoritmos para buscar dados de um banco de dados ou API, ou incorporando recursos como rolagem infinita ou carregamento lento.
Vantagens da paginação personalizada
Criar um sistema de paginação personalizado para seus aplicativos móveis React Native pode oferecer algumas vantagens:
- Ele pode melhorar a escalabilidade do seu aplicativo, permitindo que ele lide com grandes quantidades de dados com mais eficiência. Isso é especialmente importante para aplicativos que lidam com grandes conjuntos de dados.
- A paginação personalizada pode melhorar o desempenho do seu aplicativo dividindo os dados em blocos menores e mais gerenciáveis. Isso reduzirá o tempo de carregamento.
- Com a paginação personalizada, você terá maior flexibilidade e controle na apresentação e acesso aos dados em seu aplicativo.
Implementando carregamento dinâmico com paginação personalizada
Quando seu aplicativo React Native carrega apenas os dados necessários que ele precisa carregar naquele momento, isso é chamado de carregamento dinâmico. Para implementar o carregamento dinâmico com paginação personalizada, siga estas etapas gerais:
- Determinar o método de paginação: escolha um método de paginação que funcione melhor para o seu conteúdo. Isso pode ser um tradicional baseado em página sistema de paginação, onde os usuários clicam para carregar a próxima página, ou um Rolagem infinita sistema, onde mais conteúdo é carregado conforme o usuário rola a página.
- Escrever código do lado do servidor e do lado do cliente: você escreverá o código do lado do servidor para lidar com as solicitações de paginação para páginas de dados específicas e retornará apenas os dados dessa página. Em seguida, você escreverá o código do lado do cliente para ouvir as ações do usuário que acionam solicitações de mais dados, como clicar em um Carregue mais botão ou rolar para a parte inferior da página.
- Implemente o carregamento de dados: quando o usuário aciona uma solicitação de mais dados, o aplicativo deve enviar uma solicitação ao lado do servidor para a próxima página de dados. O lado do servidor deve retornar apenas os dados dessa página, que o aplicativo pode usar para atualizar a página.
- Atualize a página: Por fim, você atualizará a página com os dados recém-carregados. Isso pode envolver o acréscimo de novos dados a uma lista de itens existente ou a substituição de toda a lista pelos novos dados.
Configurando a fonte de dados
A primeira etapa na implementação da paginação personalizada no React Native é configurar sua fonte de dados. Isso normalmente envolve buscar dados de uma API ou banco de dados e armazená-los em uma variável de estado. Considerar uma API REST simples que retorna uma lista de livros.
Aqui está um exemplo de como pode ser a resposta da API:
{
"dados": [
{
"eu ia": 1,
"título": "O Apanhador no Campo de Centeio",
"autor": "JD Salinger"
},
{
"eu ia": 2,
"título": "Matar a esperança",
"autor": "Harper Lee"
},
// ...
],
"página": 1,
"totalPages": 5
}
Para buscar esses dados em nosso aplicativo React Native, podemos usar o buscar função, que retorna um Promessa que resolve com a resposta da API REST.
Criando uma função de paginação personalizada
Vamos criar uma função que irá buscar os dados da API e atualizar o estado com os novos dados recebidos. Esta função decidirá o que renderizar na tela do aplicativo React Native.
Bem defina esta função como uma função assíncrona que pega um parâmetro de página e retorna um Promise que resolve com os dados buscados.
const PAGE_SIZE = 10;
const buscarLivros = assíncrono (página) => {
tentar {
const resposta = aguardam buscar(` https://myapi.com/books? página =${página}&pageSize=${PAGE_SIZE}`);
const json = aguardam resposta.json();
retornar json.data;
} pegar (erro) {
console.erro (erro);
retornar [];
}
}
No bloco de código acima, o buscarlivros função leva um página parâmetro e retorna um Promise que resolve com os dados dessa página. Aqui o TAMANHO DA PÁGINA constante é usada para limitar o número de livros buscados por página.
Implementando carregamento dinâmico com a ajuda da função de paginação personalizada
Com a função de paginação personalizada definida, agora você pode usá-la para implementar o carregamento dinâmico no aplicativo. Para fazer isso, use o FlatList componente, que é um componente de alto desempenho para renderizar grandes listas de dados no React Native.
Primeiro, configure o FlatList componente com algum estado inicial:
importar Reagir, { useState, useEffect } de'reagir';
importar { FlatList, View, Text } de'reagir nativo';const aplicativo = () => {
const [livros, setLivros] = useState([]);
const [currentPage, setCurrentPage] = useState(1);useEffect(() => {
// Busca a página inicial de dados
buscarLivros (Páginaatual).then(dados => setBooks (dados));
}, []);const renderItem = ({ item }) => {
retornar (tamanho da fonte: 18 }}>{item.title}</Text> tamanho da fonte: 14 }}>{item.autor}</Text>
</View>
);
};retornar (
dados={livros}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
exportarpadrão Aplicativo;
Este código configura o componente FlatList com dois pedaços de estado, ou seja, livros e pagina atual. Nós usamos o useEffect() hook para buscar a página inicial de dados quando nosso aplicativo é executado pela primeira vez.
A seguir, definimos um renderItem função que pega um item do livros matriz e retorna um Visualizar contendo o título do livro e o autor.
Finalmente, passamos o livros matriz para o dados adereço do FlatList, juntamente com o nosso renderItem função e keyExtractor.
Agora temos que garantir que nossa Flatlist possa detectar quando um usuário rola para o final da lista. Nesse ponto, ele deve buscar e carregar os novos dados e renderizá-los.
Para fazer isso, usaremos o onEndReached suporte fornecido ao FlatList, que é um retorno de chamada chamado quando o usuário rola para o final da lista. Devemos também atualizar nosso pagina atual state para acompanhar em qual página estamos no momento.
Aqui está o código atualizado implementando tudo isso:
importar Reagir, { useState, useEffect } de'reagir';
importar { FlatList, View, Text } de'reagir nativo';const aplicativo = () => {
const [livros, setLivros] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(falso);useEffect(() => {
buscarLivros (Páginaatual).then(dados => setBooks (dados));
}, []);const buscarMais = assíncrono () => {
se (está carregando) retornar;setIsLoading(verdadeiro);
const nextPage = currentPage + 1;
const novosDados = aguardam buscarLivros (nextPage);setCurrentPage (nextPage);
setIsLoading(falso);
conjunto de livros(prevData => [...prevData, ...newData]);
};const renderItem = ({ item }) => {
retornar (preenchimento: 16 }}> tamanho da fonte: 18 }}>{item.title}</Text> tamanho da fonte: 14 }}>{item.autor}</Text>
</View>
);
};retornar (
dados={livros}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
exportarpadrão Aplicativo;
Aqui adicionamos dois novos estados chamados está carregando e onEndReachedThreshold. está carregando acompanha se estamos buscando dados no momento e onEndReachedThreshold dispara o onEndReached retorno de chamada quando o usuário rola até 10% do final da lista.
Criamos uma nova função chamada buscarMais que corre quando onEndReached é demitido. Ele verifica se já estamos carregando dados e, caso contrário, busca a próxima página de dados e atualiza nossa lista.
Por fim, adicionamos os novos adereços necessários ao nosso FlatList componente. O FlatList O componente agora carregará dados dinamicamente conforme o usuário rola até o final da lista.
Melhore o desempenho do seu aplicativo usando paginação personalizada
Você aprendeu como carregar dados dinamicamente no React Native com seu próprio sistema de paginação personalizado. Esse método oferece mais flexibilidade e controle ao lidar com grandes quantidades de dados em seu aplicativo. Lembre-se de adaptar sua paginação para corresponder ao estilo e às necessidades do seu aplicativo. Você pode personalizá-lo ainda mais para obter a aparência e a funcionalidade desejadas. No geral, definitivamente ajudaria você a otimizar o desempenho do seu aplicativo.