React-native: iOS: NetInfo.isConnected renvoie toujours faux

Je peux également reproduire cela avec RN 0.29.0. J'utilisais la version 0.26.2 plus tôt et cela fonctionnait très bien. Je vais essayer de construire à partir de la source et de déboguer.

+1

J'ai déjà signalé le même problème: https://github.com/facebook/react-native/issues/8469

Une solution rapide consiste à ajouter un gestionnaire d'événements NetInfo.isConnected.addEventListener('change', Function.prototype)

+1 et même problème avec NetInfo.fetch (). Done () - renvoie toujours unknown

Je l'ai résolu de cette façon:

componentDidMount() {
  const dispatchConnected = isConnected => this.props.dispatch(setIsConnected(isConnected));

  NetInfo.isConnected.fetch().then().done(() => {
    NetInfo.isConnected.addEventListener('change', dispatchConnected);
  });
}

+1

nous avons trouvé ce bogue dans 0.29.2 ..

nous avons trouvé ce bogue en 0.28

0.30.0 ne fonctionne toujours pas

Le code pertinent n'a pas changé, il est donc logique qu'il ne fonctionne toujours pas.

Notez que j'ai précédemment signalé le bogue ici: https://github.com/facebook/react-native/issues/8469 où il détaille la cause et un exemple de code est joint. Pour cette raison, je pense qu'il est logique de laisser cela fermé.

Le nombre de problèmes ouverts avec les IA augmente chaque jour, il est donc important de faire notre part et de consolider lorsque cela est possible.

J'ai noté le même problème aujourd'hui

J'utilise la version 0.30.0, et j'ai également trouvé cette erreur.

le même problème pour moi, j'utilise [email protected] et la récupération renvoie toujours inconnu.

Mais nous pouvons utiliser addEventListener à la place.

NetInfo.addEventListener('change',
    (networkType)=> {
        this.setState({networkType})
    }
)

au lieu de:

NetInfo.fetch().done(
    (networkType)=> {
        this.setState({networkType})
    }
)

@ bug de facebook-github-bot

J'ai ce problème sur 0.31, est-ce que cela sera résolu?

idem à 0,32

@knowbody Comment fonctionne votre extrait de Can't find variable: setIsConnected

@florentsorel donc dans mon projet j'utilise redux pour la gestion des états et setIsConnected est mon créateur d'action, qui ressemble à quelque chose comme:

actions/network.js

export const setIsConnected = (isConnected) => ({
  type: 'SET_IS_CONNECTED',
  isConnected
});

puis j'ai un réducteur network :

reducers/network.js

const initialState = {
  isConnected: true
};

const network = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_IS_CONNECTED':
      return {
        isConnected: action.isConnected
      };

    default:
      return state;
  }
}

export default network;

+1

J'ai ce problème sur la v0.34.1

Edit: mise à jour vers la v0.35.0 et même problème.

idem sur v0.35.0

J'ai le même problème avec la v0.36.0

L' extrait de

@Dnld : @Ehesp dit que cela fonctionne sur la v.036, vous et 5 autres non? N'est-ce pas finalement résolu? J'avais aussi des problèmes avec la 0.33 et j'aimerais mettre à jour. Merci.

Le code sous-jacent n'a pas vraiment changé donc je serais surpris si cela est "corrigé".

J'ai mis le correctif entre guillemets car il semble que la motivation de ce changement soit de ne configurer la machine native qui surveille l'état du réseau que si le code d'application est intéressé à l'observer.

Les applications enregistrent leur intérêt en ajoutant un écouteur d'événements qui commence ensuite à

À ce stade, il semble que ce soit le comportement souhaité, alors peut-être qu'un changement de documentation est nécessaire. NetInfo.isConnected renvoie un booléen donc il n'exprime pas que l'état est inconnu et que cela ne changera pas tant que vous n'aurez pas ajouté un écouteur d'événement. Alternativement, la fonction peut être modifiée pour retourner null ou un booléen.

Mes applications ont un code très similaire à ce que @knowbody a publié. Cependant, je n'appelle pas du tout NetInfo.isConnected.fetch() , car cela ne sert à rien au démarrage.

Je suppose qu'il y a une connectivité, j'ajoute l'auditeur, puis l'état sera mis à jour lorsque l'état de connectivité n'est plus inconnu.

0.34.1 ne fonctionne toujours pas

Même problème avec RN 0.37.0

@ xing-zheng pour une raison quelconque, votre solution ne renvoie que «MOBILE», même lorsque j'éteins le wifi sur mon ordinateur, ce qui devrait refléter dans mon émulateur. Une idée pourquoi?

componentDidMount() { NetInfo.addEventListener('change', (networkType)=> { this.setState({connected: networkType}) } ) }

Même problème avec RN 0.38.0

même en 0,39 aussi

