首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Expo React Native应用程序中检查互联网连接?

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

Stack Overflow用户
提问于 2019-06-19 22:18:59
回答 3查看 8.8K关注 0票数 9

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

  • 我不能使用import { NetInfo } from 'react-native',因为
    • 不能使用react-native-community/react-native-netinfo,因为它使用本地库,而且你不能使用世博会管理的应用程序。
    • 我可以弹出,以便使用上面的内容,但似乎我不应该仅仅为了检查是否有互联网应用程序不能使用navigator.onLine而这样做,因为全局变量似乎不可用。
    • 我可以向谷歌或我自己的服务器或其他任何地方发出一个简单的HTTP请求,看看我是否得到了响应,但这只测试到一个站点的连接,而且需要时间和带宽。

我该怎么办?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-06-20 03:14:46

使用react-nativeNetInfo

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

react-native将其删除时,世博会很可能会将其纳入他们的管理工作流中,或者提供一个不需要从世博会弹出的替代方案。

票数 9
EN

Stack Overflow用户

发布于 2019-08-25 04:23:44

Expo SDK34已经包含了NetInfo API

您可以在这里查看他们关于SDK34的文档https://docs.expo.io/versions/v34.0.0/sdk/netinfo

以下是latest version文档的链接

票数 9
EN

Stack Overflow用户

发布于 2019-06-20 03:29:42

这真的很难定义一个设备是否有互联网,仅仅通过失败的stackoverflow.com/a/189443/7602110请求,你可以说你有互联网,但不是那么可靠。你可能想去一些像google.com这样的可靠网站上看看,我有一个变通办法,但我并不推荐,这取决于你。

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

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

代码语言:javascript
复制
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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56669908

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档