blocks|key|2500761|text|使用react-native的NetInfo。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2500762|是的，它被弃用了，因为他们计划在下一个版本的react-native中删除它，以支持社区版本。然而，它是完全有效的，现在仍然可以使用，只要确保在Expo+SDK的下一个版本发布时检查是否有破坏性的更改。|2500763|当react-native将其删除时，世博会很可能会将其纳入他们的管理工作流中，或者提供一个不需要从世博会弹出的替代方案。|2500764|entityMap^0|2|C|F|7|0|M|C|20|8|0|1|C|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$]]

Use <code>NetInfo</code> of <code>react-native</code>.

Yes, it is deprecated because they are planning on removing it in the next version of <code>react-native</code> in favor of the community version. However, it is completely functional and can still be used for now, just make sure to check for breaking changes when the next versions of <code>Expo SDK</code> are released.

It is likely that Expo will bring it into their managed workflow when <code>react-native</code> removes it, or provide an alternative that won't require ejecting from Expo.

blocks|key|2501242|text|这真的很难定义一个设备是否有互联网，仅仅通过失败的stackoverflow.com/a/189443/7602110请求，你可以说你有互联网，但不是那么可靠。你可能想去一些像google.com这样的可靠网站上看看，我有一个变通办法，但我并不推荐，这取决于你。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2501243|您可以从React+Native本身使用Linking.canOpenUrl()方法，该方法将返回一个Promise对象。当确定是否可以处理给定的URL时，promise被解析，并且第一个参数是它是否可以被打开。|CODE|2501244|然后添加一个请求，如果响应状态为200，则应该有互联网。|2501245|​|2501246|📷|atomic|2501247|2501248|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',
++},
});|code-block|syntax|javascript|2501249|查看零食：snack.expo.io/@abranhe/check-internet|2501250|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/189443/7602110|1|https://facebook.github.io/react-native/docs/linking#canopenurl|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/165186d4c59dda881891b8e94ad72644.gif|imageAlt|3|https://snack.expo.io/@abranhe/check-internet^0|2G|A|P|Y|0|0|K|K|K|K|1|0|G|3|0|0|0|1|2|0|0|0|5|11|3|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|F|3|G|5|6|7|1L|8|@$9|1M|A|1N|B|H]]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|I|3|J|5|6|7|1R|8|@$9|1S|A|1T|B|H]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1U|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1V|8|@]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|P|3|L|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|20|8|@]|D|@]|E|$T|U]]|$1|V|3|W|5|6|7|21|8|@]|D|@$9|22|A|23|1|24]]|E|$]]|$1|X|3|-4|5|6|7|25|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]|15|$5|10|11|12|E|$13|16]]|17|$5|18|11|19|E|$1A|1B|1C|-4]]|1D|$5|10|11|12|E|$13|1E]]]]

It's really hard to define if a device has internet or not <a href="https://stackoverflow.com/a/189443/7602110">stackoverflow.com/a/189443/7602110</a>, just by having failed XHR requests you can say that you have internet, but isn't that reliable. You would like to check with some reliables websites like google.com, I have come with a work-around but I don't actually recommend it, is up to you.

You can use the <a href="https://facebook.github.io/react-native/docs/linking#canopenurl" rel="nofollow noreferrer"><code>Linking.canOpenUrl()</code></a> method from React Native itself, which will return a Promise object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.

Then add a request and if the response status it's <code>200</code> you should have internet.

<img src="https://i.stack.imgur.com/2AoFS.gif" height="400">

<pre class="lang-js prettyprint-override"><code>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 = () =&gt; {
 Linking.canOpenURL(this.state.url).then(connection =&gt; {
 if (!connection) {
 this.setState({ connection: false });
 } else {
 fetch(this.state.url).then(res =&gt;
 this.setState({ connection: res.status !== 200 ? false : true })
 );
 }
 });
 };

 componentDidMount() {
 this.checkInternt();
 }

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

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

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

Check the snack: <a href="https://snack.expo.io/@abranhe/check-internet" rel="nofollow noreferrer">snack.expo.io/@abranhe/check-internet</a>

blocks|key|2501256|text|Expo+SDK34已经包含了NetInfo+API。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2501257|您可以在这里查看他们关于SDK34的文档https://docs.expo.io/versions/v34.0.0/sdk/netinfo|2501258|以下是latest+version文档的链接|2501259|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.expo.io/versions/v34.0.0/sdk/netinfo|1|https://docs.expo.io/versions/latest/sdk/netinfo/^0|F|B|0|K|1D|0|0|3|E|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

Expo SDK 34 has already included <code>NetInfo API</code>. 

You can check their documentation for SDK 34 here <a href="https://docs.expo.io/versions/v34.0.0/sdk/netinfo" rel="noreferrer">https://docs.expo.io/versions/v34.0.0/sdk/netinfo</a>

Here is the link for documentation for <a href="https://docs.expo.io/versions/latest/sdk/netinfo/" rel="noreferrer">latest version</a>

I have an Expo app using the <a href="https://docs.expo.io/versions/latest/introduction/managed-vs-bare/" rel="noreferrer">Managed workflow</a>. The app needs to check whether an internet connection is available.

<ul>
<li>I can't <code>import { NetInfo } from 'react-native'</code> because <a href="https://facebook.github.io/react-native/docs/netinfo.html" rel="noreferrer">that's deprecated</a>.</li>
<li>I can't use <a href="https://github.com/react-native-community/react-native-netinfo" rel="noreferrer">react-native-community/react-native-netinfo</a> because that uses native libraries, and you can't do that with an Expo managed app.</li>
<li>I could eject, in order to use the above, but it doesn't seem like I should need to do that just to check if there's an internet connection.</li>
<li>I can't use <a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine" rel="noreferrer"><code>navigator.onLine</code></a> because that global variable doesn't seem to be available.</li>
<li>I could make a trivial HTTP request to Google or my own server or whatever, and see if I get a response, but that only tests a connection to one site, and also it takes time and uses bandwidth.</li>
</ul>

What should I do?

How to check for an internet connection in an Expo React Native app?

React Native

服务器

我有一个使用的世博会应用程序。应用程序需要检查互联网连接是否可用。我不能使用import { NetInfo } from 'react-native'，因为不能使用，因为它使用本地库，而且你不能使用世博会管理的应用程序。我可以弹出，以便使用上面的内容，但似乎我不应该仅仅为了检查是否有互联网应用程序不能使用而这样做，因...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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