如何在本机反应中检查互联网连接答案

【问题标题】：How to check the internet connection in react native如何在本机反应中检查互联网连接
【发布时间】：2020-01-02 12:28:18
【问题描述】：

我正在做 react native 项目，我正在使用 @react-native-community/netinfo 包来检查互联网状态。它对我有用，但我有一个疑问，如果一个人使用 wifi 连接互联网，但 wifi 设备没有连接到互联网，那么如何找到它。？

【问题讨论】：

标签： react-native

【解决方案1】：

您可以使用isInternetReachable 进行检查。这是我在项目中使用的工作代码 sn-p。

  React.useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      console.log('Connection type', state.type)
      console.log('Is Internet Reachable?', state.isInternetReachable)
      if (connected !== state.isInternetReachable)
        setConnected(state.isInternetReachable)
    })
    return () => unsubscribe()
  }, [connected])

【讨论】：

【解决方案2】：

似乎这个问题遍布stackoverflow，似乎没有人查看其他现有答案。

您应该使用“@react-native-community/netinfo”库。 NetInfo 曾经是 react-native 的一部分，但后来它从核心中分离出来。如果您想观察网络状态变化，只需使用提供的 addEventListener 方法即可。

import NetInfo from "@react-native-community/netinfo";

NetInfo.fetch().then(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
    console.log("Is reachable?", state. isInternetReachable);
});

const unsubscribe = NetInfo.addEventListener(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
    console.log("Is reachable?", state. isInternetReachable);
});

// Unsubscribe
unsubscribe();

【讨论】：

【解决方案3】：

import React, { useState, createRef, useEffect } from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  Text,
  ScrollView,
  Image,
  Keyboard,
  TouchableOpacity,
  KeyboardAvoidingView,
  PermissionsAndroid,
  Dimensions,
} from 'react-native';


import LottieView from 'lottie-react-native';
const slide1 = require('../Image/NetworkImage.json');
import NetInfo from "@react-native-community/netinfo";
import { default as LibModal } from 'react-native-modal';
const ScreenWidth = Dimensions.get('window').width;

const LoginScreen = ({ navigation }) => {

  const [isOffline, setOfflineStatus] = useState(false);
  const [isLoadingNet, setLoadingNet] = useState(false);


  const NoInternetModal = ({ show, onRetry, isRetrying }) => (

    <LibModal isVisible={show} style={styles.modalNet} animationInTiming={600}>
      <View style={styles.modalContainerNet}>
        <LottieView style={{ height: '100%', }} source={slide1} autoPlay />

      </View>
    </LibModal>
  );

  

  useEffect(() => {
  
    const removeNetInfoSubscription = NetInfo.addEventListener((state) => {
      const offline = !(state.isConnected && state.isInternetReachable);
      setOfflineStatus(offline);
    });
    return () => removeNetInfoSubscription();
  }, []);


  return (
    <View style={styles.mainBody}>
    
            <NoInternetModal
              show={isOffline}
              // onRetry={getChartData}
              isRetrying={isLoadingNet}
            />
    </View>
  );
};
export default LoginScreen;

const styles = StyleSheet.create({

  modalNet: {
    alignItems: 'center',
    height: '70%',
    width: ScreenWidth,
    margin: 0,
  },
  modalContainerNet: {
    alignItems: 'center',
    height: '70%',
  },
  modalTitleNet: {
    fontSize: 21,
    color: '#000000',
    fontWeight: '800',
    fontFamily: 'Roboto',
  },
  modalTextNet: {
    fontSize: 18,
    color: '#000000',
    marginTop: 14,
    textAlign: 'center',
    marginBottom: 10,
    fontWeight: '400',
    fontFamily: 'Roboto',
  },
  buttonNet: {
    backgroundColor: '#000',
    paddingVertical: 12,
    paddingHorizontal: 16,
    width: '100%',
    alignItems: 'center',
    marginTop: 10,
  },
});

【讨论】：