Então esse é o nosso aplicativo aqui.
Agora, neste aplicativo, adicionamos muitas funcionalidades, mas há mais uma coisa que quero adicionar
e que é necessária a atualização.
Digamos que eu fui capaz de buscar todos os produtos de dentro
desta página, portanto, sem deixá-lo e voltar, o que buscará os produtos
mais recentes, mas de dentro desta página, simplesmente usando esse pull para atualizar o padrão onde você
arrasta para baixo e depois recarrega. Felizmente, isso é muito fácil de fazer no React Native, se
você estiver usando uma lista simples ou uma exibição de rolagem, pois está integrada nesses componentes. Aqui na tela de visão geral dos produtos na
lista simples, você pode implementá-lo simplesmente adicionando adereços à lista simples. O primeiro suporte é a atualização, você precisa adicionar e
isso deve apontar para uma
função que é executada quando o usuário puxa para baixo; portanto, quando o usuário inicia esse puxar para atualizar
o anúncio de ação aqui na tela de visão
geral de produtos, é claro que podemos simplesmente apontar para carregar produtos, porque essa é,
no final, a função que carrega
nosso produto, então isso é perfeito.
Então aqui podemos apenas apontar para carregar produtos. Agora, adicionando isso, obtemos automaticamente essa funcionalidade, mas aqui também ocorre
um erro, que o suporte de atualização deve ser definido porque essa é a outra coisa
que você sempre deve definir ao adicionar a atualização. A configuração da atualização desbloqueia automaticamente todo esse comportamento e
também o
bom controle giratório que você obtém por padrão. O React Native fará tudo isso por você, mas
só o fará se você também adicionar o suporte de atualização. A atualização é necessária para que o React Native saiba quando você
terminar e, portanto, deve apontar para variável, para uma variável com estado, portanto, em algum estado que indica se você
está carregando ou não no
momento e, claro, isso é ótimo porque temos nosso suporte isLoading aqui, para
que nos diga se estamos carregando ou não. Teremos apenas um problema: se
estivermos carregando, substituo todo o conteúdo da tela e, é
claro, não é isso que quero fazer para recarregar. Portanto, corrigiremos isso e uma solução simples seria remover a parte set isLoading
aqui dos produtos de carregamento, configurando-a como true e false e, em vez disso, fazer isso apenas para o carregamento
inicial aqui em uso, onde acionamos produtos de carregamento quando o componente carregar e, em seguida, aqui,
usando esta sintaxe, defina-o como false quando terminarmos. Podemos fazer isso porque carregar produtos retornará uma
promessa porque está tendo essa palavra-chave assíncrona, portanto, retorna uma promessa e, com isso, obtemos o controle giratório de carregamento
quando isso carrega inicialmente, mas não quando recarrega e isso também
significa que, quando visitarmos isso página, não vemos o botão giratório, mas isso pode ser bom.
De qualquer forma, temos algum conteúdo
lá e, se isso for atualizado depois de visitar esta página, tudo bem. Então agora não estamos definindo o carregamento aqui, mas
agora podemos definir um estado diferente aqui, vamos chamá-lo
de isRefreshing talvez e definir isRefreshing. Aqui, eu quero gerenciar um
estado que inicialmente é falso, assim como isLoading, e
agora
é isso que eu quero definir aqui; portanto, o conjunto é atualizado como true aqui e também aqui após a tentativa
de captura, defina-o como false quando terminar. Portanto, é claro, isso funciona da mesma maneira que isLoading, mas agora não
usarei o isRefreshing para substituir todo o conteúdo da tela, mas o isRefreshing agora pode ser enviado de volta à
lista simples neste suporte refrescante e, portanto, no carregamento inicial, isso funciona como antes, mas agora aqui, temos essa agradável
funcionalidade Pull to Refresh, que você vê aqui. Eu posso puxar para baixo, pegar o botão giratório e isso será recarregado
automaticamente e eu posso provar isso editando isso neste servidor. Se eu adicionar uma camada extra
ou alguns pontos de exclamação extras lá, podemos obter esses pontos de exclamação aqui, puxando e atualizando, aqui você vê
isso e o mesmo, é claro, no Android. Lá você também tem essa funcionalidade pronta
para usar e é assim que você pode adicionar a funcionalidade Pull to Refresh ao seu aplicativo React Native.