mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -2,7 +2,7 @@
|
||||
of:</p><ul><li><code>options</code> (array of strings) - a list of button titles (required)</li><li><code>cancelButtonIndex</code> (int) - index of cancel button in <code>options</code></li><li><code>destructiveButtonIndex</code> (int) - index of destructive button in <code>options</code></li><li><code>title</code> (string) - a title to show above the action sheet</li><li><code>message</code> (string) - a message to show below the title</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshareactionsheetwithoptions"></a><span class="propType">static </span>showShareActionSheetWithOptions<span class="propType">(options, failureCallback, successCallback)</span> <a class="hash-link" href="docs/actionsheetios.html#showshareactionsheetwithoptions">#</a></h4><div><p>Display the iOS share sheet. The <code>options</code> object should contain
|
||||
one or both of:</p><ul><li><code>message</code> (string) - a message to share</li><li><code>url</code> (string) - a URL to share</li></ul><p>NOTE: if <code>url</code> points to a local file, or is a base64-encoded
|
||||
uri, the file it points to will be loaded and shared directly.
|
||||
In this way, you can share images, videos, PDF files, etc.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/actionsheetios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ActionSheetIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
In this way, you can share images, videos, PDF files, etc.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/actionsheetios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ActionSheetIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -211,7 +211,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token keyword">return</span> <ShareScreenshotExample <span class="token operator">/</span><span class="token operator">></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="docs/alert.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ActionSheetIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alert.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ActionSheetIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@ of a neutral, negative and a positive button:</p><ul><li>If you specify one butt
|
||||
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token string">'cancel'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'OK'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'OK Pressed'</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><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/alert.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="alert"></a><span class="propType">static </span>alert<span class="propType">(title, message?, buttons?, type?)</span> <a class="hash-link" href="docs/alert.html#alert">#</a></h4></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/alert.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AlertExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><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="docs/alert.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="alert"></a><span class="propType">static </span>alert<span class="propType">(title, message?, buttons?, type?)</span> <a class="hash-link" href="docs/alert.html#alert">#</a></h4></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/alert.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AlertExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -134,7 +134,7 @@ of a neutral, negative and a positive button:</p><ul><li>If you specify one butt
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
AlertExample<span class="token punctuation">,</span>
|
||||
SimpleAlertExampleBlock<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="docs/alertios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Alert%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alertios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Alert%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -29,7 +29,7 @@ a <code>text</code> key, as well as optional <code>onPress</code> and <code>styl
|
||||
text <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">"Your username is "</span><span class="token operator">+</span>text<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span>
|
||||
<span class="token punctuation">)</span></div></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/alertios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AlertIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">)</span></div></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/alertios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AlertIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -192,7 +192,7 @@ class <span class="token class-name">PromptOptions</span> extends <span class="t
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#eeeeee'</span><span class="token punctuation">,</span>
|
||||
padding<span class="token punctuation">:</span> <span class="token number">10</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="docs/animated.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AlertIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/animated.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AlertIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -125,7 +125,7 @@ API to normal <code>Animated.Value</code>, but multiplexed. Contains two regula
|
||||
<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="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="constructor"></a>constructor<span class="propType">(valueIn?)</span> <a class="hash-link" href="docs/animated.html#constructor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setvalue"></a>setValue<span class="propType">(value)</span> <a class="hash-link" href="docs/animated.html#setvalue">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setoffset"></a>setOffset<span class="propType">(offset)</span> <a class="hash-link" href="docs/animated.html#setoffset">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flattenoffset"></a>flattenOffset<span class="propType">()</span> <a class="hash-link" href="docs/animated.html#flattenoffset">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stopanimation"></a>stopAnimation<span class="propType">(callback?)</span> <a class="hash-link" href="docs/animated.html#stopanimation">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addlistener"></a>addListener<span class="propType">(callback)</span> <a class="hash-link" href="docs/animated.html#addlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removelistener"></a>removeListener<span class="propType">(id)</span> <a class="hash-link" href="docs/animated.html#removelistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getlayout"></a>getLayout<span class="propType">()</span> <a class="hash-link" href="docs/animated.html#getlayout">#</a></h4><div><p>Converts <code>{x, y}</code> into <code>{left, top}</code> for use in style, e.g.</p><div class="prism language-javascript"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getLayout<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="gettranslatetransform"></a>getTranslateTransform<span class="propType">()</span> <a class="hash-link" href="docs/animated.html#gettranslatetransform">#</a></h4><div><p>Converts <code>{x, y}</code> into a useable translation transform, e.g.</p><div class="prism language-javascript"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getTranslateTransform<span class="token punctuation">(</span></span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></div></div></div></div></span></ul></span></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/animated.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AnimatedExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></div></div></div></div></span></ul></span></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/animated.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AnimatedExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -345,7 +345,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
borderRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</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="docs/appregistry.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Animated%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/appregistry.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Animated%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -26,7 +26,7 @@ render<span class="token punctuation">:</span> <span class="token keyword">funct
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>This example will only ever appear to say "Current state is: active" because
|
||||
the app is only visible to the user when in the <code>active</code> state, and the null
|
||||
state will happen only momentarily.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/appstate.html#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">(type, handler)</span> <a class="hash-link" href="docs/appstate.html#addeventlistener">#</a></h4><div><p>Add a handler to AppState changes by listening to the <code>change</code> event type
|
||||
and providing the handler</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(type, handler)</span> <a class="hash-link" href="docs/appstate.html#removeeventlistener">#</a></h4><div><p>Remove a handler by passing the <code>change</code> event type and the handler</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/appstate.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="currentstate"></a>currentState<span class="propType">: TypeCastExpression</span> <a class="hash-link" href="docs/appstate.html#currentstate">#</a></h4></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/appstate.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AppStateExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
and providing the handler</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(type, handler)</span> <a class="hash-link" href="docs/appstate.html#removeeventlistener">#</a></h4><div><p>Remove a handler by passing the <code>change</code> event type and the handler</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/appstate.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="currentstate"></a>currentState<span class="propType">: TypeCastExpression</span> <a class="hash-link" href="docs/appstate.html#currentstate">#</a></h4></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/appstate.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AppStateExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -90,7 +90,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Previous states:'</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> <AppStateSubscription showCurrentOnly<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></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="docs/asyncstorage.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AppState%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/asyncstorage.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AppState%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -30,7 +30,7 @@ state will happen only momentarily.</p></div><span><h3><a class="anchor" name="m
|
||||
and providing the handler</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(type, handler)</span> <a class="hash-link" href="docs/appstateios.html#removeeventlistener">#</a></h4><div><p>Remove a handler by passing the <code>change</code> event type and the handler</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/appstateios.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="currentstate"></a>currentState<span class="propType">: TypeCastExpression</span> <a class="hash-link" href="docs/appstateios.html#currentstate">#</a></h4><div><p>// TODO: getCurrentAppState callback seems to be called at a really late stage
|
||||
// after app launch. Trying to get currentState when mounting App component
|
||||
// will likely to have the initial value here.
|
||||
// Initialize to 'active' instead of null.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/appstateios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AppStateIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
// Initialize to 'active' instead of null.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/appstateios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AppStateIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -112,7 +112,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
description<span class="token punctuation">:</span> <span class="token string">'In the simulator, hit Shift+Command+M to simulate a memory warning.'</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> <AppStateSubscription showMemoryWarnings<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></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="docs/appstate.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AppStateIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/appstate.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AppStateIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -85,7 +85,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
</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 punctuation">)</span><span class="token punctuation">;</span></div></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/asyncstorage.html#properties">#</a></h3><div class="props"></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/asyncstorage.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AsyncStorageExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/asyncstorage.html#properties">#</a></h3><div class="props"></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/asyncstorage.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AsyncStorageExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -189,7 +189,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Basics - getItem, setItem, removeItem'</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> <BasicStorageExample <span class="token operator">/</span><span class="token operator">></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="docs/backandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AsyncStorage%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/backandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22AsyncStorage%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2,7 +2,7 @@
|
||||
<span class="token keyword">var</span> content <span class="token operator">=</span> await Clipboard<span class="token punctuation">.</span><span class="token function">getString<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setstring"></a><span class="propType">static </span>setString<span class="propType">(content)</span> <a class="hash-link" href="docs/clipboard.html#setstring">#</a></h4><div><p>Set content of string type. You can use following code to set clipboard content</p><div class="prism language-javascript"><span class="token function">_setContent<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
Clipboard<span class="token punctuation">.</span><span class="token function">setString<span class="token punctuation">(</span></span><span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>@param the content to be stored in the clipboard.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/clipboard.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ClipboardExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>@param the content to be stored in the clipboard.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/clipboard.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ClipboardExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -52,7 +52,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token keyword">return</span> <ClipboardExample<span class="token operator">/</span><span class="token operator">></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="docs/datepickerandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Clipboard%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/datepickerandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Clipboard%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<code>day</code> if the user picked a date. If the user dismissed the dialog, the Promise will
|
||||
still be resolved with action being <code>DatePickerAndroid.dismissedAction</code> and all the other keys
|
||||
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p><p>Note the native date picker dialog has some UI glitches on Android 4 and lower
|
||||
when using the <code>minDate</code> and <code>maxDate</code> options.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datesetaction"></a><span class="propType">static </span>dateSetAction<span class="propType">()</span> <a class="hash-link" href="docs/datepickerandroid.html#datesetaction">#</a></h4><div><p>A date has been selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="dismissedaction"></a><span class="propType">static </span>dismissedAction<span class="propType">()</span> <a class="hash-link" href="docs/datepickerandroid.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/datepickerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/DatePickerAndroidExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
when using the <code>minDate</code> and <code>maxDate</code> options.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datesetaction"></a><span class="propType">static </span>dateSetAction<span class="propType">()</span> <a class="hash-link" href="docs/datepickerandroid.html#datesetaction">#</a></h4><div><p>A date has been selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="dismissedaction"></a><span class="propType">static </span>dismissedAction<span class="propType">()</span> <a class="hash-link" href="docs/datepickerandroid.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/datepickerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/DatePickerAndroidExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -120,7 +120,7 @@ when using the <code>minDate</code> and <code>maxDate</code> options.</p></div><
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> DatePickerAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/dimensions.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22DatePickerAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> DatePickerAndroidExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/dimensions.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22DatePickerAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -6,7 +6,7 @@ source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class=
|
||||
The first and only argument is a Date object representing the new
|
||||
date and time.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes <span class="propType">number</span> <a class="hash-link" href="docs/datepickerios.html#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>By default, the date picker will use the device's timezone. With this
|
||||
parameter, it is possible to force a certain timezone offset. For
|
||||
instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/datepickerios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/DatePickerIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/datepickerios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/DatePickerIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -159,7 +159,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token string">'500'</span><span class="token punctuation">,</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">14</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="docs/drawerlayoutandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22DatePickerIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/drawerlayoutandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22DatePickerIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -6,7 +6,7 @@ app's <code>AndroidManifest.xml</code>:</p><p><code><uses-permission and
|
||||
options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool)
|
||||
On Android, this can return almost immediately if the location is cached or
|
||||
request an update, which might take a while.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="watchposition"></a><span class="propType">static </span>watchPosition<span class="propType">(success, error?, options?)</span> <a class="hash-link" href="docs/geolocation.html#watchposition">#</a></h4><div><p>Invokes the success callback whenever the location changes. Supported
|
||||
options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearwatch"></a><span class="propType">static </span>clearWatch<span class="propType">(watchID)</span> <a class="hash-link" href="docs/geolocation.html#clearwatch">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stopobserving"></a><span class="propType">static </span>stopObserving<span class="propType">()</span> <a class="hash-link" href="docs/geolocation.html#stopobserving">#</a></h4></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/geolocation.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/GeolocationExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token comment" spellcheck="true">/* eslint no-console: 0 */</span>
|
||||
options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearwatch"></a><span class="propType">static </span>clearWatch<span class="propType">(watchID)</span> <a class="hash-link" href="docs/geolocation.html#clearwatch">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stopobserving"></a><span class="propType">static </span>stopObserving<span class="propType">()</span> <a class="hash-link" href="docs/geolocation.html#stopobserving">#</a></h4></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/geolocation.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/GeolocationExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token comment" spellcheck="true">/* eslint no-console: 0 */</span>
|
||||
<span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -80,7 +80,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token string">'500'</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="docs/network.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Geolocation%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/network.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Geolocation%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -44,7 +44,7 @@ principle you could use this method to preload images, however it is not
|
||||
optimized for that purpose, and may in future be implemented in a way that
|
||||
does not fully load/download the image data. A proper, supported way to
|
||||
preload images will be provided as a separate API.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prefetch"></a><span class="propType">static </span>prefetch<span class="propType">(url: string)</span> <a class="hash-link" href="docs/image.html#prefetch">#</a></h4><div><p>Prefetches a remote image for later use by downloading it to the disk
|
||||
cache</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/image.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ImageExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
cache</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/image.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ImageExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -592,7 +592,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
height<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||||
resizeMode<span class="token punctuation">:</span> <span class="token string">'contain'</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="docs/listview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Image%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/listview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Image%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -3,7 +3,7 @@ next layout happens.</p><p>A common way to use this API is to call <code>LayoutA
|
||||
before calling <code>setState</code>.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/layoutanimation.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="configurenext"></a><span class="propType">static </span>configureNext<span class="propType">(config, onAnimationDidEnd?)</span> <a class="hash-link" href="docs/layoutanimation.html#configurenext">#</a></h4><div><p>Schedules an animation to happen on the next layout.</p><p>@param config Specifies animation properties:</p><ul><li><code>duration</code> in milliseconds</li><li><code>create</code>, config for animating in new views (see <code>Anim</code> type)</li><li><code>update</code>, config for animating views that have been updated
|
||||
(see <code>Anim</code> type)</li></ul><p>@param onAnimationDidEnd Called when the animation finished.
|
||||
Only supported on iOS.
|
||||
@param onError Called on error. Only supported on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(duration, type, creationProp)</span> <a class="hash-link" href="docs/layoutanimation.html#create">#</a></h4><div><p>Helper for creating a config for <code>configureNext</code>.</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="types"></a>Types<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#types">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="properties"></a>Properties<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="configchecker"></a>configChecker<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#configchecker">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presets"></a>Presets<span class="propType">: ObjectExpression</span> <a class="hash-link" href="docs/layoutanimation.html#presets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="easeineaseout"></a>easeInEaseOut<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#easeineaseout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="linear"></a>linear<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#linear">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spring"></a>spring<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#spring">#</a></h4></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/layoutanimation.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/LayoutAnimationExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
@param onError Called on error. Only supported on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(duration, type, creationProp)</span> <a class="hash-link" href="docs/layoutanimation.html#create">#</a></h4><div><p>Helper for creating a config for <code>configureNext</code>.</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="types"></a>Types<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#types">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="properties"></a>Properties<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="configchecker"></a>configChecker<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#configchecker">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presets"></a>Presets<span class="propType">: ObjectExpression</span> <a class="hash-link" href="docs/layoutanimation.html#presets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="easeineaseout"></a>easeInEaseOut<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#easeineaseout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="linear"></a>linear<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#linear">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spring"></a>spring<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#spring">#</a></h4></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/layoutanimation.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/LayoutAnimationExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -158,7 +158,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<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> <CrossFadeExample <span class="token operator">/</span><span class="token operator">></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="docs/linking.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22LayoutAnimation%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/linking.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22LayoutAnimation%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -46,7 +46,7 @@ and providing the handler</p><p>@platform ios</p></div></div><div class="prop"><
|
||||
or any other URL that can be opened with the installed apps.</p><p>NOTE: This method will fail if the system doesn't know how to open the specified URL.
|
||||
If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.</p><p>NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="canopenurl"></a><span class="propType">static </span>canOpenURL<span class="propType">(url)</span> <a class="hash-link" href="docs/linking.html#canopenurl">#</a></h4><div><p>Determine whether or not an installed app can handle a given URL.</p><p>NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!</p><p>NOTE: As of iOS 9, your app needs to provide the <code>LSApplicationQueriesSchemes</code> key
|
||||
inside <code>Info.plist</code>.</p><p>@param URL the URL to open</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getinitialurl"></a><span class="propType">static </span>getInitialURL<span class="propType">()</span> <a class="hash-link" href="docs/linking.html#getinitialurl">#</a></h4><div><p>If the app launch was triggered by an app link with,
|
||||
it will give the link url, otherwise it will give <code>null</code></p><p>NOTE: To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/linking.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/LinkingExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
it will give the link url, otherwise it will give <code>null</code></p><p>NOTE: To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/linking.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/LinkingExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -125,7 +125,7 @@ it will give the link url, otherwise it will give <code>null</code></p><p>NOTE:
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> IntentAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/linkingios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Linking%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> IntentAndroidExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/linkingios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Linking%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -67,7 +67,7 @@ pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor"
|
||||
top of the screen when scrolling. For example, passing
|
||||
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with <code>horizontal={true}</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/listview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="getmetrics"></a>getMetrics<span class="propType">()</span> <a class="hash-link" href="docs/listview.html#getmetrics">#</a></h4><div><p>Exports some data, e.g. for perf investigations or analytics.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="propType">(...args)</span> <a class="hash-link" href="docs/listview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>See <code>ScrollView#scrollTo</code>.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/listview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
with <code>horizontal={true}</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/listview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="getmetrics"></a>getMetrics<span class="propType">()</span> <a class="hash-link" href="docs/listview.html#getmetrics">#</a></h4><div><p>Exports some data, e.g. for perf investigations or analytics.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="propType">(...args)</span> <a class="hash-link" href="docs/listview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>See <code>ScrollView#scrollTo</code>.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/listview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -208,7 +208,7 @@ with <code>horizontal={true}</code>.</p></div></div></div><span><h3><a class="an
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ListViewSimpleExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/mapview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ListView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ListViewSimpleExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/mapview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ListView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -29,7 +29,7 @@ Note that this has no effect unless <code>showsUserLocation</code> is enabled.
|
||||
Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="legallabelinsets"></a><span class="platform">ios</span>legalLabelInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/mapview.html#legallabelinsets">#</a></h4><div><p>Insets for the map's legal label, originally at bottom left of the map.
|
||||
See <code>EdgeInsetsPropType.js</code> for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maptype"></a><span class="platform">ios</span>mapType <span class="propType">enum('standard', 'satellite', 'hybrid')</span> <a class="hash-link" href="docs/mapview.html#maptype">#</a></h4><div><p>The map type to be displayed.</p><ul><li>standard: standard road map (default)</li><li>satellite: satellite view</li><li>hybrid: satellite view with roads and points of interest overlaid</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxdelta"></a><span class="platform">ios</span>maxDelta <span class="propType">number</span> <a class="hash-link" href="docs/mapview.html#maxdelta">#</a></h4><div><p>Maximum size of area that can be displayed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mindelta"></a><span class="platform">ios</span>minDelta <span class="propType">number</span> <a class="hash-link" href="docs/mapview.html#mindelta">#</a></h4><div><p>Minimum size of area that can be displayed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overlays"></a><span class="platform">ios</span>overlays <span class="propType"><span>[{coordinates: [object Object], lineWidth: number, strokeColor: [object Object], fillColor: [object Object], id: string}]</span></span> <a class="hash-link" href="docs/mapview.html#overlays">#</a></h4><div><p>Map overlays</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showscompass"></a><span class="platform">ios</span>showsCompass <span class="propType">bool</span> <a class="hash-link" href="docs/mapview.html#showscompass">#</a></h4><div><p>If <code>false</code> compass won't be displayed on the map.
|
||||
Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showspointsofinterest"></a><span class="platform">ios</span>showsPointsOfInterest <span class="propType">bool</span> <a class="hash-link" href="docs/mapview.html#showspointsofinterest">#</a></h4><div><p>If <code>false</code> points of interest won't be displayed on the map.
|
||||
Default value is <code>true</code>.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/mapview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/MapViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
Default value is <code>true</code>.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/mapview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/MapViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -421,7 +421,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token operator">/</span><span class="token operator">></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="docs/modal.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22MapView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/modal.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22MapView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -4,7 +4,7 @@ your app written in React Native to present content above the enclosing
|
||||
native view hierarchy.</p><p>In apps written with React Native from the root view down, you should use
|
||||
Navigator instead of Modal. With a top-level Navigator, you have more control
|
||||
over how to present the modal scene over the rest of your app by using the
|
||||
configureScene property.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/modal.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#animated">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>animationType</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animationtype"></a>animationType <span class="propType">enum('none', 'slide', 'fade')</span> <a class="hash-link" href="docs/modal.html#animationtype">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrequestclose"></a>onRequestClose <span class="propType">Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onrequestclose">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshow"></a>onShow <span class="propType">function</span> <a class="hash-link" href="docs/modal.html#onshow">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transparent"></a>transparent <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#transparent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="visible"></a>visible <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#visible">#</a></h4></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/modal.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ModalExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
configureScene property.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/modal.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#animated">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>animationType</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animationtype"></a>animationType <span class="propType">enum('none', 'slide', 'fade')</span> <a class="hash-link" href="docs/modal.html#animationtype">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrequestclose"></a>onRequestClose <span class="propType">Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onrequestclose">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshow"></a>onShow <span class="propType">function</span> <a class="hash-link" href="docs/modal.html#onshow">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transparent"></a>transparent <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#transparent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="visible"></a>visible <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#visible">#</a></h4></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/modal.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ModalExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -175,7 +175,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
modalButton<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
marginTop<span class="token punctuation">:</span> <span class="token number">10</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="docs/navigator.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Modal%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/navigator.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Modal%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -132,7 +132,7 @@ load the view for the new route.</p></div></div><div class="prop"><h4 class="pro
|
||||
rightButtonIcon?: Object;
|
||||
onRightButtonPress?: Function;
|
||||
wrapperStyle?: any;
|
||||
})</span> <a class="hash-link" href="docs/navigatorios.html#resetto">#</a></h4><div><p>Replaces the top item and popToTop</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/navigatorios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NavigatorIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
})</span> <a class="hash-link" href="docs/navigatorios.html#resetto">#</a></h4><div><p>Replaces the top item and popToTop</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/navigatorios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NavigatorIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -377,7 +377,7 @@ const styles <span class="token operator">=</span> StyleSheet<span class="token
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NavigatorIOSExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pickerios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22NavigatorIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NavigatorIOSExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pickerios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22NavigatorIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -35,7 +35,7 @@ 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">'change'</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="docs/netinfo.html#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, handler)</span> <a class="hash-link" href="docs/netinfo.html#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, handler)</span> <a class="hash-link" href="docs/netinfo.html#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="docs/netinfo.html#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">()</span> <a class="hash-link" href="docs/netinfo.html#isconnectionexpensive">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/netinfo.html#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="docs/netinfo.html#isconnected">#</a></h4></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/netinfo.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NetInfoExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<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="docs/netinfo.html#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, handler)</span> <a class="hash-link" href="docs/netinfo.html#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, handler)</span> <a class="hash-link" href="docs/netinfo.html#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="docs/netinfo.html#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">()</span> <a class="hash-link" href="docs/netinfo.html#isconnectionexpensive">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/netinfo.html#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="docs/netinfo.html#isconnected">#</a></h4></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/netinfo.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NetInfoExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -202,7 +202,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Asynchronously check isConnectionExpensive'</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> <IsConnectionExpensive <span class="token operator">/</span><span class="token operator">></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="docs/panresponder.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22NetInfo%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/panresponder.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22NetInfo%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -58,7 +58,7 @@ as well.</p><p>Be careful with onStartShould* callbacks. They only reflect updat
|
||||
Once the node is the responder, you can rely on every start/end event
|
||||
being processed by the gesture and <code>gestureState</code> being updated
|
||||
accordingly. (numberActiveTouches) may not be totally accurate unless you
|
||||
are the responder.</p></li></ul></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/panresponder.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PanResponderExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
are the responder.</p></li></ul></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/panresponder.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PanResponderExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -177,7 +177,7 @@ are the responder.</p></li></ul></div></div></div></span></div><div><table width
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> PanResponderExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pixelratio.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22PanResponder%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> PanResponderExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pixelratio.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22PanResponder%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -6,7 +6,130 @@
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/picker.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/picker.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="docs/picker.html#onvaluechange">#</a></h4><div><p>Callback for when an item is selected. This is called with the following parameters:
|
||||
- <code>itemValue</code>: the <code>value</code> prop of the item that was selected
|
||||
- <code>itemPosition</code>: the index of the selected item in this picker</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedvalue"></a>selectedValue <span class="propType">any</span> <a class="hash-link" href="docs/picker.html#selectedvalue">#</a></h4><div><p>Value matching value of one of the items. Can be a string or an integer.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">pickerStyleType</span> <a class="hash-link" href="docs/picker.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/picker.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled <span class="propType">bool</span> <a class="hash-link" href="docs/picker.html#enabled">#</a></h4><div><p>If set to false, the picker will be disabled, i.e. the user will not be able to make a
|
||||
selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode <span class="propType">enum('dialog', 'dropdown')</span> <a class="hash-link" href="docs/picker.html#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>'dialog': Show a modal dialog. This is the default.</li><li>'dropdown': Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt <span class="propType">string</span> <a class="hash-link" href="docs/picker.html#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle <span class="propType">itemStylePropType</span> <a class="hash-link" href="docs/picker.html#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressbarandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode <span class="propType">enum('dialog', 'dropdown')</span> <a class="hash-link" href="docs/picker.html#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>'dialog': Show a modal dialog. This is the default.</li><li>'dropdown': Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt <span class="propType">string</span> <a class="hash-link" href="docs/picker.html#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle <span class="propType">itemStylePropType</span> <a class="hash-link" href="docs/picker.html#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/picker.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PickerExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const StyleSheet <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'StyleSheet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'UIExplorerPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
const <span class="token punctuation">{</span>
|
||||
Picker<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
TouchableWithoutFeedback<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
const Item <span class="token operator">=</span> Picker<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||||
|
||||
const PickerExample <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>
|
||||
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<Picker>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Provides multiple options to choose from, using either a dropdown menu or a dialog.'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
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>
|
||||
selected1<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
selected2<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
selected3<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token punctuation">:</span> Picker<span class="token punctuation">.</span>MODE_DIALOG<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">return</span> <span class="token punctuation">(</span>
|
||||
<UIExplorerPage title<span class="token operator">=</span><span class="token string">"<Picker>"</span><span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Basic Picker"</span><span class="token operator">></span>
|
||||
<Picker
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>picker<span class="token punctuation">}</span>
|
||||
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected1<span class="token punctuation">}</span>
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onValueChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'selected1'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"hello"</span> value<span class="token operator">=</span><span class="token string">"key0"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"world"</span> value<span class="token operator">=</span><span class="token string">"key1"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Disabled picker"</span><span class="token operator">></span>
|
||||
<Picker style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>picker<span class="token punctuation">}</span> enabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected1<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"hello"</span> value<span class="token operator">=</span><span class="token string">"key0"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"world"</span> value<span class="token operator">=</span><span class="token string">"key1"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Dropdown Picker"</span><span class="token operator">></span>
|
||||
<Picker
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>picker<span class="token punctuation">}</span>
|
||||
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected2<span class="token punctuation">}</span>
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onValueChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'selected2'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
mode<span class="token operator">=</span><span class="token string">"dropdown"</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"hello"</span> value<span class="token operator">=</span><span class="token string">"key0"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"world"</span> value<span class="token operator">=</span><span class="token string">"key1"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Picker with prompt message"</span><span class="token operator">></span>
|
||||
<Picker
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>picker<span class="token punctuation">}</span>
|
||||
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected3<span class="token punctuation">}</span>
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onValueChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'selected3'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
prompt<span class="token operator">=</span><span class="token string">"Pick one, just one"</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"hello"</span> value<span class="token operator">=</span><span class="token string">"key0"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"world"</span> value<span class="token operator">=</span><span class="token string">"key1"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Picker with no listener"</span><span class="token operator">></span>
|
||||
<Picker style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>picker<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"hello"</span> value<span class="token operator">=</span><span class="token string">"key0"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"world"</span> value<span class="token operator">=</span><span class="token string">"key1"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
Cannot change the value of <span class="token keyword">this</span> picker because it doesn't update selectedValue<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Colorful pickers"</span><span class="token operator">></span>
|
||||
<Picker
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>picker<span class="token punctuation">,</span> <span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'#333'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||||
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>color<span class="token punctuation">}</span>
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onValueChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
mode<span class="token operator">=</span><span class="token string">"dropdown"</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"red"</span> color<span class="token operator">=</span><span class="token string">"red"</span> value<span class="token operator">=</span><span class="token string">"red"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"green"</span> color<span class="token operator">=</span><span class="token string">"green"</span> value<span class="token operator">=</span><span class="token string">"green"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"blue"</span> color<span class="token operator">=</span><span class="token string">"blue"</span> value<span class="token operator">=</span><span class="token string">"blue"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span>
|
||||
<Picker
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>picker<span class="token punctuation">}</span>
|
||||
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>color<span class="token punctuation">}</span>
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onValueChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
mode<span class="token operator">=</span><span class="token string">"dialog"</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"red"</span> color<span class="token operator">=</span><span class="token string">"red"</span> value<span class="token operator">=</span><span class="token string">"red"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"green"</span> color<span class="token operator">=</span><span class="token string">"green"</span> value<span class="token operator">=</span><span class="token string">"green"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<Item label<span class="token operator">=</span><span class="token string">"blue"</span> color<span class="token operator">=</span><span class="token string">"blue"</span> value<span class="token operator">=</span><span class="token string">"blue"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Picker<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
changeMode<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>
|
||||
const newMode <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>mode <span class="token operator">===</span> Picker<span class="token punctuation">.</span>MODE_DIALOG
|
||||
<span class="token operator">?</span> Picker<span class="token punctuation">.</span>MODE_DROPDOWN
|
||||
<span class="token punctuation">:</span> Picker<span class="token punctuation">.</span>MODE_DIALOG<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>mode<span class="token punctuation">:</span> newMode<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>
|
||||
|
||||
onValueChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>key<span class="token punctuation">:</span> string<span class="token punctuation">,</span> value<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
const newState <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
newState<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<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>newState<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> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
picker<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">100</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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> PickerExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressbarandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Picker%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@ that the app is loading or there is some activity in the app.</p><p>Example:</p>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/progressbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/progressbarandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/progressbarandroid.html#color">#</a></h4><div><p>Color of the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indeterminate"></a>indeterminate <span class="propType">indeterminateType</span> <a class="hash-link" href="docs/progressbarandroid.html#indeterminate">#</a></h4><div><p>If the progress bar will show indeterminate progress. Note that this
|
||||
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress <span class="propType">number</span> <a class="hash-link" href="docs/progressbarandroid.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr <span class="propType">STYLE_ATTRIBUTES</span> <a class="hash-link" href="docs/progressbarandroid.html#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/progressbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/progressbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ProgressBarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress <span class="propType">number</span> <a class="hash-link" href="docs/progressbarandroid.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr <span class="propType">STYLE_ATTRIBUTES</span> <a class="hash-link" href="docs/progressbarandroid.html#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/progressbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/progressbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ProgressBarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> ProgressBar <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'ProgressBarAndroid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'React'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -108,7 +108,7 @@ can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ProgressBarAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ProgressBarAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ProgressBarAndroidExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ProgressBarAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -40,7 +40,7 @@ memory leaks</p></div></div><div class="prop"><h4 class="propTitle"><a class="an
|
||||
from a notification.</p><p>The first caller of <code>popInitialNotification</code> will get the initial
|
||||
notification object, or <code>null</code>. Subsequent invocations will return null.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="constructor"></a>constructor<span class="propType">(nativeNotif)</span> <a class="hash-link" href="docs/pushnotificationios.html#constructor">#</a></h4><div><p>You will never need to instantiate <code>PushNotificationIOS</code> yourself.
|
||||
Listening to the <code>notification</code> event and invoking
|
||||
<code>popInitialNotification</code> is sufficient</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getmessage"></a>getMessage<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getmessage">#</a></h4><div><p>An alias for <code>getAlert</code> to get the notification's main message string</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getsound"></a>getSound<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getsound">#</a></h4><div><p>Gets the sound string from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getalert"></a>getAlert<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getalert">#</a></h4><div><p>Gets the notification's main message from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getbadgecount"></a>getBadgeCount<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getbadgecount">#</a></h4><div><p>Gets the badge count number from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getdata"></a>getData<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getdata">#</a></h4><div><p>Gets the data object on the notif</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/pushnotificationios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PushNotificationIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<code>popInitialNotification</code> is sufficient</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getmessage"></a>getMessage<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getmessage">#</a></h4><div><p>An alias for <code>getAlert</code> to get the notification's main message string</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getsound"></a>getSound<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getsound">#</a></h4><div><p>Gets the sound string from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getalert"></a>getAlert<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getalert">#</a></h4><div><p>Gets the notification's main message from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getbadgecount"></a>getBadgeCount<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getbadgecount">#</a></h4><div><p>Gets the badge count number from the <code>aps</code> object</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getdata"></a>getData<span class="propType">()</span> <a class="hash-link" href="docs/pushnotificationios.html#getdata">#</a></h4><div><p>Gets the data object on the notif</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/pushnotificationios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PushNotificationIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -217,7 +217,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<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> <NotificationPermissionExample <span class="token operator">/</span><span class="token operator">></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="docs/statusbarios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22PushNotificationIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/statusbarios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22PushNotificationIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -32,7 +32,7 @@ triggers an <code>onRefresh</code> event.</p><h3><a class="anchor" name="usage-e
|
||||
<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><p><strong>Note:</strong> <code>refreshing</code> is a controlled prop, this is why it needs to be set to true
|
||||
in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediatly.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/refreshcontrol.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/refreshcontrol.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh <span class="propType">function</span> <a class="hash-link" href="docs/refreshcontrol.html#onrefresh">#</a></h4><div><p>Called when the view starts refreshing.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#refreshing">#</a></h4><div><p>Whether the view should be indicating an active refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="colors"></a><span class="platform">android</span>colors <span class="propType"><span>[<a href="docs/colors.html">color</a>]</span></span> <a class="hash-link" href="docs/refreshcontrol.html#colors">#</a></h4><div><p>The colors (at least one) that will be used to draw the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#enabled">#</a></h4><div><p>Whether the pull to refresh functionality is enabled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressbackgroundcolor"></a><span class="platform">android</span>progressBackgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#progressbackgroundcolor">#</a></h4><div><p>The background color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="size"></a><span class="platform">android</span>size <span class="propType">RefreshLayoutConsts.SIZE.DEFAULT</span> <a class="hash-link" href="docs/refreshcontrol.html#size">#</a></h4><div><p>Size of the refresh indicator, see RefreshControl.SIZE.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#tintcolor">#</a></h4><div><p>The color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a><span class="platform">ios</span>title <span class="propType">string</span> <a class="hash-link" href="docs/refreshcontrol.html#title">#</a></h4><div><p>The title displayed under the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a><span class="platform">ios</span>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#titlecolor">#</a></h4><div><p>Title color.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/refreshcontrol.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/RefreshControlExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediatly.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/refreshcontrol.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/refreshcontrol.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh <span class="propType">function</span> <a class="hash-link" href="docs/refreshcontrol.html#onrefresh">#</a></h4><div><p>Called when the view starts refreshing.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#refreshing">#</a></h4><div><p>Whether the view should be indicating an active refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="colors"></a><span class="platform">android</span>colors <span class="propType"><span>[<a href="docs/colors.html">color</a>]</span></span> <a class="hash-link" href="docs/refreshcontrol.html#colors">#</a></h4><div><p>The colors (at least one) that will be used to draw the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#enabled">#</a></h4><div><p>Whether the pull to refresh functionality is enabled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressbackgroundcolor"></a><span class="platform">android</span>progressBackgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#progressbackgroundcolor">#</a></h4><div><p>The background color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="size"></a><span class="platform">android</span>size <span class="propType">RefreshLayoutConsts.SIZE.DEFAULT</span> <a class="hash-link" href="docs/refreshcontrol.html#size">#</a></h4><div><p>Size of the refresh indicator, see RefreshControl.SIZE.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#tintcolor">#</a></h4><div><p>The color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a><span class="platform">ios</span>title <span class="propType">string</span> <a class="hash-link" href="docs/refreshcontrol.html#title">#</a></h4><div><p>The title displayed under the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a><span class="platform">ios</span>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#titlecolor">#</a></h4><div><p>Title color.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/refreshcontrol.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/RefreshControlExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -144,7 +144,7 @@ const RefreshControlExample <span class="token operator">=</span> React<span cla
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> RefreshControlExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/scrollview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22RefreshControl%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> RefreshControlExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/scrollview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22RefreshControl%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -91,7 +91,7 @@ top of the screen when scrolling. For example, passing
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="endrefreshing"></a>endRefreshing<span class="propType">()</span> <a class="hash-link" href="docs/scrollview.html#endrefreshing">#</a></h4><div><p>Deprecated. Use <code>RefreshControl</code> instead.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="propType">(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Syntax:</p><p><code>scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})</code></p><p>Note: The weird argument signature is due to the fact that, for historical reasons,
|
||||
the function also accepts separate arguments as as alternative to the options object.
|
||||
This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollwithoutanimationto"></a>scrollWithoutAnimationTo<span class="propType">(y, x)</span> <a class="hash-link" href="docs/scrollview.html#scrollwithoutanimationto">#</a></h4><div><p>Deprecated, do not use.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/scrollview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollwithoutanimationto"></a>scrollWithoutAnimationTo<span class="propType">(y, x)</span> <a class="hash-link" href="docs/scrollview.html#scrollwithoutanimationto">#</a></h4><div><p>Deprecated, do not use.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/scrollview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -209,7 +209,7 @@ THUMBS <span class="token operator">=</span> THUMBS<span class="token punctuatio
|
||||
width<span class="token punctuation">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">64</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="docs/segmentedcontrolios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ScrollView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/segmentedcontrolios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ScrollView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -11,7 +11,7 @@ selects a value and changes the index, as shown in the example below.</p><div cl
|
||||
Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="momentary"></a>momentary <span class="propType">bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#momentary">#</a></h4><div><p>If true, then selecting a segment won't persist visually.
|
||||
The <code>onValueChange</code> callback will still work as expected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onchange">#</a></h4><div><p>Callback that is called when the user taps a segment;
|
||||
passes the event as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onvaluechange">#</a></h4><div><p>Callback that is called when the user taps a segment;
|
||||
passes the segment's value as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedindex"></a>selectedIndex <span class="propType">number</span> <a class="hash-link" href="docs/segmentedcontrolios.html#selectedindex">#</a></h4><div><p>The index in <code>props.values</code> of the segment to be (pre)selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">string</span> <a class="hash-link" href="docs/segmentedcontrolios.html#tintcolor">#</a></h4><div><p>Accent color of the control.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="values"></a>values <span class="propType"><span>[string]</span></span> <a class="hash-link" href="docs/segmentedcontrolios.html#values">#</a></h4><div><p>The labels for the control's segment buttons, in order.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/segmentedcontrolios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SegmentedControlIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
passes the segment's value as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedindex"></a>selectedIndex <span class="propType">number</span> <a class="hash-link" href="docs/segmentedcontrolios.html#selectedindex">#</a></h4><div><p>The index in <code>props.values</code> of the segment to be (pre)selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">string</span> <a class="hash-link" href="docs/segmentedcontrolios.html#tintcolor">#</a></h4><div><p>Accent color of the control.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="values"></a>values <span class="propType"><span>[string]</span></span> <a class="hash-link" href="docs/segmentedcontrolios.html#values">#</a></h4><div><p>The labels for the control's segment buttons, in order.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/segmentedcontrolios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SegmentedControlIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -165,7 +165,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Change events can be detected'</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> <EventSegmentedControlExample <span class="token operator">/</span><span class="token operator">></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="docs/slider.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22SegmentedControlIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/slider.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22SegmentedControlIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -11,7 +11,7 @@ leftmost pixel of the image will be stretched to fill the track.</p></div></div>
|
||||
default blue gradient image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumtrackimage"></a><span class="platform">ios</span>minimumTrackImage <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/slider.html#minimumtrackimage">#</a></h4><div><p>Assigns a minimum track image. Only static images are supported. The
|
||||
rightmost pixel of the image will be stretched to fill the track.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumtracktintcolor"></a><span class="platform">ios</span>minimumTrackTintColor <span class="propType">string</span> <a class="hash-link" href="docs/slider.html#minimumtracktintcolor">#</a></h4><div><p>The color used for the track to the left of the button. Overrides the
|
||||
default blue gradient image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbimage"></a><span class="platform">ios</span>thumbImage <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/slider.html#thumbimage">#</a></h4><div><p>Sets an image for the thumb. Only static images are supported.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="trackimage"></a><span class="platform">ios</span>trackImage <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/slider.html#trackimage">#</a></h4><div><p>Assigns a single image for the track. Only static images are supported.
|
||||
The center pixel of the image will be stretched to fill the track.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/slider.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SliderExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
The center pixel of the image will be stretched to fill the track.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/slider.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SliderExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -165,7 +165,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<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></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/sliderios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Slider%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/sliderios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Slider%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -12,7 +12,7 @@ Default value is 0.</p></div></div><div class="prop"><h4 class="propTitle"><a cl
|
||||
The center pixel of the image will be stretched to fill the track.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">number</span> <a class="hash-link" href="docs/sliderios.html#value">#</a></h4><div><p>Initial value of the slider. The value should be between minimumValue
|
||||
and maximumValue, which default to 0 and 1 respectively.
|
||||
Default value is 0.</p><p><em>This is not a controlled component</em>, e.g. if you don't update
|
||||
the value, the component won't be reset to its initial value.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/sliderios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SliderIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
the value, the component won't be reset to its initial value.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/sliderios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SliderIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -118,7 +118,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<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></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/statusbar.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22SliderIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/statusbar.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22SliderIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -22,7 +22,7 @@ the next render.</p></div><h3><a class="anchor" name="props"></a>Props <a class=
|
||||
Supported for backgroundColor, barStyle and hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hidden"></a>hidden <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#hidden">#</a></h4><div><p>If the status bar is hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a><span class="platform">android</span>backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/statusbar.html#backgroundcolor">#</a></h4><div><p>The background color of the status bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a><span class="platform">android</span>translucent <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#translucent">#</a></h4><div><p>If the status bar is translucent.
|
||||
When translucent is set to true, the app will draw under the status bar.
|
||||
This is useful when using a semi transparent status bar color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="barstyle"></a><span class="platform">ios</span>barStyle <span class="propType">enum('default', 'light-content')</span> <a class="hash-link" href="docs/statusbar.html#barstyle">#</a></h4><div><p>Sets the color of the status bar text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="networkactivityindicatorvisible"></a><span class="platform">ios</span>networkActivityIndicatorVisible <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#networkactivityindicatorvisible">#</a></h4><div><p>If the network activity indicator should be visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showhidetransition"></a><span class="platform">ios</span>showHideTransition <span class="propType">enum('fade', 'slide')</span> <a class="hash-link" href="docs/statusbar.html#showhidetransition">#</a></h4><div><p>The transition effect when showing and hiding the status bar using the <code>hidden</code>
|
||||
prop. Defaults to 'fade'.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/statusbar.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="sethidden"></a><span class="propType">static </span>setHidden<span class="propType">(hidden: boolean, animation: 'none' | 'fade' | 'slide')</span> <a class="hash-link" href="docs/statusbar.html#sethidden">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setbarstyle"></a><span class="propType">static </span>setBarStyle<span class="propType">(style: 'default' | 'light-content', animated: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbarstyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setnetworkactivityindicatorvisible"></a><span class="propType">static </span>setNetworkActivityIndicatorVisible<span class="propType">(visible: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setnetworkactivityindicatorvisible">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setbackgroundcolor"></a><span class="propType">static </span>setBackgroundColor<span class="propType">(color: string, animated: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbackgroundcolor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="settranslucent"></a><span class="propType">static </span>setTranslucent<span class="propType">(translucent: boolean)</span> <a class="hash-link" href="docs/statusbar.html#settranslucent">#</a></h4></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/statusbar.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/StatusBarExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
prop. Defaults to 'fade'.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/statusbar.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="sethidden"></a><span class="propType">static </span>setHidden<span class="propType">(hidden: boolean, animation: 'none' | 'fade' | 'slide')</span> <a class="hash-link" href="docs/statusbar.html#sethidden">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setbarstyle"></a><span class="propType">static </span>setBarStyle<span class="propType">(style: 'default' | 'light-content', animated: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbarstyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setnetworkactivityindicatorvisible"></a><span class="propType">static </span>setNetworkActivityIndicatorVisible<span class="propType">(visible: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setnetworkactivityindicatorvisible">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setbackgroundcolor"></a><span class="propType">static </span>setBackgroundColor<span class="propType">(color: string, animated: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbackgroundcolor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="settranslucent"></a><span class="propType">static </span>setTranslucent<span class="propType">(translucent: boolean)</span> <a class="hash-link" href="docs/statusbar.html#settranslucent">#</a></h4></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/statusbar.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/StatusBarExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -475,7 +475,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
marginBottom<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</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="docs/switch.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22StatusBar%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/switch.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22StatusBar%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@ If the <code>value</code> prop is not updated, the component will continue to re
|
||||
the supplied <code>value</code> prop instead of the expected result of any user actions.</p><p>@keyword checkbox
|
||||
@keyword toggle</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/switch.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/switch.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled <span class="propType">bool</span> <a class="hash-link" href="docs/switch.html#disabled">#</a></h4><div><p>If true the user won't be able to toggle the switch.
|
||||
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="docs/switch.html#onvaluechange">#</a></h4><div><p>Invoked with the new value when the value changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/switch.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">bool</span> <a class="hash-link" href="docs/switch.html#value">#</a></h4><div><p>The value of the switch. If true the switch will be turned on.
|
||||
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ontintcolor"></a><span class="platform">ios</span>onTintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#ontintcolor">#</a></h4><div><p>Background color when the switch is turned on.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbtintcolor"></a><span class="platform">ios</span>thumbTintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#thumbtintcolor">#</a></h4><div><p>Color of the foreground switch grip.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#tintcolor">#</a></h4><div><p>Background color when the switch is turned off.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/switch.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SwitchExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ontintcolor"></a><span class="platform">ios</span>onTintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#ontintcolor">#</a></h4><div><p>Background color when the switch is turned on.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbtintcolor"></a><span class="platform">ios</span>thumbTintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#thumbtintcolor">#</a></h4><div><p>Color of the foreground switch grip.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#tintcolor">#</a></h4><div><p>Background color when the switch is turned off.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/switch.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SwitchExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -147,7 +147,7 @@ Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'<Switch>'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token string">'SwitchExample'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Native boolean input'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> examples<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/tabbarios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Switch%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> examples<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/tabbarios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Switch%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -75,7 +75,825 @@ html <span class="token punctuation">{</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
and red
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span></div><p>We believe that this more constrained way to style text will yield better apps:</p><ul><li><p>(Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.</p></li><li><p>(Implementor) The implementation of React Native is also simplified. We do not need to have a <code>fontFamily</code> field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.</p></li></ul></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/textinput.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span></div><p>We believe that this more constrained way to style text will yield better apps:</p><ul><li><p>(Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.</p></li><li><p>(Implementor) The implementation of React Native is also simplified. We do not need to have a <code>fontFamily</code> field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.</p></li></ul></div></div><div><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/text.html#examples">#</a></h3><div><table width="100%"><tbody><tr><td><h4><a class="anchor" name="ios"></a>IOS <a class="hash-link" href="docs/text.html#ios">#</a></h4></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextExample.ios.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||||
Image<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Entity <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>
|
||||
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">return</span> <span class="token punctuation">(</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'500'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#527fe4'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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> AttributeToggler <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>
|
||||
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>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
toggleWeight<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">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight <span class="token operator">===</span> <span class="token string">'bold'</span> <span class="token operator">?</span> <span class="token string">'normal'</span> <span class="token punctuation">:</span> <span class="token string">'bold'</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>
|
||||
increaseSize<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">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize <span class="token operator">+</span> <span class="token number">1</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> curStyle <span class="token operator">=</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight<span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>curStyle<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Tap the controls below to change attributes<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>See how it will even work on <Text style<span class="token operator">=</span><span class="token punctuation">{</span>curStyle<span class="token punctuation">}</span><span class="token operator">></span><span class="token keyword">this</span> nested text<<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#ffaaaa'</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>toggleWeight<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Toggle Weight
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#aaaaff'</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increaseSize<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Increase Size
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">'<Text>'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Base component for rendering styled text.'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token string">'TextExample'</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">'Wrap'</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">return</span> <span class="token punctuation">(</span>
|
||||
<Text<span class="token operator">></span>
|
||||
The text should wrap <span class="token keyword">if</span> it goes on multiple lines<span class="token punctuation">.</span> See<span class="token punctuation">,</span> <span class="token keyword">this</span> is going to
|
||||
the next line<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Padding'</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">return</span> <span class="token punctuation">(</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
This text is indented by 10px padding on all sides<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Font Family'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'Cochin'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Cochin
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'Cochin'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Cochin bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'Helvetica'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Helvetica
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'Helvetica'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Helvetica bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'Verdana'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Verdana
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'Verdana'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Verdana bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Font Size'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">23</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Size <span class="token number">23</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Size <span class="token number">8</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Color'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Red color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Blue color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Font Weight'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'100'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be ultralight
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'200'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be light
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be normal
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'900'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be ultrabold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Font Style'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontStyle<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Normal text
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Italic text
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Text Decoration'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'solid'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Solid underline
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'double'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#ff0000'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Double underline <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dashed'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#9CDC40'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dashed underline <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dotted'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dotted underline <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'none'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
None textDecoration
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'solid'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Solid line<span class="token operator">-</span>through
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'double'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#ff0000'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Double line<span class="token operator">-</span>through <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dashed'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'#9CDC40'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dashed line<span class="token operator">-</span>through <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'dotted'</span><span class="token punctuation">,</span> textDecorationColor<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Dotted line<span class="token operator">-</span>through <span class="token keyword">with</span> custom color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline line-through'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Both underline and line<span class="token operator">-</span>through
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Nested'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Nested text components will inherit the styles of their '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'parents (only backgroundColor is inherited from non-Text parents). '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'<Text> only supports other <Text> and raw text (strings) as children.'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>Normal text<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and bold
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#527fe4'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and tiny inherited bold blue<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span><span class="token number">0.7</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>opacity
|
||||
<Text<span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>is inherited
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span><span class="token number">0.7</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and accumulated
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span><span class="token string">'#ffaaaa'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and also applies to the background<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Entity<span class="token operator">></span>Entity Name<<span class="token operator">/</span>Entity<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Text Align'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
auto <span class="token punctuation">(</span>default<span class="token punctuation">)</span> <span class="token operator">-</span> english LTR
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
أحب اللغة العربية auto <span class="token punctuation">(</span>default<span class="token punctuation">)</span> <span class="token operator">-</span> arabic RTL
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
left left left left left left left left left left left left left left left
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
center center center center center center center center center center center
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textAlign<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
right right right right right right right right right right right right right
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textAlign<span class="token punctuation">:</span> <span class="token string">'justify'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
justify<span class="token punctuation">:</span> <span class="token keyword">this</span> text component<span class="token punctuation">{</span><span class="token string">"'"</span><span class="token punctuation">}</span>s contents are laid out <span class="token keyword">with</span> <span class="token string">"textAlign: justify"</span>
|
||||
and as you can see all of the lines except the last one span the
|
||||
available width of the parent container<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Letter Spacing'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
letterSpacing <span class="token operator">=</span> <span class="token number">0</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
letterSpacing <span class="token operator">=</span> <span class="token number">2</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
letterSpacing <span class="token operator">=</span> <span class="token number">9</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
letterSpacing <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Spaces'</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">return</span> <span class="token punctuation">(</span>
|
||||
<Text<span class="token operator">></span>
|
||||
A <span class="token punctuation">{</span><span class="token string">'generated'</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token string">'string'</span><span class="token punctuation">}</span> and some &nbsp<span class="token punctuation">;</span>&nbsp<span class="token punctuation">;</span>&nbsp<span class="token punctuation">;</span> spaces
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Line Height'</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">return</span> <span class="token punctuation">(</span>
|
||||
<Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>lineHeight<span class="token punctuation">:</span> <span class="token number">35</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
A lot of space between the lines of <span class="token keyword">this</span> long passage that should
|
||||
wrap once<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Empty Text'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'It\'s ok to have Text with zero or null children.'</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">return</span> <span class="token punctuation">(</span>
|
||||
<Text <span class="token operator">/</span><span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Toggling Attributes'</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> ReactElement <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <AttributeToggler <span class="token operator">/</span><span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'backgroundColor attribute'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'backgroundColor is inherited from all types of views.'</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">return</span> <span class="token punctuation">(</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'yellow'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Yellow container background<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#ffaaaa'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>red background<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#aaaaff'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>blue background<span class="token punctuation">,</span>
|
||||
<Text<span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>inherited blue background<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#aaffaa'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>nested green background<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'numberOfLines attribute'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text numberOfLines<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Maximum of one line<span class="token punctuation">,</span> no matter how much I write here<span class="token punctuation">.</span> If I keep writing<span class="token punctuation">,</span> it<span class="token punctuation">{</span><span class="token string">"'"</span><span class="token punctuation">}</span>ll just truncate after one line<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text numberOfLines<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Maximum of two lines<span class="token punctuation">,</span> no matter how much I write here<span class="token punctuation">.</span> If I keep writing<span class="token punctuation">,</span> it<span class="token punctuation">{</span><span class="token string">"'"</span><span class="token punctuation">}</span>ll just truncate after two lines<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
No maximum lines specified<span class="token punctuation">,</span> no matter how much I write here<span class="token punctuation">.</span> If I keep writing<span class="token punctuation">,</span> it<span class="token punctuation">{</span><span class="token string">"'"</span><span class="token punctuation">}</span>ll just keep going and going<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Text highlighting (tap the link to see highlight)'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>Lorem ipsum dolor sit amet<span class="token punctuation">,</span> <Text suppressHighlighting<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span> textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">null</span><span class="token punctuation">}</span><span class="token operator">></span>consectetur adipiscing elit<span class="token punctuation">,</span> sed <span class="token keyword">do</span> eiusmod tempor incididunt ut labore et dolore magna aliqua<span class="token punctuation">.</span> Ut enim ad minim veniam<span class="token punctuation">,</span> quis nostrud<<span class="token operator">/</span>Text<span class="token operator">></span> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<span class="token punctuation">.</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'allowFontScaling attribute'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
By default<span class="token punctuation">,</span> text will respect Text Size accessibility setting on iOS<span class="token punctuation">.</span>
|
||||
It means that all font sizes will be increased or descreased depending on the value of Text Size setting <span class="token keyword">in</span>
|
||||
<span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span><Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>Settings<span class="token punctuation">.</span>app <span class="token operator">-</span> Display & Brightness <span class="token operator">-</span> Text Size<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
You can disable scaling <span class="token keyword">for</span> your Text component by passing <span class="token punctuation">{</span><span class="token string">"\""</span><span class="token punctuation">}</span>allowFontScaling<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"{"</span><span class="token punctuation">}</span><span class="token boolean">false</span><span class="token punctuation">{</span><span class="token string">"}\""</span><span class="token punctuation">}</span> prop<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text allowFontScaling<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
This text will not scale<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Inline images'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
This text contains an inline image <Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./flux.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span> resizeMode<span class="token punctuation">:</span> <span class="token string">'cover'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">.</span> Neat<span class="token punctuation">,</span> huh<span class="token operator">?</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Text shadow'</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">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> textShadowOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span> textShadowRadius<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> textShadowColor<span class="token punctuation">:</span> <span class="token string">'#00cccc'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Demo text shadow
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
backgroundColorText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
margin<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||||
marginBottom<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'rgba(100, 100, 100, 0.3)'</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><table width="100%"><tbody><tr><td><h4><a class="anchor" name="android"></a>ANDROID <a class="hash-link" href="docs/text.html#android">#</a></h4></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||||
Image<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Entity <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>
|
||||
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">return</span> <span class="token punctuation">(</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#527fe4'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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> AttributeToggler <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>
|
||||
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>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
toggleWeight<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">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight <span class="token operator">===</span> <span class="token string">'bold'</span> <span class="token operator">?</span> <span class="token string">'normal'</span> <span class="token punctuation">:</span> <span class="token string">'bold'</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>
|
||||
increaseSize<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">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize <span class="token operator">+</span> <span class="token number">1</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> curStyle <span class="token operator">=</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight<span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>curStyle<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Tap the controls below to change attributes<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>See how it will even work on <Text style<span class="token operator">=</span><span class="token punctuation">{</span>curStyle<span class="token punctuation">}</span><span class="token operator">></span><span class="token keyword">this</span> nested text<<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
<Text onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>toggleWeight<span class="token punctuation">}</span><span class="token operator">></span>Toggle Weight<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' (with highlight onPress)'</span><span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increaseSize<span class="token punctuation">}</span> suppressHighlighting<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Increase Size <span class="token punctuation">(</span>suppressHighlighting <span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> TextExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<Text>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Base component for rendering styled text.'</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">return</span> <span class="token punctuation">(</span>
|
||||
<UIExplorerPage title<span class="token operator">=</span><span class="token string">"<Text>"</span><span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Wrap"</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
The text should wrap <span class="token keyword">if</span> it goes on multiple lines<span class="token punctuation">.</span>
|
||||
See<span class="token punctuation">,</span> <span class="token keyword">this</span> is going to the next line<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Padding"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
This text is indented by 10px padding on all sides<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Font Family"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Sans<span class="token operator">-</span>Serif
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Sans<span class="token operator">-</span>Serif Bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'serif'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Serif
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'serif'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Serif Bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'monospace'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Monospace
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'monospace'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Monospace Bold <span class="token punctuation">(</span>After <span class="token number">5.0</span><span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Android Material Design fonts"</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'flex-start'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Regular
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Italic
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Bold Italic
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-light'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Light
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-light'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Light Italic
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-thin'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Thin <span class="token punctuation">(</span>After <span class="token number">4.2</span><span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-thin'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Thin Italic <span class="token punctuation">(</span>After <span class="token number">4.2</span><span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-condensed'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Condensed
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-condensed'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Condensed Italic
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-condensed'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Condensed Bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-condensed'</span><span class="token punctuation">,</span>
|
||||
fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Condensed Bold Italic
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-medium'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Medium <span class="token punctuation">(</span>After <span class="token number">5.0</span><span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif-medium'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Roboto Medium Italic <span class="token punctuation">(</span>After <span class="token number">5.0</span><span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Custom Fonts"</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'flex-start'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'notoserif'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
NotoSerif Regular
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'notoserif'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
NotoSerif Bold Italic
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'notoserif'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
NotoSerif Italic <span class="token punctuation">(</span>Missing Font file<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Font Size"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">23</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Size <span class="token number">23</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Size <span class="token number">8</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Color"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Red color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Blue color
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Font Weight"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Font Style"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontStyle<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Font Style and Weight"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Move fast and be bold
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Text Decoration"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Solid underline
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'none'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
None textDecoration
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">,</span> textDecorationStyle<span class="token punctuation">:</span> <span class="token string">'solid'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Solid line<span class="token operator">-</span>through
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline line-through'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Both underline and line<span class="token operator">-</span>through
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
Mixed text <span class="token keyword">with</span> <Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'underline'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>underline<<span class="token operator">/</span>Text<span class="token operator">></span> and <Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textDecorationLine<span class="token punctuation">:</span> <span class="token string">'line-through'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>line<span class="token operator">-</span>through<<span class="token operator">/</span>Text<span class="token operator">></span> text nodes
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Nested"</span><span class="token operator">></span>
|
||||
<Text onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'1st'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>Normal text<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'2nd'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and bold
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#527fe4'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'3rd'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and tiny bold italic blue
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'4th'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and tiny normal blue<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'serif'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'1st'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>Serif
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontStyle<span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'2nd'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>Serif Bold Italic
|
||||
<Text
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'monospace'</span><span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'3rd'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>Monospace Normal
|
||||
<Text
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'4th'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>Sans<span class="token operator">-</span>Serif Bold
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'5th'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">(</span>and Sans<span class="token operator">-</span>Serif Normal<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Entity<span class="token operator">></span>Entity Name<<span class="token operator">/</span>Entity<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Text Align"</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
auto <span class="token punctuation">(</span>default<span class="token punctuation">)</span> <span class="token operator">-</span> english LTR
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
أحب اللغة العربية auto <span class="token punctuation">(</span>default<span class="token punctuation">)</span> <span class="token operator">-</span> arabic RTL
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
left left left left left left left left left left left left left left left
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
center center center center center center center center center center center
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>textAlign<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
right right right right right right right right right right right right right
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Unicode"</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
星际争霸是世界上最好的游戏。
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
星际争霸是世界上最好的游戏。
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
星际争霸是世界上最好的游戏。
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Spaces"</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
A <span class="token punctuation">{</span><span class="token string">'generated'</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token string">'string'</span><span class="token punctuation">}</span> and some &nbsp<span class="token punctuation">;</span>&nbsp<span class="token punctuation">;</span>&nbsp<span class="token punctuation">;</span> spaces
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Line Height"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>lineHeight<span class="token punctuation">:</span> <span class="token number">35</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Holisticly formulate inexpensive ideas before best<span class="token operator">-</span>of<span class="token operator">-</span>breed benefits<span class="token punctuation">.</span> <Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>Continually<<span class="token operator">/</span>Text<span class="token operator">></span> expedite magnetic potentialities rather than client<span class="token operator">-</span>focused interfaces<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Empty Text"</span><span class="token operator">></span>
|
||||
<Text <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toggling Attributes"</span><span class="token operator">></span>
|
||||
<AttributeToggler <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"backgroundColor attribute"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#ffaaaa'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Red background<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#aaaaff'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>blue background<span class="token punctuation">,</span>
|
||||
<Text<span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>inherited blue background<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#aaffaa'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>nested green background<span class="token punctuation">.</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'rgba(100, 100, 100, 0.3)'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Same alpha as background<span class="token punctuation">,</span>
|
||||
<Text<span class="token operator">></span>
|
||||
Inherited alpha from background<span class="token punctuation">,</span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'rgba(100, 100, 100, 0.3)'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Reapply alpha
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"containerBackgroundColor attribute"</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">85</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#ffaaaa'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#aaaaff'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>backgroundColorText<span class="token punctuation">,</span> <span class="token punctuation">{</span>top<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">80</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Default containerBackgroundColor <span class="token punctuation">(</span>inherited<span class="token punctuation">)</span> <span class="token operator">+</span> backgroundColor wash
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>backgroundColorText<span class="token punctuation">,</span> <span class="token punctuation">{</span>top<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">70</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'transparent'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">"containerBackgroundColor: 'transparent' + backgroundColor wash"</span><span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"numberOfLines attribute"</span><span class="token operator">></span>
|
||||
<Text numberOfLines<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Maximum of one line no matter now much I write here<span class="token punctuation">.</span> If I keep writing it<span class="token punctuation">{</span><span class="token string">"'"</span><span class="token punctuation">}</span>ll just truncate after one line
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text numberOfLines<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Maximum of two lines no matter now much I write here<span class="token punctuation">.</span> If I keep writing it<span class="token punctuation">{</span><span class="token string">"'"</span><span class="token punctuation">}</span>ll just truncate after two lines
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
No maximum lines specified no matter now much I write here<span class="token punctuation">.</span> If I keep writing it<span class="token punctuation">{</span><span class="token string">"'"</span><span class="token punctuation">}</span>ll just keep going and going
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Inline images"</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
This text contains an inline image <Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./flux.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">.</span> Neat<span class="token punctuation">,</span> huh<span class="token operator">?</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Text shadow"</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> textShadowOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span> textShadowRadius<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> textShadowColor<span class="token punctuation">:</span> <span class="token string">'#00cccc'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
Demo text shadow
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></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> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
backgroundColorText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
left<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'rgba(100, 100, 100, 0.3)'</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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> TextExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/textinput.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Text%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -17,7 +17,7 @@
|
||||
is used.</p><p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>hour</code> (0-23),
|
||||
<code>minute</code> (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will
|
||||
still be resolved with action being <code>TimePickerAndroid.dismissedAction</code> and all the other keys
|
||||
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timesetaction"></a><span class="propType">static </span>timeSetAction<span class="propType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#timesetaction">#</a></h4><div><p>A time has been selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="dismissedaction"></a><span class="propType">static </span>dismissedAction<span class="propType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/timepickerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TimePickerAndroidExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timesetaction"></a><span class="propType">static </span>timeSetAction<span class="propType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#timesetaction">#</a></h4><div><p>A time has been selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="dismissedaction"></a><span class="propType">static </span>dismissedAction<span class="propType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/timepickerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TimePickerAndroidExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -115,7 +115,7 @@ being undefined. <strong>Always</strong> check whether the <code>action</code> b
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> TimePickerAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/toastandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22TimePickerAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> TimePickerAndroidExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/toastandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22TimePickerAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -31,7 +31,7 @@ along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitl
|
||||
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl <span class="propType">bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
|
||||
In addition to this property you need to add</p><p> android:supportsRtl="true"</p><p>to your application AndroidManifest.xml and then call
|
||||
<code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
|
||||
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -149,7 +149,7 @@ In addition to this property you need to add</p><p> android:supportsRtl="t
|
||||
<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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToolbarAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ToolbarAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToolbarAndroidExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ToolbarAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -94,7 +94,7 @@ modify this component's dimensions nor its children; for example, when
|
||||
translating the position of a static view, rasterization allows the
|
||||
renderer to reuse a cached bitmap of a static view and quickly composite
|
||||
it during each frame.</p><p>Rasterization incurs an off-screen drawing pass and the bitmap consumes
|
||||
memory. Test and measure when using this property.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/view.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
memory. Test and measure when using this property.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/view.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Platform <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'Platform'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -271,7 +271,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<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></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/viewpagerandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22View%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/viewpagerandroid.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22View%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -46,7 +46,7 @@ callback will have following fields:
|
||||
edge-to-edge.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/viewpagerandroid.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
|
||||
The default value is true.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/viewpagerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="setpage"></a>setPage<span class="propType">(selectedPage: number)</span> <a class="hash-link" href="docs/viewpagerandroid.html#setpage">#</a></h4><div><p>A helper function to scroll to a specific page in the ViewPager.
|
||||
The transition between pages will be animated.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setpagewithoutanimation"></a>setPageWithoutAnimation<span class="propType">(selectedPage: number)</span> <a class="hash-link" href="docs/viewpagerandroid.html#setpagewithoutanimation">#</a></h4><div><p>A helper function to scroll to a specific page in the ViewPager.
|
||||
The transition between pages will be <em>not</em> be animated.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/viewpagerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewPagerAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
The transition between pages will be <em>not</em> be animated.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/viewpagerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewPagerAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -296,7 +296,7 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ViewPagerAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/webview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ViewPagerAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ViewPagerAndroidExample<span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/webview.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ViewPagerAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -11,7 +11,7 @@ for <code>UIScrollViewDecelerationRateNormal</code> and
|
||||
<code>UIScrollViewDecelerationRateFast</code> respectively.
|
||||
- normal: 0.998
|
||||
- fast: 0.99 (the default for iOS WebView)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshouldstartloadwithrequest"></a><span class="platform">ios</span>onShouldStartLoadWithRequest <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onshouldstartloadwithrequest">#</a></h4><div><p>Allows custom handling of any webview requests by a JS handler. Return true
|
||||
or false from this method to continue loading the request.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a><span class="platform">ios</span>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scrollenabled">#</a></h4></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/webview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="goforward"></a>goForward<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#goforward">#</a></h4><div><p>Go forward one page in the webview's history.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="goback"></a>goBack<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#goback">#</a></h4><div><p>Go back one page in the webview's history.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="reload"></a>reload<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#reload">#</a></h4><div><p>Reloads the current page.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stoploading"></a>stopLoading<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#stoploading">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getwebviewhandle"></a>getWebViewHandle<span class="propType">(): any</span> <a class="hash-link" href="docs/webview.html#getwebviewhandle">#</a></h4><div><p>Returns the native webview node.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/webview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/WebViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
or false from this method to continue loading the request.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a><span class="platform">ios</span>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scrollenabled">#</a></h4></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/webview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="goforward"></a>goForward<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#goforward">#</a></h4><div><p>Go forward one page in the webview's history.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="goback"></a>goBack<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#goback">#</a></h4><div><p>Go back one page in the webview's history.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="reload"></a>reload<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#reload">#</a></h4><div><p>Reloads the current page.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stoploading"></a>stopLoading<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#stoploading">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getwebviewhandle"></a>getWebViewHandle<span class="propType">(): any</span> <a class="hash-link" href="docs/webview.html#getwebviewhandle">#</a></h4><div><p>Returns the native webview node.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/webview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/WebViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -389,7 +389,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<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="docs/actionsheetios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22WebView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/actionsheetios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22WebView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
Reference in New Issue
Block a user