J'ai une application Expo utilisant le Workflow géré. L'application doit vérifier si une connexion Internet est disponible.

  • Je ne peux pas import { NetInfo } from 'react-native' car c'est obsolète.
  • Je ne peux pas utiliser react-native-community / react-native-netinfo parce que cela utilise des bibliothèques natives, et vous ne pouvez pas le faire avec une application gérée par Expo.
  • Je pourrais éjecter, afin d'utiliser ce qui précède, mais il ne semble pas que je devrais le faire juste pour vérifier s'il y a une connexion Internet.
  • Je ne peux pas utiliser navigator.onLine car cette variable globale ne semble pas disponible.
  • Je pourrais faire une requête HTTP triviale à Google ou à mon propre serveur ou autre, et voir si j'obtiens une réponse, mais cela ne teste qu'une connexion à un site, et cela prend du temps et utilise de la bande passante.

Que devrais-je faire?

9
Dan B. 19 juin 2019 à 17:18

3 réponses

Meilleure réponse

Utilisez NetInfo sur react-native.

Oui, il est obsolète car ils prévoient de le supprimer dans la prochaine version de react-native au profit de la version communautaire. Cependant, il est complètement fonctionnel et peut encore être utilisé pour le moment, assurez-vous simplement de vérifier les modifications importantes lors de la sortie des prochaines versions de Expo SDK.

Il est probable qu'Expo l'introduira dans son flux de travail géré lorsque react-native le supprimera, ou fournira une alternative qui ne nécessitera pas d'être éjecté d'Expo.

7
zaytrix 14 août 2019 à 16:12

Expo SDK 34 a déjà inclus NetInfo API.

Vous pouvez consulter leur documentation pour le SDK 34 ici https://docs.expo.io /versions/v34.0.0/sdk/netinfo

Voici le lien vers la documentation de la dernière version

5
CZ workman 9 janv. 2020 à 10:37

Il est vraiment difficile de définir si un appareil est connecté à Internet ou non stackoverflow.com/a/189443/7602110, simplement en échec XHR demande que vous pouvez dire que vous avez Internet, mais ce n'est pas si fiable. Vous souhaitez vérifier avec certains sites Web fiables comme google.com , je suis venu avec une solution de contournement, mais je ne le recommande pas vraiment, c'est à vous.

Vous pouvez utiliser la méthode Linking.canOpenUrl() de React Native lui-même , qui renverra un objet Promise. Lorsqu'il est déterminé si l'URL donnée peut être gérée ou non, la promesse est résolue et le premier paramètre est de savoir si elle peut être ouverte ou non.

Ensuite, ajoutez une requête et si l'état de la réponse est 200, vous devriez avoir Internet.

import React, { Component } from 'react';
import { Button, Text, View, StyleSheet, Linking } from 'react-native';

export default class App extends Component {
  state = {
    connection: false,
    url: 'https://google.com',
  };

  checkInternt = () => {
    Linking.canOpenURL(this.state.url).then(connection => {
      if (!connection) {
        this.setState({ connection: false });
      } else {
        fetch(this.state.url).then(res =>
          this.setState({ connection: res.status !== 200 ? false : true })
        );
      }
    });
  };

  componentDidMount() {
    this.checkInternt();
  }

  handlePress = () => {
    this.setState({
      url:
        this.state.url === 'https://google.com'
          ? 'http://someweirdurlthatdoesntwork.com'
          : 'https://google.com',
    });
    this.checkInternt();
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>
          Connection:
          <Text style={{ color: this.state.connection ? 'green' : 'red' }}>
            {`   ${this.state.connection}`}
          </Text>
        </Text>
        <Text>{this.state.url.replace(/\https?:\/\//g, '')}</Text>
        <Button onPress={this.handlePress} title="Change server url" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

Vérifiez la collation: snack.expo.io/@abranhe/check-internet

2
Abraham Hernandez 19 juin 2019 à 19:29