mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on c6b9807d1aa856d99413e2563fdaa3e61c6cc85a
This commit is contained in:
Website Deployment Script
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.10/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.10/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.10"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.10/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.10/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.11/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.11/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.11"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.11/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.11/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.12/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.12/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.12"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.12/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.12/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.13/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.13/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.13"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.13/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.13/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.14"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.14"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.14/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.14/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.14/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.14/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.14"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.14"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.14/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.14/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.14/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.14/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.15"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.15"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.15/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.15/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.15/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.15/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.15"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.15"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.15/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.15/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.15/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.15/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.16"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.16"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.16/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.16/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.16/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.16/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.16"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.16"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.16/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.16/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.16/layoutanimation"><span class="arrow-prev">← </span><span class="function-name-prevnext">LayoutAnimation</span></a><a class="docs-next button" href="/react-native/docs/0.16/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.6"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.6"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.6/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.6/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.6/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.6/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.6"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.6"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.6/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.6/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.6/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.6/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.7"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.7"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.7/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.7/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.7/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.7/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.7"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.7"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.7/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.7/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.7/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.7/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.8"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.8"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.8/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.8/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.8/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.8/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.8"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.8"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.8/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.8/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.8/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.8/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.9"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.9"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.9/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.9/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.9/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.9/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+123
-10
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="### Methods"/><meta name="docsearch:version" content="0.9"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="### Methods"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>NetInfo · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="docsearch:version" content="0.9"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="NetInfo · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="> **Deprecated.** Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,34 +68,147 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/netinfo.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">NetInfo</h1></header><article><div><span><blockquote>
|
||||
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-netinfo">react-native-community/react-native-netinfo</a> instead.</p>
|
||||
</blockquote>
|
||||
<p>NetInfo exposes info about online/offline status</p>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
<p>Cross platform values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>none</code> - device is offline</li>
|
||||
<li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li>
|
||||
<li><code>cellular</code> - device is connected via Edge, 3G, WiMax, or LTE</li>
|
||||
<li><code>unknown</code> - error case and the network status is unknown</li>
|
||||
</ul>
|
||||
<p>Android-only values for <code>ConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>bluetooth</code> - device is connected via Bluetooth</li>
|
||||
<li><code>ethernet</code> - device is connected via Ethernet</li>
|
||||
<li><code>wimax</code> - device is connected via WiMAX</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="effectiveconnectiontype-enum"></a><a href="#effectiveconnectiontype-enum" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>EffectiveConnectionType enum</h3>
|
||||
<p>Cross platform values for <code>EffectiveConnectionType</code>:</p>
|
||||
<ul>
|
||||
<li><code>2g</code></li>
|
||||
<li><code>3g</code></li>
|
||||
<li><code>4g</code></li>
|
||||
<li><code>unknown</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h3>
|
||||
<p>To request network info, you need to add the following line to your app's <code>AndroidManifest.xml</code>:</p>
|
||||
<p><code><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="netinfo.md#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="netinfo.md#getconnectioninfo"><code>getConnectionInfo</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionexpensive"><code>isConnectionExpensive</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h3>
|
||||
<ul>
|
||||
<li><a href="netinfo.md#isconnected"><code>isConnected</code></a></li>
|
||||
<li><a href="netinfo.md#isconnectionmetered"><code>isConnectionMetered</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Adds an event handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>connectionChange</code>: Fires when the network status changes. The argument to the event handler is an object with keys:
|
||||
<ul>
|
||||
<li><code>type</code>: A <code>ConnectionType</code> (listed above)</li>
|
||||
<li><code>effectiveType</code>: An <code>EffectiveConnectionType</code> (listed above)</li>
|
||||
</ul></li>
|
||||
<li><code>change</code>: This event is deprecated. Listen to <code>connectionChange</code> instead. Fires when the network status changes. The argument to the event handler is one of the deprecated connectivity types listed above.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Removes the listener for network status changes.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>eventName</td><td>enum(connectionChange, change)</td><td>Yes</td><td>The change event name.</td></tr>
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td>Listener function.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>fetch()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getconnectioninfo"></a><a href="#getconnectioninfo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getConnectionInfo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">getConnectionInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Returns a promise that resolves to an object with <code>type</code> and <code>effectiveType</code> keys whose values are a <a href="netinfo.md#connectiontype-enum"><code>ConnectionType</code></a> and an <a href="netinfo.md#effectiveconnectiontype-enum"><code>EffectiveConnectionType</code></a>), respectively.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnectionexpensive"></a><a href="#isconnectionexpensive" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnectionExpensive()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Available on Android. Detect if the current active connection is metered or not. A network is classified as metered when the user is sensitive to heavy data usage on that connection due to monetary costs, data limitations or battery/performance issues.</p>
|
||||
<pre><code class="hljs">NetInfo.isConnectionExpensive()
|
||||
.then(<span class="hljs-function"><span class="hljs-params">isConnectionExpensive</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Connection is '</span> + (isConnectionExpensive ? <span class="hljs-string">'Expensive'</span> : <span class="hljs-string">'Not Expensive'</span>));
|
||||
})
|
||||
.catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.error(error);
|
||||
});
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.9/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.9/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#fetch"><code>fetch()</code></a></li></ul></li><li><a href="#properties-1">Properties</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
<h3><a class="anchor" aria-hidden="true" id="isconnected"></a><a href="#isconnected" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>isConnected</code></h3>
|
||||
<p>Available on all platforms. Asynchronously fetch a boolean to determine internet connectivity.</p>
|
||||
<pre><code class="hljs">NetInfo.<span class="hljs-keyword">isConnected</span>.fetch().then(<span class="hljs-keyword">isConnected</span> => {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'First, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
});
|
||||
function handleFirstConnectivityChange(<span class="hljs-keyword">isConnected</span>) {
|
||||
console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'Then, is '</span> + (<span class="hljs-keyword">isConnected</span> ? <span class="hljs-string">'online'</span> : <span class="hljs-string">'offline'</span>));
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.removeEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.<span class="hljs-keyword">isConnected</span>.addEventListener(
|
||||
<span class="hljs-string">'connectionChange'</span>,
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.9/layout-props"><span class="arrow-prev">← </span><span>Layout Props</span></a><a class="docs-next button" href="/react-native/docs/0.9/pixelratio"><span class="function-name-prevnext">PixelRatio</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#addeventlistener"><code>addEventListener()</code></a></li><li><a href="#removeeventlistener"><code>removeEventListener()</code></a></li><li><a href="#getconnectioninfo"><code>getConnectionInfo()</code></a></li><li><a href="#isconnectionexpensive"><code>isConnectionExpensive()</code></a></li></ul></li><li><a href="#properties-1">Properties</a><ul class="toc-headings"><li><a href="#isconnected"><code>isConnected</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+4
-3
@@ -5,12 +5,13 @@ const labelLoc = pathLoc
|
||||
.filter(paths => !unnecessaryPaths.includes(paths.toLowerCase()))
|
||||
.join('/');
|
||||
|
||||
function giveFeedback(value, event) {
|
||||
function giveFeedback(value) {
|
||||
ga('send', {
|
||||
hitType: 'event',
|
||||
eventCategory: 'button',
|
||||
eventAction: 'feedback',
|
||||
eventLabel: labelLoc,
|
||||
eventValue: value,
|
||||
});
|
||||
|
||||
event.target.parentNode.innerHTML = `Thanks for letting us know!`;
|
||||
@@ -23,8 +24,8 @@ if (pathLoc[1] === 'docs' || pathLoc[2] === 'docs') {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<div class="docs-rating_container">
|
||||
Is this page useful?
|
||||
<svg class="i_thumbsup" alt="Like" onclick="giveFeedback(1, event)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.13 89.76"><path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"/></svg>
|
||||
<svg class="i_thumbsdown" alt="Dislike" onclick="giveFeedback(0, event)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.13 89.76"><path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"/></svg>
|
||||
<svg class="i_thumbsup" alt="Like" onclick="giveFeedback(1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.13 89.76"><path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"/></svg>
|
||||
<svg class="i_thumbsdown" alt="Dislike" onclick="giveFeedback(0)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.13 89.76"><path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"/></svg>
|
||||
</div>`;
|
||||
const content = div.childNodes[0];
|
||||
container.appendChild(content, container.childNodes[0]);
|
||||
|
||||
Reference in New Issue
Block a user