Lorsque j'essaye la solution addEventListener, NetInfo ne détecte qu'un ou deux changements de connexion. Par exemple, si je démarre avec une connexion et que je la supprime, Netinfo le détectera, mais si je me reconnecte, il ne détectera pas que je suis maintenant connecté. NetInfo produit énormément de faux positifs dans mon application, même avec la solution de contournement. Quelqu'un d'autre vit-il la même chose?

J'ai dû créer une solution de contournement étrange pour résoudre ce problème. Pour une raison quelconque, une méthode fonctionne sur Android et l'autre sur iOS. Une solution à ce problème serait formidable.

function handleFirstConnectivityChange(isConnected) {
    if (!sConnected) {
     // do action
    } 
    NetInfo.isConnected.removeEventListener('change', handleFirstConnectivityChange);
}

if (Platform.OS === 'ios') {
    NetInfo.isConnected.addEventListener('change', handleFirstConnectivityChange); 
} else {
    NetInfo.isConnected.fetch().then(isConnected => {
    if (!sConnected) {
        // do action
    } 
}

@ robertodias180 cela ne fonctionne pas.

IA - 0,39+

function handleFirstConnectivityChange (isConnected) {
if (! sConnecté) {
// faire l'action
}
NetInfo.isConnected.removeEventListener ('change', handleFirstConnectivityChange);
}

if (Platform.OS === 'ios') {
NetInfo.isConnected.addEventListener ('change', handleFirstConnectivityChange);
} autre {
NetInfo.isConnected.fetch (). Then (isConnected => {
if (! sConnecté) {
// faire l'action
}
}

Pouvez vous me donner un coup de main?

@imbudhiraja fonctionne- t-il sur l'une des plates-formes?

Non, cela ne fonctionnait sur aucune plate-forme

Merci
Manish Budhiraja

Le 3 janvier 2017 à 20h12, "Roberto Dias" [email protected] a écrit:

@imbudhiraja https://github.com/imbudhiraja fonctionne- t-il sur l'un des
plates-formes?

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/facebook/react-native/issues/8615#issuecomment-270128504 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AVTjXHSe8OcVq8fQ5XVk8hh9XXHfHFVZks5rOl5ggaJpZM4JGaBc
.

Il semble que cela puisse être deux problèmes:

1. isConnected.fetch semble être cassé sur iOS - le correctif devrait être simple. La solution de contournement publiée par @ robertodias180 a du sens car elle interroge le code natif avec une autre méthode.
2. La flakyness NetInfo décrite par @Aristekrat . C'est plus inquiétant - quelqu'un peut-il aider à fournir un moyen détaillé de reproduire ce problème? Ensuite, je devrais pouvoir aider à le réparer.

RN 0.38.1 et versions antérieures, simulateur iOS.

componentDidMount() {
    NetInfo.isConnected.fetch().then(this._handleConnectionInfoChange);
    NetInfo.isConnected.addEventListener(
        'change',
        this._handleConnectionInfoChange
    );
 }

 componentWillUnmount(){
     NetInfo.isConnected.removeEventListener(
        'change',
        this._handleConnectionInfoChange
    );
 }

_handleConnectionInfoChange(isConnected){
    this.props.connectActions.netInfo(isConnected);

    dbg('connected', isConnected);

};

Le NetInfo.isConnected.fetch().then(this._handleConnectionInfoChange); initial récupère correctement l'état actuel de la connexion. Cependant, les modifications ultérieures de l'état de la connexion ne sont pas capturées par eventListener.

J'ai eu ce problème depuis de nombreuses versions RN maintenant.

@imbudhiraja j'ai fini par changer le code pour quelque chose de "plus propre". J'ai un utilitaire qui a l'état actuel de la connexion réseau. Cela fonctionne sur les deux plates-formes. I initializeConnection lorsque l'application s'ouvre, puis isConnected lorsque j'en ai besoin. Veuillez noter que cela peut prendre un peu avant que le NetInfo obtienne l'état de connexion lorsque l'application s'ouvre (en particulier sur Android). Je viens de retarder jusqu'à hasConnection !== null . J'espère que cela aide

const hasConnection = null;

export const initializeConnection = () => {

  const dispatchConnected = isConnected => { hasConnection = isConnected; };

  NetInfo.isConnected.fetch().then().done(() => {
    NetInfo.isConnected.addEventListener('change', dispatchConnected);
  });

}

export const isConnected = () => {
  NetInfo.fetch().done((reach) => {
    console.log('Initial: ' + reach);
  });
  return hasConnection;
}

J'ai essayé quelque chose de similaire, je n'arrête pas de me heurter à la situation selon laquelle eventListener ne le détecte pas lorsque la connexion revient (sur le simulateur).

Recharger l'application sans connexion Internet => Détecté
Réactiver Internet => NON détecté

Recharger l'application avec une connexion Internet => Détecté
Éteindre Internet => Détecté
Réactiver Internet => NON détecté

<strong i="11">@autobind</strong>
export default class ConnectionToast extends React.Component {

    constructor(props){
        super(props);
    }

    componentDidMount() {
        NetInfo.isConnected.fetch()
            .then(this._handleConnectionInfoChange)
            .done(this._addListener);
     }

     componentWillUnmount(){
         this._removeListener();
     }

     _addListener(){
         NetInfo.isConnected.addEventListener(
             'change',
             this._handleConnectionInfoChange
         );
     }

     _removeListener(){
         NetInfo.isConnected.removeEventListener(
            'change',
            this._handleConnectionInfoChange
        );
     }

    _handleConnectionInfoChange(isConnected){
        this.props.connectActions.netInfo(isConnected);

        dbg('connected', isConnected);

        // this._removeListener();
        // this._addListener();

    }

[...]

J'ai essayé de supprimer et de rajouter l'auditeur à chaque changement, mais pas de joie.

@mschipperheyn Je rencontre exactement le même problème en utilisant l'approche que @knowbody a publiée plus tôt.

La documentation implique également qu'il ne traiterait que le premier changement via handleFirstConnectivityChange . Est-ce correct ou doit-il détecter toutes les modifications ultérieures?

Assurez-vous que vous avez

défini dans votre fichier manifeste Android. Celui-ci m'a fait trébucher.

Même problème avec RN 0.41.0

dans iOS, ne pas ajouter d'écouteur et ne pas enregistrer SCNetworkReachabilitySetCallback. ne fonctionne sûrement pas. quel est le but du design?

idem à 0.41.2

@djohnkirby Votre commentaire ne

La ligne à ajouter à votre AndroidManifest.xml est:

 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

0.39.2: Même problème. Non seulement NetInfo fetch result est toujours false , mais il détecte également un changement d'état de connexion rapidement après le démarrage de l'application

0.42.0: même problème. J'ai également décrit mon problème ici: https://stackoverflow.com/questions/42642034/check-for-internet-connection-returns-wrong-results
Je teste sur iOS et macOS Sierra.

MISE À JOUR : Mon problème était dû aux tests sur le simulateur, sur un appareil réel, tout fonctionne. Répondu dans le lien ci-dessus.

J'ai le même problème :(

NetInfo.isConnected.fetch().then((isConnected) => { console.log(isConnected); });
// always return false

Au cas où quelqu'un voudrait savoir si l'application s'exécute sur le simulateur ou non: http://stackoverflow.com/a/34732015/552669

Ce n'est pas un bug. Le module natif RCTNetInfo est une sous-classe de RCTEventEmitter , nous devons donc ajouter un observateur pour déclencher la méthode startObserving .
Dans le processus de lancement de votre application, ajoutez un observateur arbitraire à NetInfo, puis vous pouvez appeler la fonction fetch (NetInfo.isConnected appelle effectivement la fonction fetch)

Selon les suggestions de @ robertodias180, je suis venu à wrapper pour isConnected,
Cela semble fonctionner, mais je me demande si cela fonctionnera dans tous les cas

export function isNetworkConnected() {
  if (Platform.OS === 'ios') {
    return new Promise(resolve => {
      const handleFirstConnectivityChangeIOS = isConnected => {
        NetInfo.isConnected.removeEventListener('change', handleFirstConnectivityChangeIOS);
        resolve(isConnected);
      };
      NetInfo.isConnected.addEventListener('change', handleFirstConnectivityChangeIOS);
    });
  }

  return NetInfo.isConnected.fetch();
}

Même problème. 0,40

Je rencontre le même problème

0.42.3 - J'ai rencontré le même problème avec iOS à la fois sur le simulateur et sur un appareil réel. L'utilisation de la solution de @ Knight704 a atténué le problème.

Idem sur 0.42.3

idem sur 0.43.1

Voir ça sur 0.40

ayant ce problème aussi. A pu le faire fonctionner au hasard, puis il a cessé de fonctionner.

La solution de @ Knight704 a fonctionné au début pour moi, mais pour une raison quelconque, une fois que je l'appelle une fois de l'intérieur de la deuxième couche d'un navigateur dans un modal, la fonction cesse de fonctionner (handleFirstConnectivityChangeIOS n'est jamais appelé), même après avoir fermé le modal. Comportement très étrange, aucune idée pourquoi cela ne fonctionne pas ou si c'est quelque chose d'autre dans ma base de code qui ne fonctionne pas bien avec NetInfo.

Qu'est-ce que je rate?

    this.state = {
            isConnected: null,
     }
    componentDidMount() {
        console.log('first one ', this.state.isConnected)
        NetInfo.isConnected.addEventListener(
            'change',
            this._handleConnectivityChange
        );
        console.log('second ', this.state.isConnected)
        NetInfo.isConnected.fetch().done(
            (isConnected) => {this.setState({isConnected});}
        );
        console.log('third ', this.state.isConnected)
    }
    componentWillUnmount(){
        console.log('did it unmount ', this.state.isConnected)
        NetInfo.isConnected.removeEventListener(
            'change',
            this._handleConnectionInfoChange
        );
        console.log('it did unmount ', this.state.isConnected)
    }
    _handleConnectivityChange = (isConnected) => {
        this.setState({
            isConnected,
        });
    };
   render() {
      console.log('fourth ', this.state.isConnected)
        if(this.state.isConnected === false){
            const connectAlert = (Alert.alert(
                'ERROR',
                'No connection bro!',
                [
                    {text: 'OK'},
                ]
            ))
        }
        return ()
}

donc quand je l'exécute, ça me donne parfois des alertes, pas toujours ....

ce sont les journaux de console renvoyés quand il me donne une alerte même en cas de connexion:

'fourth ', null
'first one ', null
'second ', null
'third ', null
'fourth ', false
'fourth ', true

Je rencontre le même problème que @SteffeyDev lorsque j'utilise le correctif de @ Knight704 dans https://github.com/facebook/react-native/issues/8615#issuecomment -287977178 Dans la plupart des cas, cela fonctionne très bien, mais quand j'ai les modaux poussés ou sautés le même code ne résoudra jamais car je suppose que l'événement change a déjà été émis.

J'ai remarqué que dans ces conditions, NetInfo.fetch() renverrait un état unknown (cela déclenchera un false sous NetInfo.isConnected.fetch() et j'ai donc pu le contourner avec la modification suivante de la solution de contournement d'origine:

export function isNetworkConnected() {
  return NetInfo.fetch().then(reachability => {
    if (reachability === 'unknown') {
      return new Promise(resolve => {
        const handleFirstConnectivityChangeIOS = isConnected => {
          NetInfo.isConnected.removeEventListener('change', handleFirstConnectivityChangeIOS);
          resolve(isConnected);
        };
        NetInfo.isConnected.addEventListener('change', handleFirstConnectivityChangeIOS);
      });
    }
    reachability = reachability.toLowerCase();
    return (reachability !== 'none' && reachability !== 'unknown');
  });
}

La condition unknown n'est déclenchée que sur iOS car Android renvoie UNKNOWN . C'est aussi la raison pour laquelle il faut mettre des minuscules avant de renvoyer le statut car cela devrait plus ou moins conserver le comportement existant de NetInfo.isConnected.fetch .

idem en 0.44

Au début, j'ai observé que NetInfo ne veut renvoyer le changement d'état du réseau qu'après un cycle (on -> off). Il s'est avéré qu'il n'y avait que ce problème dans le simulateur. Sur un appareil réel, il déclenche correctement le rappel, même pour plusieurs cycles de connexion / déconnexion.

Exemple de code

  NetInfo.addEventListener( 'change', this._onConnectivityChange );

  _onConnectivityChange(connType) {
    // Do something with connType...
  }

Ce problème m'a dérangé pendant un moment et j'ai indirectement fini par créer une petite bibliothèque d'utilitaires axée sur la détection RN hors ligne / en ligne, englobant des modèles React typiques et une belle intégration avec redux.

Cela fonctionne correctement sur de vrais appareils, à la fois Android et iOS. Cependant, je peux également corroborer que parfois l'auditeur n'est pas déclenché dans le simulateur iOS et que l'état de connectivité devient incohérent. Je n'ai pas encore essayé les solutions proposées par @ knight704 et @Ignigena ( ici et ici respectivement) mais je les testerai probablement bientôt quand j'aurai le temps.

Un PR est également le bienvenu au cas où plus de gens confirment que ces solutions fonctionnent comme un charme!

S'il-vous-plaît, réparez.

S'il est peu probable que cela soit résolu bientôt, pouvons-nous au moins mettre à jour la documentation pour indiquer que cela ne fonctionne pas sous iOS?

@ jpb12 peut-être que cela vaut la peine de faire le PR et de voir s'ils le fusionnent. Peut en fait rendre cela plus visible car il semble être oublié.

Je suis confronté à ce problème dans la version Android. Cela semble lié au fait d'aller à l'arrière-plan et de revenir au premier plan. Malheureusement, je ne peux pas reproduire ce problème de manière fiable, mais cela se produit définitivement après plusieurs transitions d'arrière-plan / premier plan. Surtout si l'état de la connexion a été changé cette fois

Quand ça arrive
NetInfo.isConnected.fetch().then(isConnected => {...}) renvoie toujours false
NetInfo.fetch().then((reach) => {...}) renvoie toujours NONE
l'ajout / la suppression d'écouteurs n'aide pas

Je serais très reconnaissant pour tout moyen fiable de détecter l'état réel de la connexion

Je suis confronté à un comportement étrange car isConnected renvoie true lors de la connexion au wifi (jusqu'à présent, c'est ok) mais si le modem n'atteint pas Internet, isConnected est toujours vrai. Je ne sais pas vraiment comment vérifier efficacement la connexion Internet, pas seulement la connexion réseau. Des idées? Merci

@kodatech Ce module devrait vous aider à résoudre ce problème. Je l'ai utilisé récemment sur un projet et je le recommande vivement https://github.com/rauliyohmc/react-native-offline

Merci beaucoup @craigcoles

@ Knight704 merci mon frère.

@craigcoles Avez-vous un code fonctionnel que je pourrais suivre?

@nmfzone Je n'ai rien que je puisse vous montrer, mais il y a beaucoup d'exemples de code dans le Readme 😃

J'utilise les événements d'écoute Netinfo comme suit, cela fonctionne très bien sur les deux plates-formes.
"natif réactif": "0,43,4",

componentDidMount(){
        NetInfo.isConnected.addEventListener('change', this._handleConnectivityChange);

    }

    componentWillUnmount(){
        NetInfo.isConnected.removeEventListener('change', this._handleConnectivityChange);
    }

    _handleConnectivityChange = (isConnected) => {
         console.warn(isConnected);
    }

@ sumesh1993 D'après mon expérience, si l'application Android a été minimisée (en arrière-plan), elle ne réagit pas 'change' événement

Le module https://github.com/rauliyohmc/react-native-offline qui a été recommandé ci-dessus juste en continuant à envoyer un ping à https://google.com . Cela fonctionne mais je préférerais que ce bug soit corrigé

Cela a du sens puisque les applications Android sont suspendues en arrière-plan. Pour recevoir des événements, vous devez créer un service qui continuera à s'exécuter même pendant que l'application est suspendue.

Vous pouvez également ajouter un gestionnaire onResume à l'application et interroger ensuite l'état hors connexion. Cela devrait être plus simple que de créer et de gérer un service.

@ alsh76 pour moi, cela fonctionne lorsque l'application est en arrière-plan, cela ne fonctionne pas lorsque l'application est supprimée à partir du menu multitâche.
J'ai résolu cela en appelant la fonction suivante chaque fois que mon écran d'accueil est lancé.
if(Platform.OS === 'android'){ NetInfo.isConnected.fetch().then(isConnected => { if(!isConnected) return; //Do something }); }

Rencontré le même problème avec le périphérique virtuel Android. Mais le truc, c'est que tout allait bien il y a quelques jours et que je le fais toujours sur l'appareil iOS et l'émulateur. Quelqu'un at-il trouvé un moyen stable et correct d'obtenir l'état de la connexion réseau?

Merci @ sumesh1993 qui a fait l'affaire pour moi sous iOS!
@igorarkhipenko avez-vous essayé sa suggestion?

Salut, avez-vous ajouté une autorisation par exemple, Android doit ajouter
AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

juste une petite mise à jour sur les solutions de @ Knight704 et @Ignigena car NetInfo.fetch est désormais obsolète. Cela a fait l'affaire pour moi:
''
const isNetworkConnected = () => {
retourne NetInfo.getConnectionInfo (). then (accessibilité => {
if (reachability.type === 'unknown') {
retourner une nouvelle promesse (résoudre => {
const handleFirstConnectivityChangeIOS = isConnected => {
NetInfo.isConnected.removeEventListener ('connectionChange', handleFirstConnectivityChangeIOS);
résoudre (isConnected);
};
NetInfo.isConnected.addEventListener ('connectionChange', handleFirstConnectivityChangeIOS);
});
}
return (reachability.type! == 'none' && reachability.type! == 'unknown')
});
}

Imho NetInfo.isConnected.fetch() est une fonctionnalité importante et devrait être corrigée dès que possible!

@javache @sahrens @davidaurelio @janicduplessis @hramos @shergin @rigdern y a-t-il un calendrier pour cela?

THX!

@pensierinmusica C'est un projet mené par la communauté, alors j'aimerais bien décrocher de bonnes relations publiques.

@shergin Je pensais que React Native avait été créé, maintenu et utilisé en interne par Facebook, et publié sous une licence BSD à 3 clauses pour cette raison. J'ai donc supposé que le personnel de Facebook corrigerait les bogues, en particulier les plus importants. Quoi qu'il en soit, bon de savoir que les PR sont les bienvenus!

cc @rigdern

Beaucoup de code RN Core est écrit et maintenu par la communauté.

Et il existe de nombreuses fonctionnalités et fonctionnalités non utilisées par Facebook, il est donc difficile pour nous de les prioriser et de préférer les RP communautaires où l'auteur peut vérifier le correctif pour son bug / cas d'utilisation.

J'ai également un problème avec react 0.47.0 avec iOS.

@pensierinmusica ce problème devrait très certainement être priorisé. Est-il difficile d'avoir un retour booléen de .isConnected ()?

Très bien, voici une solution de contournement prête à l'emploi qui devrait faire l'affaire (eh bien c'est le cas pour moi). J'envoie une requête http à un site dont je sais qu'il sera actif et j'évalue la réponse.

J'ai initialisé un dépôt qui devrait fonctionner hors de la boîte. https://github.com/JamesDorrian/NetInfoCheckConnection/tree/master

Remarque: assurez-vous de changer la variable httpAddress de https://www.galwaydaily.com à autre chose (peut-être google.com) car je ne peux pas garantir qu'elle sera toujours active. J'espère que cela aidera quiconque est frustré par NetInfo!

@pensierinmusica @anujsinghwd

@JamesDorrian merci, j'ai fini par faire quelque chose de similaire, en envoyant un ping à "google.com".

Voici l'extrait:

// /utilities/connectivity.js

import { Alert } from 'react-native';

export function warning () {
  Alert.alert(
    'No connection',
    'Mmm... you seem to be offline'
  );
};

export async function checkAsync () {
  try {
    const res = await fetch('https://google.com');
    if (res.status === 200) return true;
  } catch (e) {
    warning();
  }
  return false;
};

Pourtant, ce n'est qu'une solution de contournement temporaire, et je pense que NetInfo.isConnected devrait être corrigé dès que possible!

let isConnected = false;

Platform.OS === "ios" 
  ? (isConnected = await fetch("https://www.google.com"))
  : (isConnected = await NetInfo.isConnected.fetch());

Platform.OS === "ios" && (isConnected.status = 200)
  ? (isConnected = true)
  : (isConnected = false);

console.log(isConnected); //Result

Pouvons-nous nous arrêter avec les commentaires +1 sur ce problème, voici à quoi servent les réactions.

ios:
première demande. si le serveur tombe en panne, le téléphone dispose du wifi.
NetInfo.isConnected.fetch (). Then ((isConnected) => {toujours faux}
0.49.3.

@kddc votre solution semble fonctionner

Ajoutez simplement la bibliothèque d' accessibilité dans votre projet XCode d'Apple qui a servi ici , c'est la solution.

@fuatsengul J'ai ajouté le projet d'accessibilité en tant que bibliothèque dans mon projet Xcode, mais le problème n'est toujours pas résolu, pourriez-vous s'il vous plaît me dire ce qui doit être fait d'autre pour résoudre le problème? Merci.

Le problème semble être uniquement avec l'api fetch .. cependant, l'ajout d'un écouteur d'événement fonctionne sur iOS .. Cependant, addEventListener ne fonctionne pas sur Android, vous devez donc utiliser fetch api :)

Voici mon extrait pour le faire fonctionner sur les deux mondes:

function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'))
  NetInfo.isConnected.removeEventListener(
    'connectionChange',
    handleFirstConnectivityChange,
  )
}

if (Platform.OS === 'android') {
    NetInfo.isConnected.fetch().then(isConnected => {
      console.log('First, is ' + (isConnected ? 'online' : 'offline'))
    })
  } else {
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      handleFirstConnectivityChange,
    )
  }

Son affichage hors ligne dans IOS même s'il est connecté
IA - 0,50

NetInfo.isConnected.fetch().then(isConnected => { console.log('First, is ' + (isConnected ? 'online' : 'offline')); });

@kddc merci pour la solution de contournement.
Je rencontre un problème avec celui-ci dans mon appareil iOS et le scénario est le suivant:

1. ios -> le mode avion est activé
2. effectuer une récupération -> obtenir une 'erreur réseau', isConnected est faux et reachability.type est aucun
3. ios -> le mode avion est désactivé
4. effectuer une récupération -> obtenir une 'erreur réseau', isConnected est faux et reachability.type est aucun

Pendant toute la durée de l'exécution de l'application, en arrière-plan lors du changement de mode avion.
Seul le redémarrage de l'application "attrape" la nouvelle connexion réseau.

+1

+1

Merci pour le correctif @ alburdette619
Donc, cela est corrigé dans sera disponible dans la version 0.54?

@ assafb81 Je ne suis pas sûr, apparemment ils l'atterrissent en interne et je ne sais pas quel est le processus pour cela, n'est-ce pas?

Lorsque votre pull request est fusionné, Facebook l'incorpore d'abord dans son dépôt interne React Native et exécute des tests supplémentaires dessus, entre autres. Lorsque cela réussit, la modification est exportée vers le référentiel GitHub.

En regardant l'activité de votre pull request, vous pouvez voir que votre validation est désormais fusionnée sur GitHub . En regardant les informations de commit, vous pouvez voir dans quelles branches il est inclus. Actuellement, il est uniquement dans la branche "master":

À titre de comparaison, si vous regardez un commit plus ancien, vous pouvez voir qu'il apparaît dans un certain nombre de branches:

Au début de chaque mois, une nouvelle branche release candidate est créée sur la base de "master". Donc, votre changement sera probablement dans la prochaine version candidate au début du mois de mars. Vous pouvez en savoir plus sur le calendrier de sortie de React Native dans cet article de blog .

Adam Comella
Microsoft Corp.

Quelqu'un at-il vérifié ce problème avec la dernière RN 54? Pour moi, il revient toujours «vrai» maintenant sur iOS et sur Android, cela fonctionne parfaitement. Quelqu'un d'autre voit ce problème?

0.53 toujours faux .. @deepaksasken .. il semble que je

@ alien3d Vous voulez dire le désactiver pour iOS et le conserver uniquement pour Android? Sous Android, ça marche?

@afilp je suis juste l'exemple ci-dessus pour iOS

    if (Platform.OS === "ios") {
            isConnected = await fetch("https://www.google.com");
            if (isConnected) { }
  } else { 
    NetInfo.isConnected.fetch().done(
                (isConnected) => {
                    if (isConnected) { }
} 

J'ai encore besoin de nombreux tests avant de le considérer comme stable. utilise maintenant le dos 0.530

@ assafb81 Avez-vous trouvé une solution au problème du mode avion? J'utilise votre solution en 0.53.

@aflip Lorsque les données sont activées mais qu'il n'y a toujours pas de package, elles retournent isConnected true. Avez-vous essayé de le résoudre?

Pourquoi y a-t-il un removeEventListener. L'application ne devrait-elle pas écouter les changements du réseau à tout moment? N'importe qui?

Avoir également le même problème que les utilisateurs ci-dessus. Les écouteurs d'événements NetInfo semblent être très peu fiables. J'ai essayé plusieurs des solutions de contournement ci-dessus sans résultats stables. Pour l'instant, je vais compter sur la récupération de https://google.com ou d'un point de terminaison de santé sur mes propres serveurs pour m'assurer que mes utilisateurs disposent d'une connexion Internet.

@MichaelPintos Cela fonctionne pour moi, merci.

RN 0,54,2
OS: iOS
même problème, toujours inconnu

Quand je passe RN à 0,55,3

J'utilise ce code, retourne d'abord inconnu, puis ça marche

    NetInfo.getConnectionInfo()
        .then()
        .done(() => {
                switch (connectionInfo.type) {
                    case 'none':
                        Alert.alert('aa', 'none');
                        break;
                    case 'wifi':
                        Alert.alert('aa', 'wifi');
                        break;
                    case 'cellular':
                        if (connectionInfo.effectiveType !== 'unknown') {
                            Alert.alert('aa', `cellular ${connectionInfo.effectiveType}`);
                        } else {
                            Alert.alert('aa', 'cellular unknown');
                        }
                        break;
                    case 'unknown':
                        Alert.alert('aa', 'unknown');
                        break;
                    default:
                        Alert.alert('aa', 'default');
                        break;
                }
            });
        });

Ok, alors faisons un petit truc.

    NetInfo.getConnectionInfo()
        .then()
        .done(() => {
            NetInfo.getConnectionInfo().then(connectionInfo => {
                switch (connectionInfo.type) {
                    case 'none':
                        Alert.alert('aa', 'none');
                        break;
                    case 'wifi':
                        Alert.alert('aa', 'wifi');
                        break;
                    case 'cellular':
                        if (connectionInfo.effectiveType !== 'unknown') {
                            Alert.alert('aa', `cellular ${connectionInfo.effectiveType}`);
                        } else {
                            Alert.alert('aa', 'cellular unknown');
                        }
                        break;
                    case 'unknown':
                        Alert.alert('aa', 'unknown');
                        break;
                    default:
                        Alert.alert('aa', 'default');
                        break;
                }
            });
        });

C'est ma solution. Attendez-vous à une solution officielle.

Mis à jour à 55 spécifiquement parce que le journal des modifications a déclaré qu'il était censé résoudre ce problème - toujours cassé (0.55.3).

Je peux le faire fonctionner en utilisant une solution similaire à @ yuyao110120 :

NetInfo.isConnected.fetch().then(() => {
  NetInfo.isConnected.fetch().then(isConnected =>
    // isConnected is now the correct value
  });
});

Je ne fais plus confiance à NetInfo (react-native 0.53.3)
Voici ce que je fais pour m'assurer qu'il y a Internet:

async function handleConnectivityChange(status) {
  const { type } = status;
  let probablyHasInternet;
  try {
    const googleCall = await fetch(
        'https://google.com', {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: 0,
        },
      });
    probablyHasInternet = googleCall.status === 200;
  } catch (e) {
    probablyHasInternet = false;
  }

  console.log(`@@ isConnected: ${probablyHasInternet}`);

}

  NetInfo.getConnectionInfo().then(handleConnectivityChange);
  NetInfo.addEventListener('connectionChange', handleConnectivityChange);

@SudoPlz J'ai fait la même chose sur mes applications, ça marche très bien. Mais l'API NetInfo devrait être résolue haha!

@SudoPlz J'ai remarqué que fetch met en cache la requête sur Android. Vous devrez lui donner des en-têtes pour éviter cela.

      const googleRequest = await fetch('https://www.google.com', {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          'Pragma': 'no-cache',
          'Expires': 0
        }
      });

Ok merci de m'avoir fait savoir @AbdallaMohamed J'ai mis à jour le commentaire.

identique à @kylevdr , a fonctionné de manière fiable, mais l'ajout d'un petit délai avant le deuxième appel semble aider avec le scintillement où il sera déconnecté pendant une fraction de seconde juste après le déverrouillage

Edit: fwiw cela fonctionne dans 55.3, mais pas 55.4

L'ajout d'un écouteur d'événement de connexion initial fera que NetInfo.getConnectionInfo() et NetInfo.isConnected.fetch() fonctionneront correctement lors du premier appel.

const onInitialNetConnection = isConnected => {
    console.log(`Is initially connected: ${isConnected}`);

    NetInfo.isConnected.removeEventListener(
        onInitialNetConnection
    );
};

NetInfo.isConnected.addEventListener(
    'connectionChange',
    onInitialNetConnection
);

// both now work on the first call.
await NetInfo.getConnectionInfo();
await NetInfo.isConnected.fetch();

Merci # 8469

Assurez-vous d'importer ce fichier sinon il ne s'exécutera pas.

PS Si vous utilisez fetch , utilisez method: 'HEAD' pour réduire la quantité de données transmises.

Aucune des solutions ci-dessus ne fonctionnait lors de l'exécution de l'application en mode débogage sur un iPhone 8 (React Native 0.55.3, iOS 11.3.1) dans le scénario suivant: Fermez l'application et démarrez-la avec les données mobiles et le wifi désactivé.

Tous les événements ultérieurs sont perdus avec toutes les solutions mentionnées ci-dessus (à l'exception de la réponse de NetInfo .

@nlindroos, alors confirmez-vous réellement que NetInfo fonctionne correctement sur les appareils qui exécutent la version finale ?

Dans le cas spécifique du _démarrage_ de l'application en mode hors ligne sur un appareil iOS physique, l'exécution en mode version était la seule solution qui fonctionnait pour déclencher des événements NetInfo . Je n'ai pas suffisamment testé tous les scénarios associés pour me porter garant de cela en tant que solution générique à tous les problèmes NetInfo .

Je peux dire que la combinaison des solutions que @woodpav et @AbdallaMohamed a fonctionné pour moi
J'utilise RN version 0.55.4

Je dois fréquemment envoyer un ping au serveur Google pour vérifier la connexion Internet 😕

J'utilise le simulateur iPhone 8 - 11.3 et la version RN 0.55.4 NetInfo.isConnected.fetch (). Then (isConnected => console.log ('isConnected', isConnected))
Renvoie toujours false. C'est aussi un problème de production au téléphone. J'ai essayé des variantes de données mobiles et de wifi.

Lors du retour à la version RN 0.55.3, il semble fonctionner à nouveau.

@octopitus , @martinentelect
c'est mon code, j'utilise la version native de react 0.55.4, et c'est une solution de contournement sensée et fonctionnelle jusqu'à ce que NetInfo soit corrigé.
Dans mon fichier api.js, j'ai ce code

import { NetInfo } from 'react-native';
import { url } from '[AppName]/src/config';

export const onInitialNetConnection = () => {
    NetInfo.isConnected.removeEventListener(onInitialNetConnection);
};

const getDataById = async (dataId) => {
    // both now work on the first call.
    await NetInfo.getConnectionInfo();
    const isConnected = await NetInfo.isConnected.fetch();
    if (!isConnected) {
        throw new Error('networkError');
    }
    const response = await fetch(`${url}${dataId}`, {
        headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            Pragma: 'no-cache',
            Expires: 0,
        },
    });
    if (response.ok) {
        return response.json();
    }
    throw new Error('invalidCode');
};

export default getDataById;

Dans mon fichier App.js (mon point d'entrée dans l'application) j'ajoute l'écouteur d'événements:

NetInfo.isConnected.addEventListener(
            'connectionChange',
            onInitialNetConnection,
        );

@ assafb81 Merci! Cela a aidé mon cas d'utilisation.

Dans mon cas, l'écouteur d'événements fonctionne parfaitement sur iOS mais pas du tout sur Android (sur l'émulateur au moins).
Existe-t-il des solutions de contournement pour les auditeurs sur Android tout en utilisant NetInfo?

    NetInfo.isConnected.addEventListener(
      "connectionChange",
      this.handleConnectionChange
    ); 

Utilisation

this.count = 0
handleConnectivityChange(isConnected) {
   //for iOS
    this.count++
  console.log(isConnected + "isConnected")
  if(this.count > 1){
    console.log(isConnected + "this is the right value")
  }

@tannera ,
vérifier sur un appareil Android réel et non sur un émulateur

Sur 0.55.4 c'est toujours un bogue, et je viens d'être touché en production 😢

Toujours pas fixé sur 0.56

@SudoPlz J'ai caché votre commentaire sur le fil de discussion 0.57 comme étant hors sujet. Comme vous le savez, il y a des centaines de problèmes ouverts dans le référentiel, mais ce fil est axé sur la sortie d'une version 0.57.

Ce fil sur un fermé est quasiment invisible pour les responsables, et je suis surpris que six mois après l'atterrissage d'un correctif potentiel, personne n'ait ouvert un nouveau problème. Si c'est quelque chose que vous aimeriez voir corrigé dans master, veuillez ouvrir un nouveau problème avec des détails et, idéalement, envoyer un PR.

Voici un exemple minimal reproductible (testé sur un appareil iOS), avec du code de @woodpav partagé ci-dessus pour contourner le problème commenté en haut: https://snack.expo.io/@notbrent/netinfo -repro.