React-native: iOS：NetInfo.isConnectedは常にfalseを返します

これはRN0.29.0でも再現できます。 以前は0.26.2で実行していましたが、問題なく動作しました。 ソースからビルドしてデバッグしてみます。

+1

以前に同じ問題を報告しました： https ：

簡単な回避策は、イベントハンドラーNetInfo.isConnected.addEventListener('change', Function.prototype)を追加することです。

+1とNetInfo.fetch（）。done（）の同じ問題-常にunknown返します

私はそれをこのように解決しました：

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

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

+1

このバグは0.29.2で見つかりました。

このバグは0.28で見つかりました

0.30.0がまだ機能しない

関連するコードは変更されていないため、まだ機能していないことは理にかなっています。

以前にここでバグを報告したことに注意してください： //github.com/facebook/react-native/issues/8469ここでは、原因の詳細とサンプルコードが添付されています。 このため、これを閉じたままにしておくのは理にかなっていると思います。

未解決のRNの問題の数は日々増加しているため、私たちの役割を果たし、可能な場合は統合することが重要です。

私は今日同じ問題に気づきました

0.30.0バージョンを使用していますが、このエラーも見つかりました。

同じ問題ですが、 RN @ 0.30.0を使用していますが、フェッチは常に不明を返します。

ただし、代わりにaddEventListenerを使用できます。

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

の代わりに：

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

@ facebook-github-botのバグ

0.31でこの問題が発生していますが、修正されますか？

0.32と同じ

@knowbodyスニペットはどのように機能しますか？ クラスで、またはグローバル関数として、または他の何かとしてsetIsConnectedメソッドを定義する必要がありますか？ なぜなら、実際にはCan't find variable: setIsConnectedと言ったエラーがあります

@florentsorelなので、私のプロジェクトでは状態管理にreduxを使用し、 setIsConnectedはアクションクリエーターです。これは次のようになります。

actions/network.js

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

そして、私は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

v0.34.1でこの問題が発生しています

編集：v0.35.0に更新し、同じ問題。

v0.35.0でも同じ

v0.36.0でも同じ問題が発生しています

@knowbodyスニペットは0.36で動作します

@Dnld ： @Ehespは、

基になるコードは実際には変更されていないので、これが「修正」されているとしたら驚きます。

この変更の動機は、アプリケーションコードがネットワークステータスの監視に関心がある場合にのみ、ネットワークステータスを監視するネイティブの機械を設定することであると思われるため、修正を引用符で囲みます。

アプリは、到達可能性のチェックをイベントリスナーを、関心を登録します。

この時点では、これが望ましい動作であるように思われるため、おそらくドキュメントの変更が必要です。 NetInfo.isConnectedはブール値を返すため、状態が不明であり、イベントリスナーを追加するまで状態が変更されないことを表しません。 または、関数を変更してnullまたはブール値を返すこともできます。

私のアプリには、 @ knowbodyが投稿したものと非常によく似たコードがあります。 ただし、起動時には役に立たないので、 NetInfo.isConnected.fetch()はまったく呼び出しません。

接続があると仮定し、リスナーを追加すると、接続状態が不明でなくなったときに状態が更新されます。

0.34.1がまだ機能しない

RN0.37.0と同じ問題

@ xing-zheng何らかの理由で、コンピューターのWi-Fiをオフにしても、ソリューションは「MOBILE」のみを返します。これはエミュレーターに反映されます。 理由は何ですか？

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

RN0.38.0と同じ問題

0.39でも同じ

addEventListenerソリューションを試してみると、NetInfoは1つまたは2つの接続変更のみを検出します。 たとえば、接続を開始してからドロップすると、Netinfoはそれを検出しますが、再接続すると、接続されていることを検出できません。 NetInfoは、回避策があっても、私のアプリで非常に多くの誤検知を生成しています。 他の誰かが同じことを経験していますか？

これを解決するには、奇妙な回避策を作成する必要がありました。 何らかの理由で、一方の方法はAndroidで機能し、もう一方の方法はiOSで機能します。 これに対する修正は素晴らしいでしょう。

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それは機能していません。

RN- 0.39 +

関数handleFirstConnectivityChange（isConnected）{
if（！sConnected）{
//アクションを実行します
}
NetInfo.isConnected.removeEventListener（ 'change'、handleFirstConnectivityChange）;
}

