如何在Expo React Native应用程序中检查网络连接？

Question

我有一个使用 管理工作流 的 Expo 应用程序。该应用程序需要检查是否有可用的互联网连接。

• 我无法import { NetInfo } from 'react-native'，因为那已被弃用。
• 我不能使用react-native-community/react-native-netinfo，因为它使用本机库，而您不能在Expo管理的应用程序中使用它们。
• 我可以弹出窗口以使用上面的内容，但似乎我不需要这样做就可以检查是否有互联网连接。
• 我不能使用navigator.onLine，因为该全局变量似乎不可用。
• 我可以向Google或我的服务器发送微不足道的HTTP请求，然后查看是否收到响应，但这只测试与一个站点的连接，并且还需要时间和带宽。

我该怎么办？

- Dan B.

---

我不明白。当我使用Expo时，为什么我必须将其取出以使用netinfo模块？ - hong developer

@hongdevelop 在 Expo 管理的项目中，您无法添加自己的本地模块或使用 react-native link。https://docs.expo.io/versions/latest/introduction/faq/#what-is-the-difference-between-expo-and - Dan B.

netinfo模块可以在不添加其他模块的情况下使用。 - hong developer

@hongdevelop 哪个 NetInfo 模块？那个已经弃用的？ - Dan B.

React Native 的 NetInfo - hong developer

Answer 1

Expo SDK 34已经包含了NetInfo API。

您可以在此处查看SDK 34的文档：https://docs.expo.io/versions/v34.0.0/sdk/netinfo

这是最新版本文档的链接：https://docs.expo.io/versions/latest/sdk/netinfo/

- CZ workman

Answer 2

使用react-native的NetInfo。

是的，它已被弃用，因为他们计划在下一个版本的react-native中删除它，并采用社区版。然而，它完全可用，现在仍然可以使用，只需确保在发布Expo SDK的下一个版本时检查是否有破坏性更改。

很可能当react-native移除它时，Expo将把它引入其托管工作流程中，或提供一种不需要从Expo中弹出的替代方法。

- Zaytri

Answer 3

2022年，我们在卸载Expo之前也遇到了同样的问题，我们使用了Expo Network。

import * as Network from 'expo-network';

并像这样使用它

const networkState = await Network.getNetworkStateAsync();

希望这能对某些人有所帮助！

- Saif Asad

---

文档 https://docs.expo.dev/versions/latest/sdk/network/#networkgetnetworkstateasync - Dzmitry Dranitski

Answer 4

这真的很难确定设备是否有互联网stackoverflow.com/a/189443/7602110，仅通过失败的XHR请求就可以说你有互联网，但这可靠吗？您想要与一些可靠的网站进行检查，如google.com。我已经想出了一个解决方法，但我实际上不建议这样做，这取决于您。

您可以使用React Native本身的Linking.canOpenUrl()方法，它将返回一个Promise对象。当确定给定的URL是否可以处理时，该承诺被解决，并且第一个参数是它是否可以打开。

然后添加一个请求，如果响应状态为200，则应该具有互联网。

import React, { Component } from 'react';
import { Button, Text, View, StyleSheet, Linking } from 'react-native';

export default class App extends Component {
  state = {
    connection: false,
    url: 'https://google.com',
  };

  checkInternt = () => {
    Linking.canOpenURL(this.state.url).then(connection => {
      if (!connection) {
        this.setState({ connection: false });
      } else {
        fetch(this.state.url).then(res =>
          this.setState({ connection: res.status !== 200 ? false : true })
        );
      }
    });
  };

  componentDidMount() {
    this.checkInternt();
  }

  handlePress = () => {
    this.setState({
      url:
        this.state.url === 'https://google.com'
          ? 'http://someweirdurlthatdoesntwork.com'
          : 'https://google.com',
    });
    this.checkInternt();
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>
          Connection:
          <Text style={{ color: this.state.connection ? 'green' : 'red' }}>
            {`   ${this.state.connection}`}
          </Text>
        </Text>
        <Text>{this.state.url.replace(/\https?:\/\//g, '')}</Text>
        <Button onPress={this.handlePress} title="Change server url" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

请检查小吃: snack.expo.io/@abranhe/check-internet

- Abraham

Answer 5

NetInfo已从Expo sdk 48中移除。您应该通过@react-native-community/netinfo包进行安装。

- EM_A