在我的 React Native 项目中没有显示互联网连接

Question

I'm new in react native, I made simple project that gives data from API now, I want to show notice if I'm offline then show message or alert

no internet connection

is there a helpful library? and how can I use it?

thanks

Answer 1

Don't use Library React Native has API called NetInfo to check the network

From my experience Android and IOS needs separate codes .

I will give you my approach.

First create a utils file NetworkUtils.js

Code below :

import { NetInfo } from 'react-native';

export function addNetworkCheckListener(callback) {
    NetInfo.isConnected.addEventListener('connectionChange', callback);
}

export function removeNetworkCheckListener() {
    NetInfo.isConnected.removeEventListener('connectionChange');
}

export function isNetworkAvailable(callback) {
    NetInfo.isConnected.fetch().then(isConnected => {
        callback(isConnected);
    });
}

In my case i checked it in Login.js

Import the functions from util file to your needed file.

code below :

import {
    isNetworkAvailable as isNetAvail,
    addNetworkCheckListener,
    removeNetworkCheckListener
} from '../../Utils/NetworkUtils';

   constructor(props) {
        super(props);
         this.isNetworkAvailableBinder = this.isNetworkAvailableBinder.bind(this);
    }

componentDidMount() {
    addNetworkCheckListener(this.isNetworkAvailableBinder);
    if (isAndroid()) {
            this.checkAndroidNetworkAvailable();
        }
}

componentWillUnmount() {
    removeNetworkCheckListener(this.isNetworkAvailableBinder);
}

checkAndroidNetworkAvailable() {
    isNetAvail((isConnected) => {
        // Check isConnected for ANDROID
       if(isConnected){
          alert("Connected to internet");
         }
      else {
          alert(" Not connected to internet");
       }
    });
}

isNetworkAvailableBinder(isConnected) {
        // Check isConnected for IOS
     if(isConnected){
          alert("Connected to internet");
         }
      else {
          alert(" Not connected to internet");
       }
 }

Answer 2

You can use below code to solve your issue

import {NetInfo} from "react-native";
componentDidMount() {

    NetInfo.isConnected.addEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  }
  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  }
 handleConnectivityChange = isConnected => {
    if (isConnected) {
      this.setState({ isConnected });
    } else {
      alert("Oops!! No Internet Connection Available");
      this.setState({ isConnected });
    }
  };

Answer 3

Simply call a alert function if there is no response from an api, like below UserLogin = async () =>

{
        fetch('http://your api', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                phone: this.state.Phonenumber,
                password: this.state.Password,
            })
        })
            .then((response) => response.json())
            .then((responseData) => {
                if (responseData) {
                  Alert.alert(responseData.message);

                } else {
                    Alert.alert(responseData.message);
                }
            })
            .catch((error) => {
                Alert.alert('No Internet Connection');
            })
    }

Answer 4

Following the material desgin, you should use the react-native-sackbar

And Use the React Native's API NetInfo to check the network.

Cheer!

Answer 5

React native has a native library named Netinfo that permits you to get that information. Example :

import {NetInfo} from 'react-native';

NetInfo.isConnected.addEventListener('connectionChange', (hasInternetConnection) = console.debug(`hasInternetConnection:`, hasInternetConnection));

Answer 6

export default class InternetConnectionPopUp extends Component {
    constructor(props) {
        super(props);
        this.state = {connectionInfo: ''}
        this.handleFirstConnectivityChange = this.handleFirstConnectivityChange.bind(this);
    }
    handleFirstConnectivityChange(connectionInfo) {
        this.setState({connectionInfo: connectionInfo.type})
    }

    componentDidMount() {
        NetInfo.getConnectionInfo().then((connectionInfo) => {
            this.setState({connectionInfo: connectionInfo.type})
        });
        NetInfo.addEventListener('connectionChange',this.handleFirstConnectivityChange);
    }

    componentWillUnmount() {
        NetInfo.removeEventListener('connectionChange', this.handleFirstConnectivityChange);
    }

    render() {
        const { connectionInfo } = this.state
        connectionInfo == 'none' ?
                <Modal
                visible={true}
                animationType={'slide'}
                transparent
                onRequestClose={() => {}}
                >
                    <Text>No Internet Connection</Text>
                </Modal>
            :
            null
        }
    }