if（Platform.OS === 'ios'）{
NetInfo.isConnected.addEventListener（ 'change'、handleFirstConnectivityChange）;
} そうしないと {
NetInfo.isConnected.fetch（）。then（isConnected => {
if（！sConnected）{
//アクションを実行します
}
}

手伝ってくれませんか。

@imbudhirajaどのプラットフォームでも動作しますか？

いいえ、どのプラットフォームでも機能していませんでした

ありがとう
マニッシュブディラジャ

2017年1月3日午後8時12分、「RobertoDias」 [email protected]は次のように書いています。

@imbudhiraja https://github.com/imbudhirajaは、
プラットフォーム？

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/facebook/react-native/issues/8615#issuecomment-270128504 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AVTjXHSe8OcVq8fQ5XVk8hh9XXHfHFVZks5rOl5ggaJpZM4JGaBc
。

これには2つの問題があるようです。

1. isConnected.fetchはiOSで壊れているようです-修正は簡単なはずです。 @ robertodias180によって投稿された回避策は、別のメソッドでネイティブコードをクエリするため、理にかなっています。
2. NetInfo flakynessは@Aristekratで説明しました。 これはもっと心配です-誰かがこの問題を再現するための詳細な方法を提供するのを手伝ってくれるでしょうか？ その後、私はそれを修正するのを手伝うことができるはずです。

RN 0.38.1以前、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);

};

最初のNetInfo.isConnected.fetch().then(this._handleConnectionInfoChange);は、現在の接続ステータスを正しく取得します。 ただし、接続ステータスへのその後の変更は、eventListenerによってキャプチャされません。

私は現在、多くのRNバージョンでこの問題を抱えています。

@imbudhiraja私は結局「よりクリーンな」もののコードを変更しました。 ネットワーク接続の現在の状態を持つユーティリティがあります。 これは両方のプラットフォームで機能しています。 アプリが開いたらinitializeConnection 、必要なときはisConnectedです。 アプリを開いたときにNetInfoが接続ステータスを取得するまでに時間がかかる場合があることに注意してください（特にAndroidの場合）。 hasConnection !== nullまで延期しました。 それが役に立てば幸い

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;
}

同様のことを試みましたが、接続が（シミュレーターで）戻ったときにeventListenerがそれを検出しないという状況に遭遇し続けます。

インターネットに接続せずにアプリをリロード=>検出
インターネットをオンに戻す=>検出されない

インターネット接続でアプリをリロード=>検出
インターネットをオフにする=>検出された
インターネットをオンに戻す=>検出されない

<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();

    }

[...]

変更のたびにリスナーを削除して再度追加しようとしましたが、喜びはありませんでした。

@mschipperheyn @knowbodyが以前に投稿したアプローチを使用して、まったく同じ問題が発生しています。

ドキュメントは、 handleFirstConnectivityChange介した最初の変更のみを処理することも示唆しています。 これは正しいですか、それともその後のすべての変更を検出する必要がありますか？

あなたが持っていることを確認してください

Androidマニフェストファイルに設定します。 これは私をつまずかせた。

RN0.41.0と同じ問題

iOSでは、リスナーを追加せず、SCNetworkReachabilitySetCallbackを登録しません。 確かに機能していません。 設計目的は何ですか？

0.41.2と同じ

@djohnkirbyコメントに投稿する

AndroidManifest.xmlに追加する行は次のとおりです。

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

0.39.2：同じ問題。 NetInfo fetch結果は常にfalseであるだけでなく、アプリの起動後すぐに接続ステータスの変化を検出します

0.42.0：同じ問題。 私はここで私の問題についても説明しました： https ：
iOSとmacOSSierraでテストしています。

更新：私の問題は、シミュレーターでのテストが原因でした。実際のデバイスでは、すべてが機能しています。 上記のリンクで回答しました。

私は同じ問題を抱えています:(

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

アプリがシミュレーターで実行されているかどうかを誰かが知りたい場合： http ：

バグではありません。 ネイティブモジュールRCTNetInfoはRCTEventEmitterサブクラスであるため、 startObservingメソッドをトリガーするオブザーバーを追加する必要があります。
アプリの起動プロセスで、任意のオブザーバーをNetInfoに追加すると、 fetch関数を呼び出すことができます（NetInfo.isConnectedは実際にフェッチ関数を呼び出します）

@ robertodias180の提案によると、私はisConnectedのラッパーを思いついた。
うまくいくようですが、すべての場合にうまくいくのだろうか

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();
}

