Question

我是React Native的新手，我做了一个简单的项目，可以从API提供数据现在，我想在脱机时显示通知，然后显示消息或警报

“没有互联网连接”

有一个有用的图书馆吗？以及我该如何使用它？

谢谢

Answer 1

您可以使用以下代码解决问题

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 2

如果没有api的响应，则只需调用一个警报函数，例如下面的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 3

在设计材料后，您应该使用react-native-sackbar

然后使用React Native的API NetInfo检查网络。

加油！

Answer 4

不要使用Library React Native叫API的{{1}}来检查网络

根据我的经验，NetInfo和Android需要分别使用IOS。

我会给你我的方法。

首先创建一个codes utils file

下面的代码：

NetworkUtils.js

就我而言，我在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); }); }中进行了检查

将功能从util文件导入到所需文件。

下面的代码：

Login.js

Answer 5

React native具有名为 Netinfo 的本地库，该库允许您获取该信息。示例：

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

在我的本机项目中显示没有互联网连接

6 个答案: