Neste guia, você aprenderá como lidar com as alterações do estado da conexão de rede em um aplicativo React Native utilizando NetInfo para obter informações sobre a conexão de rede e axios para fazer solicitações de rede a uma API pública.
Para aqueles de nós que estão envolvidos na construção de aplicativos móveis, rapidamente se tornou uma prioridade considerar os usuários que podem não ter acesso à internet ou ter uma conexão de rede ruim… mas ainda desejam acessar seu aplicativo. Tornar seu aplicativo resiliente diante de conectividade desconhecida pode melhorar muito a experiência do usuário e, consequentemente, a retenção do usuário.
Primeiros passos
Antes de mergulharmos em nossa demonstração, devemos primeiro criar um projeto React Native executando o seguinte comando:
npx react-nativo init MyOfflineApp
No meu exemplo, o nome do projeto é “MyOfflineApp”, mas você pode alterá-lo de acordo com sua preferência.
Em seguida, vá para a pasta Projeto e instale os pacotes npm necessários:
cd MyOfflineApp npm i--save @ react-native-community/netinfo axios react-native-modal
Em seguida, execute o seguinte comando para iOS para vincular bibliotecas usando CocoaPods :
npx pod-install
Nas seções a seguir, discutiremos como preparar seu aplicativo e seus usuários para mudanças na conectividade de rede.
Comunicar a mudança de status ao usuário
A maioria dos aplicativos móveis exige que os usuários tenham uma conexão com a Internet para buscar dados de uma API. No entanto, como desenvolvedor, você não pode esperar que o usuário tenha uma conexão de Internet estável o tempo todo. Isso significa que se você deseja que seu usuário possa usar seu aplicativo móvel em todos os momentos, independentemente da conectividade, você precisa de um plano para lidar com os casos em que a conexão do usuário com a Internet cai enquanto o aplicativo está recuperando dados do servidor.
A primeira etapa deste plano é informar ao usuário que seu dispositivo não está conectado à internet; também é aconselhável configurar uma IU substituta até que a conexão seja estabelecida novamente.
O pacote NetInfo
O pacote NetInfo fornece informações sobre a conexão de rede ativa do usuário e o status de conectividade de seu dispositivo móvel. Ele também identifica o tipo de rede atual do usuário (WiFi, celular, ethernet e assim por diante). Se a conexão for celular, o netinfo também retornará o tipo de geração (2G, 3G, 4G), bem como o custo da conexão em termos de consumo de bateria e valor monetário.
Como usar NetInfo
Você pode importar o pacote NetInfo em seu arquivo de componente conforme mostrado abaixo:
importar NetInfo de"@ react-native-community/netinfo";
Você pode se inscrever para receber alterações de estado da rede usando o método addEventListener () :
NetInfo.addEventListener (networkState=& amp; gt; { console.log ("Tipo de conexão-", networkState.type); console.log ("Está conectado?-", networkState.isConnected);
});
O método addEventListener () retornará a referência ao método unsubscribe, que você pode usar para remover o ouvinte quando o componente for desmontado.
Se você precisar do estado de rede ativo apenas uma vez, pode usar o método fetch () em vez de ouvir as alterações:
NetInfo.fetch (). then (networkState=& amp; gt; { console.log ("Tipo de conexão-", networkState.type); console.log ("Está conectado?-", networkState.isConnected);
});
O objeto de estado da rede tem a seguinte forma:
{ tipo:"wi-fi", isConnected: true, isInternetReachable: true, isWifiEnabled: true, detalhes: {...}
}
A chave type (tipo de rede) pode ser um dos seguintes valores.
- nenhum
- desconhecido
- celular
- wi-fi
- bluetooth
- ethernet
- vpn
- wimax
- outro
Observe que a propriedade details é diferente para cada valor da propriedade type . Você pode encontrar mais detalhes sobre a API NetInfo na documentação .
Configuração de demonstração: usando NetInfo e axios para gerenciar a conectividade
Para este exemplo, criaremos um aplicativo de exemplo com uma lista de usuários que serão buscados na API de usuário aleatório.
Primeiro, importe os pacotes necessários na parte superior do seu arquivo de componente:
import React, {useEffect, useState} de'react';
importar axios de'axios';
import { Visualizar, StyleSheet, FlatList, Imagem, Texto, Dimensões, SafeAreaView,
} de'react-native';
A seguir, crie um componente Usuário que exibirá os dados de um usuário individual na lista. Isso não deve ser terrivelmente complexo; adicione um componente Imagem para exibir o avatar do usuário e alguns componentes Texto para exibir o nome e o e-mail do usuário:
const User=({name, email, avatar})=& amp; gt; ( & amp; lt; Exibir estilo={styles.user} & amp; gt; & amp; lt; Fonte da imagem={{uri: avatar}} style={styles.avatar}/& amp; gt; & amp; lt; Exibir estilo={styles.info} & amp; gt; & amp; lt; Estilo de texto={styles.name} & amp; gt; {name} & amp; lt;/Text & amp; gt; & amp; lt; Estilo de texto={estilos.email} & amp; gt; {email} & amp; lt;/Texto & amp; gt; & amp; lt;/Exibir & amp; gt; & amp; lt;/Exibir & amp; gt;
);
Dentro do componente Usuários , busque os dados da API e renderize a lista de usuários usando o componente FlatList . Para fazer a solicitação de rede, use o método axios.get () e passe o endpoint da API.
Para referência, axios é usado para fazer solicitações de rede para uma API pública. O pacote react-native-modal será usado para exibir o aviso de erro de conexão na parte inferior da tela.
Finalmente, busque os usuários dentro do retorno de chamada de gancho useEffect e armazene os resultados na variável de estado users . Você também armazenará o estado de carregamento em uma variável isLoading para indicar que os dados estão sendo buscados.
const Users=()=& amp; gt; { const [isLoading, setLoading]=useState (false); const [usuários, setUsers]=useState ([]); useEffect (()=& amp; gt; { fetchUsers (); }, []); const fetchUsers=()=& amp; gt; { setLoading (true); axios .get ('https://randomuser.me/api/?results=30') .então (({dados})=& amp; gt; { const {resultados}=dados; setUsers (resultados); }) .finalmente (()=& amp; gt; { setLoading (false); }); }; Retorna ( & amp; lt; estilo SafeAreaView={styles.container} & amp; gt; & amp; lt; FlatList onRefresh={fetchUsers} refreshing={isLoading} dados={usuários} renderItem={({item: user})=& amp; gt; ( & amp; lt; Usuário nome={`$ {user.name.first} $ {user.name.last}`} email={user.email} avatar={user.picture.thumbnail} /& amp; gt; )} keyExtractor={(usuário)=& amp; gt; user.login.uuid} /& amp; gt; & amp; lt;/SafeAreaView & amp; gt; );
}; exportar usuários padrão;
>
Você pode encontrar o objeto styles para os componentes abaixo:
const styles=StyleSheet.create ({ container: { ... StyleSheet.absoluteFillObject, }, do utilizador: { largura: Dimensions.get ('tela'). largura-32, alignSelf:'center', marginVertical: 8, preenchimento: 12, borderWidth: 1, borderColor:'#eee', borderRadius: 6, flexDirection:'row', alignItems:'center', }, informação: { marginLeft: 10, }, avatar: { largura: 60, altura: 60, borderRadius: 100, }, nome: { cor:'# 424242', fontSize: 16, fontWeight:'600', }, o email: { marginTop: 6, cor:'# 888', },
});
Nesse ponto, você deve conseguir obter os dados do usuário da API e exibi-los na tela, conforme mostrado no gráfico abaixo.
Alerte os usuários com NetInfo.addEventListener
A seguir, veremos como lidar com a IU quando a conexão do usuário com a Internet é interrompida.
Primeiro, crie uma variável de estado isOffline que conterá um valor booleano para representar se o usuário está offline ou não. Adicione NetInfo.addEventListener no gancho useEffect para ouvir as alterações de rede e atualizar o valor do estado isOffline .
Veja abaixo:
const Users=()=& amp; gt; { //... const [isOffline, setOfflineStatus]=useState (false); useEffect (()=& amp; gt; { const removeNetInfoSubscription=NetInfo.addEventListener ((estado)=& amp; gt; { const offline=! (state.isConnected & amp; amp; & amp; amp; state.isInternetReachable); setOfflineStatus (offline); }); fetchUsers (); return ()=& amp; gt; removeNetInfoSubscription (); }, []); //...
}
Com esta configuração, sempre que o estado isOffline for false , um pequeno modal será aberto com a mensagem de erro e um botão de nova tentativa.
Quando o botão de nova tentativa é pressionado, chame a função fetchUsers () e defina o estado isOffline como false se a solicitação for bem-sucedida.
const Button=({filhos,... props})=& amp; gt; ( & amp; lt; TouchableOpacity style={styles.button} {... props} & amp; gt; & amp; lt; Estilo de texto={styles.buttonText} & amp; gt; {children} & amp; lt;/Text & amp; gt; & amp; lt;/TouchableOpacity & amp; gt;
); const NoInternetModal=({show, onRetry, isRetrying})=& amp; gt; ( & amp; lt; Modal isVisible={show} style={styles.modal} animationInTiming={600} & amp; gt; & amp; lt; Exibir estilo={styles.modalContainer} & amp; gt; & amp; lt; Estilo de texto={styles.modalTitle} & amp; gt; Erro de conexão & amp; lt;/Texto & amp; gt; & amp; lt; Estilo de texto={styles.modalText} & amp; gt; Ops! Parece que seu dispositivo não está conectado à Internet. & amp; lt;/Texto & amp; gt; & amp; lt; Botão onPress={onRetry} desativado={isRetrying} & amp; gt; Tente novamente & amp; lt;/Botão & amp; gt; & amp; lt;/Exibir & amp; gt; & amp; lt;/Modal & amp; gt;
); const fetchUsers=useCallback (()=& amp; gt; { setLoading (true); axios .get ('https://randomuser.me/api/?results=30') .então (({dados})=& amp; gt; { const {resultados}=dados; setUsers (resultados); isOffline & amp; amp; & amp; amp; setOfflineStatus (false); }) .finalmente (()=& amp; gt; { setLoading (false); });
}, [está offline]); //dentro de & amp; lt; Users/& amp; gt; componente
& amp; lt; NoInternetModal show={isOffline} onRetry={fetchUsers} isRetrying={isLoading}
/& amp; gt;
Para testá-lo, desative sua rede WiFi e verifique a tela do aplicativo. (Se você estiver tendo dificuldades em obter o resultado esperado no simulador, tente usar um dispositivo real).
Para obter a mesma aparência do modal acima, você pode incluir o objeto style abaixo com os estilos dos componentes do usuário.
const styles=StyleSheet.create ({ //... modal: { justifyContent:'flex-end', margem: 0, }, modalContainer: { backgroundColor:'#fff', paddingHorizontal: 16, paddingTop: 20, paddingBottom: 40, alignItems:'center', }, modalTitle: { fontSize: 22, fontWeight:'600', }, modalText: { fontSize: 18, cor:'# 555', marginTop: 14, textAlign:'center', marginBottom: 10, }, botão: { backgroundColor:'# 000', paddingVertical: 12, paddingHorizontal: 16, largura:'100%', alignItems:'center', marginTop: 10, }, botão de texto: { cor:'#fff', fontSize: 20, },
});
Conclusão
Neste guia, revisamos a biblioteca NetInfo e um caso de uso simples para lidar com o estado da conexão de rede. Para praticar mais, você pode procurar maneiras de tornar o estado da conexão de rede disponível para todos os componentes (global) usando API de contexto ou uma biblioteca de terceiros como Redux.
Em um caso de uso mais avançado, você pode permitir que os usuários naveguem no aplicativo sem a Internet, armazenando em cache os dados do servidor. Essa é uma estratégia comumente usada por aplicativos de mídia social para aumentar o envolvimento e desencorajar os usuários de sair do aplicativo.
Espero que você tenha aprendido algo novo com este guia. Saúde!
A postagem Gerenciando o status da conexão de rede no React Native apareceu primeiro no LogRocket Blog .