同じ問題。 0.40

同じ問題が発生しています

0.42.3-シミュレータと実際のデバイスの両方でiOSを実行すると同じ問題が発生しました。 @ Knight704のソリューションを使用すると、問題が軽減されました。

0.42.3でも同じ

0.43.1でも同じ

0.40でこれを見る

この問題もあります。 ランダムに動作させることができた後、動作を停止しました。

@ Knight704のソリューションは最初は機能しましたが、何らかの理由で、モーダルのナビゲーターの2番目のレイヤー内から一度呼び出すと、モーダルを閉じた後でも関数が機能しなくなります（handleFirstConnectivityChangeIOSは呼び出されません）。 非常に奇妙な動作です。これが機能しない理由や、コードベース内でNetInfoでうまく機能していないものであるかどうかはわかりません。

私は何が欠けていますか？

    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 ()
}

だから私がそれを実行すると、それは私に時々、常にではない警告を与えます....

これらは、接続がある場合でもアラートを表示したときに返されるコンソールログです。

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

私は、@ Knight704から修正プログラムを使用する場合@SteffeyDevと同じ問題が発生してhttps://github.com/facebook/react-native/issues/8615#issuecommentほとんどの場合-287977178、これは私が持っているしかしとき、うまく動作しますプッシュまたはポップされたモーダルは、 changeイベントがすでに発行されていると想定しているため、同じコードが解決されることはありません。

これらの条件下で、 NetInfo.fetch()がunknown状態を返すことに気付きました（これにより、 false下でNetInfo.isConnected.fetch() falseがトリガーされるため、回避できました。元の回避策に次の変更を加えます。

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');
  });
}

AndroidはUNKNOWN返すため、 unknown条件はiOSでのみトリガーされます。 これは、ステータスを返す前に小文字にする理由でもあります。これは、 NetInfo.isConnected.fetchからの既存の動作を多かれ少なかれ保持するはずだからです。

0.44でも同じ

最初、NetInfoは1サイクル（オン->オフ）後にのみネットワークステータスの変更を返したいことに気づきました。 シミュレーターでのみその問題があることが判明しました。 実際のデバイスでは、複数の接続/切断サイクルでもコールバックを適切に起動します。

サンプルコード

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

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

この問題はしばらくの間私を悩ませ、私は間接的にRNオフライン/オンライン検出に焦点を当てた小さなユーティリティライブラリを作成しました。これには典型的なReactパターンとreduxとの素晴らしい統合が含まれています。

AndroidとiOSの両方の実際のデバイスで正しく動作します。 ただし、iOSシミュレーターでリスナーがトリガーされず、接続状態が不整合になる場合があることを確認することもできます。 @ knight704と@Ignigena （それぞれこことここ）によって提案されたソリューションはまだ試していませんが、時間があればすぐにテストする予定です。

これらのソリューションが魅力のように機能することを確認する人が増えた場合にも、PRは大歓迎です！

修正してください。

これがすぐに修正される可能性が低い場合は、少なくともドキュメントを更新して、これがiOSで機能しないことを示すことができますか？

@ jpb12 PRを作成して、それらがマージされるかどうかを確認する価値があるかもしれません。 それが忘れられているように見えるので、実際にこれをより目に見えるようにするかもしれません。

私はAndroidバージョンでこの問題に直面しています。 バックグラウンドに移動してフォアグラウンドに戻ることに関連しているようです。 残念ながら、この問題を確実に再現することはできませんが、いくつかのバックグラウンド/フォアグラウンド遷移の後に確実に発生します。 特にその時に接続状態が変更された場合

それが起こったとき
NetInfo.isConnected.fetch().then(isConnected => {...})常にfalse返します
NetInfo.fetch().then((reach) => {...})常にNONE返します
リスナーの追加/削除は役に立ちません

実際の接続ステータスを検出するための信頼できる方法があれば非常にありがたいです

Wi-Fiに接続するとisConnectedがtrueを返すため（これまでのところ問題ありません）、奇妙な動作に直面していますが、モデムがインターネットに到達しない場合でも、isConnectedはtrueです。 ネットワーク接続だけでなく、インターネット接続を効果的にチェックする方法がよくわかりません。 何か案は？ ありがとう

