Question

我有一个使用Managed workflow的Expo应用程序。该应用需要检查互联网连接是否可用。

我无法import { NetInfo } from 'react-native'，因为that's deprecated。
我不能使用react-native-community/react-native-netinfo，因为它使用的是本机库，而您不能通过Expo托管的应用程序来做到这一点。
为了使用上面的命令，我可以弹出，但似乎我不需要这样做只是为了检查是否有Internet连接。
我无法使用navigator.onLine，因为该全局变量似乎不可用。
我可以向Google或我自己的服务器或其他服务器发出微不足道的HTTP请求，看看是否收到响应，但这仅测试到一个站点的连接，而且还需要时间和带宽。

我该怎么办？

Answer 1

Expo SDK 34已包含NetInfo API。

您可以在这里查看其文档：https://docs.expo.io/versions/v34.0.0/sdk/netinfo

Answer 2

使用NetInfo中的react-native。

是的，不建议使用该版本，因为他们计划在下一个react-native版本中将其删除，以支持社区版本。但是，它完全可以使用，并且现在仍可以使用，只需确保在发布下一版Expo SDK时检查是否有重大更改。

react-native删除它后，Expo可能会将其带入其托管工作流，或者提供不需要从Expo弹出的替代方法。

编辑：有关此的更多信息。 It was just announced表示React Native 0.60将支持自动链接，当一个包支持它时，将消除使用react-native link的需要。当Expo升级为使用React Native 0.60+时，它可能会使用此功能，我们最终可以使用以前无法单独与Expo一起使用的所有炫酷软件包！

Answer 3

很难定义一个设备是否具有互联网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

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

3 个答案: