Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update website

Browse Source
This commit is contained in:
Travis CI
2015-12-10 02:13:33 +00:00
parent ce9b446b87
commit bd3a3a4c8d
7 changed files with 220 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/actionsheetios.html
+39 -1
View File
@@ -12,7 +12,7 @@
<span class="token string">&#x27;Option 0&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Option 1&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Option 2&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Destruct&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Delete&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Cancel&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> DESTRUCTIVE_INDEX <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
@@ -50,6 +50,40 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ActionSheetTintExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
clicked<span class="token punctuation">:</span> <span class="token string">&#x27;none&#x27;</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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;Text onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showActionSheet<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span>style<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
Click to show the ActionSheet
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
Clicked button<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>clicked<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">showActionSheet<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
ActionSheetIOS<span class="token punctuation">.</span><span class="token function">showActionSheetWithOptions<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
options<span class="token punctuation">:</span> BUTTONS<span class="token punctuation">,</span>
cancelButtonIndex<span class="token punctuation">:</span> CANCEL_INDEX<span class="token punctuation">,</span>
destructiveButtonIndex<span class="token punctuation">:</span> DESTRUCTIVE_INDEX<span class="token punctuation">,</span>
tintColor<span class="token punctuation">:</span> <span class="token string">&#x27;green&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span>buttonIndex<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span> clicked<span class="token punctuation">:</span> BUTTONS<span class="token punctuation">[</span>buttonIndex<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 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">var</span> ShareActionSheetExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
@@ -108,6 +142,10 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
title<span class="token punctuation">:</span> <span class="token string">&#x27;Show Action Sheet&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ActionSheetExample <span class="token operator">/</span><span class="token operator">&gt;</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>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Show Action Sheet with tinted buttons&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ActionSheetTintExample <span class="token operator">/</span><span class="token operator">&gt;</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>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Show Share Action Sheet&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ShareActionSheetExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
docs/appregistry.html
+4 -2
View File
@@ -2,9 +2,11 @@
root components should register themselves with
<code>AppRegistry.registerComponent</code>, then the native system can load the bundle
for the app and then actually run the app when it&#x27;s ready by invoking
<code>AppRegistry.runApplication</code>.</p><p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make
<code>AppRegistry.runApplication</code>.</p><p>To &quot;stop&quot; an application when a view should be destroyed, call
<code>AppRegistry.unmountApplicationComponentAtRootTag</code> with the tag that was
pass into <code>runApplication</code>. These should always be used as a pair.</p><p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make
sure the JS execution environment is setup before other modules are
<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerconfig"></a><span class="propType">static </span>registerConfig<span class="propType">(config: Array&lt;AppConfig&gt;)</span> <a class="hash-link" href="#registerconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registercomponent"></a><span class="propType">static </span>registerComponent<span class="propType">(appKey: string, getComponentFunc: ComponentProvider)</span> <a class="hash-link" href="#registercomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerrunnable"></a><span class="propType">static </span>registerRunnable<span class="propType">(appKey: string, func: Function)</span> <a class="hash-link" href="#registerrunnable">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getappkeys"></a><span class="propType">static </span>getAppKeys<span class="propType">()</span> <a class="hash-link" href="#getappkeys">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="runapplication"></a><span class="propType">static </span>runApplication<span class="propType">(appKey: string, appParameters: any)</span> <a class="hash-link" href="#runapplication">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="appstateios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerconfig"></a><span class="propType">static </span>registerConfig<span class="propType">(config: Array&lt;AppConfig&gt;)</span> <a class="hash-link" href="#registerconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registercomponent"></a><span class="propType">static </span>registerComponent<span class="propType">(appKey: string, getComponentFunc: ComponentProvider)</span> <a class="hash-link" href="#registercomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerrunnable"></a><span class="propType">static </span>registerRunnable<span class="propType">(appKey: string, func: Function)</span> <a class="hash-link" href="#registerrunnable">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getappkeys"></a><span class="propType">static </span>getAppKeys<span class="propType">()</span> <a class="hash-link" href="#getappkeys">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="runapplication"></a><span class="propType">static </span>runApplication<span class="propType">(appKey: string, appParameters: any)</span> <a class="hash-link" href="#runapplication">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="unmountapplicationcomponentatroottag"></a><span class="propType">static </span>unmountApplicationComponentAtRootTag<span class="propType">(rootTag: number)</span> <a class="hash-link" href="#unmountapplicationcomponentatroottag">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="appstateios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
docs/embedded-app-ios.html
+1
View File
@@ -51,6 +51,7 @@ React<span class="token punctuation">.</span>AppRegistry<span class="token punct
</span><span class="token comment" spellcheck="true">// curl http://localhost:8081/index.ios.bundle -o main.jsbundle
</span>RCTRootView <span class="token operator">*</span>rootView <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>RCTRootView alloc<span class="token punctuation">]</span> initWithBundleURL<span class="token punctuation">:</span>jsCodeLocation
moduleName<span class="token punctuation">:</span> @<span class="token string">&quot;SimpleApp&quot;</span>
initialProperties<span class="token punctuation">:</span>nil
launchOptions<span class="token punctuation">:</span>nil<span class="token punctuation">]</span><span class="token punctuation">;</span></div><p>Then add it as a subview of the <code>ReactView</code>.</p><div class="prism language-javascript"><span class="token punctuation">[</span>self addSubview<span class="token punctuation">:</span>rootView<span class="token punctuation">]</span><span class="token punctuation">;</span>
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> self<span class="token punctuation">.</span>bounds<span class="token punctuation">;</span></div><h2><a class="anchor" name="start-development-server"></a>Start Development Server <a class="hash-link" href="#start-development-server">#</a></h2><p>In root directory, we need to start React Native development server.</p><div class="prism language-javascript"><span class="token punctuation">(</span>JS_DIR<span class="token operator">=</span>`pwd`<span class="token operator">/</span>ReactComponent<span class="token punctuation">;</span> cd Pods<span class="token operator">/</span>React<span class="token punctuation">;</span> npm run start <span class="token operator">--</span> <span class="token operator">--</span>root $JS_DIR<span class="token punctuation">)</span></div><p>This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The <code>--root</code> option indicates the root of your React Native apps – this will be our <code>ReactComponents</code> directory containing the single <code>index.ios.js</code> file. This running server will package up the <code>index.ios.bundle</code> file accessible via <code>http://localhost:8081/index.ios.bundle</code>.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="/react-native/img/EmbeddedAppExample.png" alt="Example"></p><p>Live reload works from the simulator, too! You’ve got a simple React component totally encapsulated behind an Objective-C <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/tjwudi/EmbededReactNativeExample" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
docs/linux-windows-support.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/navigatorios.html
+3 -1
View File
File diff suppressed because one or more lines are too long
docs/netinfo.html
+170 -4
View File
@@ -13,10 +13,10 @@ NetInfo<span class="token punctuation">.</span><span class="token function">addE
handleFirstConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h3><a class="anchor" name="ios"></a>IOS <a class="hash-link" href="#ios">#</a></h3><p>Asynchronously determine if the device is online and on a cellular network.</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>cell</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><h3><a class="anchor" name="android"></a>Android <a class="hash-link" href="#android">#</a></h3><p>To request network info, you need to add the following line to your
app&#x27;s <code>AndroidManifest.xml</code>:</p><p><code>&lt;uses-permission android:name=&quot;android.permission.ACCESS_NETWORK_STATE&quot; /&gt;</code>
Asynchronously determine if the device is connected and details about that connection.</p><p>Android Connectivity Types.</p><ul><li><code>NONE</code> - device is offline</li><li><code>BLUETOOTH</code> - The Bluetooth data connection.</li><li><code>DUMMY</code> - Dummy data connection.</li><li><code>ETHERNET</code> - The Ethernet data connection.</li><li><code>MOBILE</code> - The Mobile data connection.</li><li><code>MOBILE_DUN</code> - A DUN-specific Mobile data connection.</li><li><code>MOBILE_HIPRI</code> - A High Priority Mobile data connection.</li><li><code>MOBILE_MMS</code> - An MMS-specific Mobile data connection.</li><li><code>MOBILE_SUPL</code> - A SUPL-specific Mobile data connection.</li><li><code>VPN</code> - A virtual network using one or more native bearers. Requires API Level 21</li><li><code>WIFI</code> - The WIFI data connection.</li><li><code>WIMAX</code> - The WiMAX data connection.</li><li><code>UNKNOWN</code> - Unknown data connection.</li></ul><p>The rest ConnectivityStates are hidden by the Android API, but can be used if necessary.</p><h3><a class="anchor" name="isconnectionmetered"></a>isConnectionMetered <a class="hash-link" href="#isconnectionmetered">#</a></h3><p>Available on Android. Detect if the current active connection is metered or not. A network is
Asynchronously determine if the device is connected and details about that connection.</p><p>Android Connectivity Types.</p><ul><li><code>NONE</code> - device is offline</li><li><code>BLUETOOTH</code> - The Bluetooth data connection.</li><li><code>DUMMY</code> - Dummy data connection.</li><li><code>ETHERNET</code> - The Ethernet data connection.</li><li><code>MOBILE</code> - The Mobile data connection.</li><li><code>MOBILE_DUN</code> - A DUN-specific Mobile data connection.</li><li><code>MOBILE_HIPRI</code> - A High Priority Mobile data connection.</li><li><code>MOBILE_MMS</code> - An MMS-specific Mobile data connection.</li><li><code>MOBILE_SUPL</code> - A SUPL-specific Mobile data connection.</li><li><code>VPN</code> - A virtual network using one or more native bearers. Requires API Level 21</li><li><code>WIFI</code> - The WIFI data connection.</li><li><code>WIMAX</code> - The WiMAX data connection.</li><li><code>UNKNOWN</code> - Unknown data connection.</li></ul><p>The rest ConnectivityStates are hidden by the Android API, but can be used if necessary.</p><h3><a class="anchor" name="isconnectionexpensive"></a>isConnectionExpensive <a class="hash-link" href="#isconnectionexpensive">#</a></h3><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><div class="prism language-javascript">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionMetered<span class="token punctuation">(</span></span><span class="token punctuation">(</span>isConnectionMetered<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Connection is &#x27;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnectionMetered <span class="token operator">?</span> <span class="token string">&#x27;Metered&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;Not Metered&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
monetary costs, data limitations or battery/performance issues.</p><div class="prism language-javascript">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive<span class="token punctuation">(</span></span><span class="token punctuation">(</span>isConnectionExpensive<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Connection is &#x27;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnectionExpensive <span class="token operator">?</span> <span class="token string">&#x27;Expensive&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;Not Expensive&#x27;</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 punctuation">;</span></div><h3><a class="anchor" name="isconnected"></a>isConnected <a class="hash-link" href="#isconnected">#</a></h3><p>Available on all platforms. Asynchronously fetch a boolean to determine
internet connectivity.</p><div class="prism language-javascript">NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></span><span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;First, is &#x27;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnected <span class="token operator">?</span> <span class="token string">&#x27;online&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;offline&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -31,7 +31,173 @@ internet connectivity.</p><div class="prism language-javascript">NetInfo<span cl
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span>
<span class="token string">&#x27;change&#x27;</span><span class="token punctuation">,</span>
handleFirstConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(eventName: ChangeEventName, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(eventName: ChangeEventName, handler: Function)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="fetch"></a><span class="propType">static </span>fetch<span class="propType">()</span> <a class="hash-link" href="#fetch">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="isconnected"></a>isConnected<span class="propType">: ObjectExpression</span> <a class="hash-link" href="#isconnected">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="isconnectionmetered"></a>isConnectionMetered<span class="propType">: TypeCastExpression</span> <a class="hash-link" href="#isconnectionmetered">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="panresponder.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(eventName: ChangeEventName, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(eventName: ChangeEventName, handler: Function)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="fetch"></a><span class="propType">static </span>fetch<span class="propType">()</span> <a class="hash-link" href="#fetch">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="isconnectionexpensive"></a><span class="propType">static </span>isConnectionExpensive<span class="propType">(callback: (metered: ?boolean, error?: string) =&gt; void)</span> <a class="hash-link" href="#isconnectionexpensive">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="isconnected"></a>isConnected<span class="propType">: ObjectExpression</span> <a class="hash-link" href="#isconnected">#</a></h4></div></div></span></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NetInfoExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
const React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const <span class="token punctuation">{</span>
NetInfo<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
View<span class="token punctuation">,</span>
TouchableWithoutFeedback<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
const ConnectionInfoSubscription <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
connectionInfoHistory<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 punctuation">}</span><span class="token punctuation">,</span>
componentDidMount<span class="token punctuation">:</span> <span class="token keyword">function</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 class="token punctuation">(</span></span>
<span class="token string">&#x27;change&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
componentWillUnmount<span class="token punctuation">:</span> <span class="token keyword">function</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">removeEventListener<span class="token punctuation">(</span></span>
<span class="token string">&#x27;change&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
_handleConnectionInfoChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
const connectionInfoHistory <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>connectionInfoHistory<span class="token punctuation">.</span><span class="token function">slice<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
connectionInfoHistory<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span>connectionInfo<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
connectionInfoHistory<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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>connectionInfoHistory<span class="token punctuation">)</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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 punctuation">;</span>
const ConnectionInfoCurrent <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
connectionInfo<span class="token punctuation">:</span> <span class="token keyword">null</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>
componentDidMount<span class="token punctuation">:</span> <span class="token keyword">function</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 class="token punctuation">(</span></span>
<span class="token string">&#x27;change&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
NetInfo<span class="token punctuation">.</span><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></span>
<span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>connectionInfo<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 punctuation">}</span><span class="token punctuation">,</span>
componentWillUnmount<span class="token punctuation">:</span> <span class="token keyword">function</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">removeEventListener<span class="token punctuation">(</span></span>
<span class="token string">&#x27;change&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
_handleConnectionInfoChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
connectionInfo<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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>connectionInfo<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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 punctuation">;</span>
const IsConnected <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
isConnected<span class="token punctuation">:</span> <span class="token keyword">null</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>
componentDidMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span>
<span class="token string">&#x27;change&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></span>
<span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>isConnected<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 punctuation">}</span><span class="token punctuation">,</span>
componentWillUnmount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span>
<span class="token string">&#x27;change&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
_handleConnectivityChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
isConnected<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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isConnected <span class="token operator">?</span> <span class="token string">&#x27;Online&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;Offline&#x27;</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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 punctuation">;</span>
const IsConnectionExpensive <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
isConnectionExpensive<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token operator">?</span>boolean<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 function">_checkIfExpensive<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive<span class="token punctuation">(</span></span>
<span class="token punctuation">(</span>isConnectionExpensive<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>isConnectionExpensive<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 punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_checkIfExpensive<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Click to see <span class="token keyword">if</span> connection is expensive<span class="token punctuation">:</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isConnectionExpensive <span class="token operator">===</span> <span class="token boolean">true</span> <span class="token operator">?</span> <span class="token string">&#x27;Expensive&#x27;</span> <span class="token punctuation">:</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isConnectionExpensive <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token operator">?</span> <span class="token string">&#x27;Not expensive&#x27;</span>
<span class="token punctuation">:</span> <span class="token string">&#x27;Unknown&#x27;</span><span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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 punctuation">;</span>
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">&#x27;NetInfo&#x27;</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">&#x27;Monitor network status&#x27;</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;NetInfo.isConnected&#x27;</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">&#x27;Asynchronously load and observe connectivity&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;IsConnected <span class="token operator">/</span><span class="token operator">&gt;</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>
title<span class="token punctuation">:</span> <span class="token string">&#x27;NetInfo.update&#x27;</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">&#x27;Asynchronously load and observe connectionInfo&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ConnectionInfoCurrent <span class="token operator">/</span><span class="token operator">&gt;</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>
title<span class="token punctuation">:</span> <span class="token string">&#x27;NetInfo.updateHistory&#x27;</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">&#x27;Observed updates to connectionInfo&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ConnectionInfoSubscription <span class="token operator">/</span><span class="token operator">&gt;</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>
platform<span class="token punctuation">:</span> <span class="token string">&#x27;android&#x27;</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;NetInfo.isConnectionExpensive (Android)&#x27;</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">&#x27;Asynchronously check isConnectionExpensive&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;IsConnectionExpensive <span class="token operator">/</span><span class="token operator">&gt;</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 punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="panresponder.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
docs/pickerios.html
+2 -1
View File
@@ -98,9 +98,10 @@
getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
carMake<span class="token punctuation">:</span> <span class="token string">&#x27;cadillac&#x27;</span><span class="token punctuation">,</span>
modelIndex<span class="token punctuation">:</span> <span class="token number">0</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>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> make <span class="token operator">=</span> CAR_MAKES_AND_MODELS<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> selectionString <span class="token operator">=</span> make<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">&#x27; &#x27;</span> <span class="token operator">+</span> make<span class="token punctuation">.</span>models<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modelIndex<span class="token punctuation">]</span><span class="token punctuation">;</span>