@kodatechこのモジュールは、その問題の解決に役立つはずです。 最近プロジェクトで使用しましたが、 https：//github.com/rauliyohmc/react-native-offlineを強くお勧めし

@craigcolesに感謝し

@ Knight704ありがとう仲間。

@craigcoles私が従うことができる実用的なコードはありますか？

@nmfzone表示できるものはありませんが、 Readmeにはたくさんのコード例があります😃

私は次のようにNetinfoリスナーイベントを使用しています。両方のプラットフォームでうまく機能します。
"react-native"： "0.43.4"、

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

    }

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

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

@ sumesh1993私の経験から、Androidアプリが（バックグラウンドで）最小化されている場合、 'change'イベントに反応しません。 Galaxy Note 5、Android7.0でテスト済み

上記で推奨されたモジュールhttps://github.com/rauliyohmc/react-native-offlineは、 https://google.com継続的にpingします。 動作しますが、このバグを修正したいと思います

Androidアプリはバックグラウンドで中断されるため、これは理にかなっています。 イベントを受信するには、アプリが一時停止されている間も実行を継続するサービスを作成する必要があります。

または、 onResumeハンドラーをアプリに追加して、オフラインステータスをクエリすることもできます。 これは、サービスを作成および管理するよりも簡単なはずです。

@ alsh76私にとっては、アプリがバックグラウンドにあるときに機能しますが、マルチタスクメニューからアプリを
ホーム画面が起動するたびに次の関数を呼び出すことで解決しました。
if(Platform.OS === 'android'){ NetInfo.isConnected.fetch().then(isConnected => { if(!isConnected) return; //Do something }); }

Android仮想デバイスで同じ問題に遭遇しました。 しかし、問題は、数日前は問題なく、iOSデバイスとエミュレーターでも問題がなかったということです。 誰かがネットワーク接続ステータスを取得するための安定した正しい方法を見つけましたか？

iOSで私のためにトリックをしてくれた@ sumesh1993に感謝します！
@igorarkhipenko彼の提案を試しましたか？

こんにちはあなたは許可を追加しましたか例えばアンドロイドは追加する必要があります
AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

NetInfo.fetchが非推奨になったため、 @ Knight704と@Ignigenaによるソリューションのほんの少しの更新。 これは私にとってトリックでした：
`` `
const isNetworkConnected =（）=> {
NetInfo.getConnectionInfo（）。then（reachability => {を返す
if（reachability.type === '不明'）{
新しいPromise（resolve => {を返す
const handleFirstConnectivityChangeIOS = isConnected => {
NetInfo.isConnected.removeEventListener（ 'connectionChange'、handleFirstConnectivityChangeIOS）;
resolve（isConnected）;
};
NetInfo.isConnected.addEventListener（ 'connectionChange'、handleFirstConnectivityChangeIOS）;
}）;
}
return（reachability.type！== 'none' && Reachability.type！== 'unknown'）
}）;
}

Imho NetInfo.isConnected.fetch()は重要な機能であり、できるだけ早く修正する必要があります。

@javache @sahrens @davidaurelio @janicduplessis @hramos @shergin @rigdernこれにタイムラインはありますか？

THX！

@pensierinmusicaこれはコミュニティ主導のプロジェクトなので、良いPRをしたいと思います。

@shergin React Nativeは、Facebookによって内部的に作成、保守、使用されており、この理由から

cc @rigdern

RNコアコードの多くは、コミュニティによって作成および保守されています。

また、Facebookで使用されていない機能が多数あるため、それらに優先順位を付けて、作成者がバグ/ユースケースの修正を確認できるコミュニティPRを優先することは困難です。

また、iOSとのreact0.47.0で問題が発生しています。

@pensierinmusicaこの問題は間違いなく優先されるべきです。 .isConnected（）からブール値を返すことはどれほど難しいでしょうか？

さて、これがトリックを実行するはずのすぐに使える回避策です（私にとってはそうです）。 アクティブになることがわかっているサイトにhttpリクエストを送信し、応答を評価します。

箱から出してすぐに機能するレポを初期化しました。 https://github.com/JamesDorrian/NetInfoCheckConnection/tree/master

注：httpAddress変数をhttps://www.galwaydaily.comから別の変数（おそらくgoogle.com）に変更して

@pensierinmusica @anujsinghwd

@JamesDorrianありがとう、私は「google.com」にpingを実行して、同様のことをすることになりました。

スニペットは次のとおりです。

// /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;
};

それでも、これは一時的な回避策であり、 NetInfo.isConnectedはできるだけ早く修正する必要があると思います。

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

この問題に関する+1コメントで停止できますか？これがリアクションの用途です。

ios：
最初のリクエスト。 サーバーがクラッシュした場合、電話にはWi-Fiがあります。
NetInfo.isConnected.fetch（）。then（（isConnected）=> {常にfalse}
0.49.3。

@kddcあなたのソリューションは開発でうまく機能しているようです👍

ここで提供されているAppleのXCodeプロジェクトにReachabilityLibraryを追加するだけで、それが解決策になります。

@fuatsengul XcodeプロジェクトのライブラリとしてReachabilityプロジェクトを追加しましたが、それでも問題は解決していません。問題を解決するために他に何をする必要があるかを簡単に説明してください。 ありがとう。

問題はフェッチAPIでのみ発生するようです。ただし、イベントリスナーの追加はiOSます。ただし、addEventListenerはAndroidでは機能しないため、フェッチAPIを使用する必要があります:)

これが両方の世界で機能するようにするための私のスニペットです：

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,
    )
  }

接続されていても、IOSでオフラインで表示されます
RN-0.50

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

@kddc回避策をありがとう。
iOSデバイスで問題が発生しています。シナリオは次のとおりです。

1. iOS->機内モードがオンになっている
2. フェッチを実行->「ネットワークエラー」を取得、isConnectedはfalse 、reachability.typeはnone
3. iOS->機内モードがオフです
4. フェッチを実行->「ネットワークエラー」を取得、isConnectedはfalse 、reachability.typeはnone

機内モードを変更している間、バックグラウンドでアプリケーションが実行されている間中。
アプリを再起動するだけで、新しいネットワーク接続が「キャッチ」されます。

+1

+1

修正してくれてありがとう@ alburdette619
だから、これは修正され、バージョン0.54で利用可能になりますか？

@ assafb81よくわかりません、どうやら彼らはそれを内部に着陸させているようです、そして私はそのためのプロセスが何であるか

プルリクエストがマージされると、Facebookは最初にそれを内部のReact Nativeリポジトリに組み込み、特に追加のテストを実行します。 それが成功すると、変更はGitHubリポジトリにエクスポートされます。

プルリクエストのアクティビティを確認すると、

比較のために、古いコミットを見ると、いくつかのブランチに表示されていることがわかります。

毎月初めに、「マスター」に基づいて新しいリリース候補ブランチが作成されます。 したがって、変更は3月の初めに次のリリース候補になる可能性があります。 React Nativeのリリーススケジュールの詳細については、このブログ投稿をご覧ください。

アダムコメラ
Microsoft Corp.

誰かが最新のRN54でこの問題を確認しましたか？ 私にとっては、iOSとAndroidでは常に「true」が返されますが、完全に正常に機能します。 この問題を見ている人は他にいますか？

0.53常にfalse .. @deepaksasken ..androidのコードのみを無効にする必要があるようです..多くのバグに対して0.54を使用できません。

@ alien3d iOSで無効にし、Androidでのみ保持するという意味ですか？ Androidでは動作しますか？

@afilp私は

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

安定していると見なす前に、まだ多くのテストが必要です。 現在は0.530を使用しています

@ assafb81機内モードの問題の解決策を見つけましたか？ 0.53であなたのソリューションを使用しています。

@aflipデータが有効になっているが、パッケージがまだない場合、isConnectedtrueを返します。 あなたはそれを解決しようとしましたか？

removeEventListenerがあるのはなぜですか。 アプリは常にネットワークの変更をリッスンするべきではありません。 誰でも？

上記のユーザーと同じ問題もあります。 NetInfoイベントリスナーは非常に信頼性が低いようです。 上記の回避策の多くを試しましたが、安定した結果は得られませんでした。 今のところ、ユーザーがインターネットに接続していることを確認するために、 https：//google.comまたは自分のサーバー上のヘルスエンドポイントを取得することに依存します。

@MichaelPintosそれは私のために働きます、ありがとう。

RN 0.54.2
OS：iOS
同じ問題、常に不明

RNを0.55.3にアップグレードすると

私はこのコードを使用しています、最初に不明を返し、それからそれは機能します

    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;
                }
            });
        });

では、ちょっとしたトリックをしましょう。

    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;
                }
            });
        });

これが私の解決策です。 公式の解決策を期待してください。

特に変更ログがこれを修正することになっていると言ったので55にアップグレードしました-まだ壊れています（0.55.3）。

@ yuyao110120と同様のソリューションを使用して、それを機能させることができ

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

NetInfo信用しなくなった（react-native 0.53.3）
これは私がインターネットがあることを確認するために行うことです：

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私は自分のアプリでかなり同じことをしましたが、問題なく動作します。 しかし、 NetInfo APIは修正する必要があります。

@SudoPlz fetchがAndroidでリクエストをキャッシュしていることに気づきました。 それを防ぐために、いくつかのヘッダーを付ける必要があります。

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

@AbdallaMohamedを知らせてくれて

@kylevdrと同じように、確実に機能しましたが、2回目の呼び出しの前に小さなタイムアウトを追加すると、ロックを解除した直後に2回目の分割で切断されるちらつきに役立つようです。

編集：fwiwこれは55.3で機能しますが、55.4では機能しません

最初の接続イベントリスナーを追加すると、最初の呼び出しでNetInfo.getConnectionInfo()とNetInfo.isConnected.fetch()が正しく機能します。

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();

ありがとう＃8469

必ずこのファイルをインポートしてください。インポートしないと実行されません。

PS fetchを使用している場合は、 method: 'HEAD'を使用して、送信されるデータの量を減らします。

次のシナリオでiPhone8（React Native 0.55.3、iOS 11.3.1）でデバッグモードでアプリを実行すると、上記のソリューションはいずれも機能しませんでした。アプリを閉じて、モバイルデータとWi-Fiをオフにして起動します。

上記のすべてのソリューションでは、後続のイベントはすべて失われます（ @SudoPlzの回答を除く）。 デバイスでリリースモードまたはシミュレーターでデバッグモードでのみアプリケーションを実行すると、 NetInfoイベントがトリガーされました。

@nlindroosでは、リリースバージョンを実行するデバイスでNetInfo正常に機能することを実際に確認しますか？

物理iOSデバイスでオフラインモードでアプリケーションを「起動」する特定のケースでは、リリースモードで実行することが、 NetInfoイベントをトリガーするための唯一の有効なソリューションNetInfo問題の一般的な解決策としてこれを保証するのに十分な、関連するすべてのシナリオをテストしていません。

@woodpavと@AbdallaMohamedが私のために働いたソリューションの組み合わせと言えます
RNバージョン0.55.4を使用しています

インターネット接続を確認するためにGoogleサーバーに頻繁にpingを実行する必要があります😕

私はiPhone8-11.3シミュレーターを使用しており、RNバージョン0.55.4ではNetInfo.isConnected.fetch（）。then（isConnected => console.log（ 'isConnected'、isConnected））
常にfalseを返します。 これは電話での制作でも問題です。 モバイルデータとwifiのバリエーションを試してみました。

RNバージョン0.55.3に戻すと、再び機能しているようです。

@ octopitus 、@ martinentelect
これは私のコードです。私はreactNativeバージョン0.55.4を使用しており、 NetInfoが修正されるまでは賢明で回避策があります。
私のapi.jsファイルにはこのコードがあります

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;

App.jsファイル（アプリケーションへのエントリポイント）に、イベントリスナーを追加します。

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

@ assafb81ありがとうございます！ これは私のユースケースに役立ちました。

私の場合、イベントリスナーはiOSで完全に機能しますが、Androidではまったく機能しません（少なくともエミュレーターでは）。
NetInfoを使用しているときにAndroidのリスナーに回避策はありますか？

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

使用する

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 、
エミュレータではなく実際のAndroidデバイスを確認してください

0.55.4これはまだバグであり、本番環境でヒットしました😢

0.56ではまだ修正されていません

@ SudoPlz0.57ディスカッションスレッドへのコメントをトピック外として非表示にしました。 ご存知のように、リポジトリには何百もの未解決の問題がありますが、そのスレッドは0.57リリースを出すことに焦点を当てています。

クローズされたこのスレッドは、メンテナにはほとんど見えません。潜在的な修正が行われてから6か月後、誰も新しい問題を開いていないことに驚いています。 これがマスターで修正してほしいものである場合は、詳細を記載した新しい問題を開いてください。理想的には、PRを送信してください。

これは最小限の再現可能な例（iOSデバイスでテスト済み）です。 @ woodpavのコードをます：