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
@@ -38,7 +38,7 @@
|
||||
|
||||
<CustomRadioButton
|
||||
accessibleComponentType<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>radioButton<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>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></div><p>In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="docs/accessibility.html#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/timers.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></div><p>In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="docs/accessibility.html#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/animations.html#content">← Prev</a><a class="docs-next" href="docs/timers.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -212,7 +212,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alert.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/webview.html#content">← Prev</a><a class="docs-next" href="docs/alert.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alertios.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/actionsheetios.html#content">← Prev</a><a class="docs-next" href="docs/alertios.html#content">Next →</a></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)
|
||||
|
||||
@@ -203,7 +203,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/animated.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/alert.html#content">← Prev</a><a class="docs-next" href="docs/animated.html#content">Next →</a></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)
|
||||
|
||||
@@ -28,7 +28,7 @@ dependencies <span class="token punctuation">{</span>
|
||||
rootProject<span class="token punctuation">.</span>allprojects <span class="token punctuation">{</span>
|
||||
buildDir <span class="token operator">=</span> <span class="token string">"/path/to/build/directory/${rootProject.name}/${project.name}"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="testing"></a>Testing <a class="hash-link" href="docs/android-building-from-source.html#testing">#</a></h2><p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/testing.html" target="">Testing</a>.</p><h2><a class="anchor" name="troubleshooting"></a>Troubleshooting <a class="hash-link" href="docs/android-building-from-source.html#troubleshooting">#</a></h2><p>Gradle build fails in <code>ndk-build</code>. See the section about <code>local.properties</code> file above.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/activityindicator.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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></div><h2><a class="anchor" name="testing"></a>Testing <a class="hash-link" href="docs/android-building-from-source.html#testing">#</a></h2><p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/testing.html" target="">Testing</a>.</p><h2><a class="anchor" name="troubleshooting"></a>Troubleshooting <a class="hash-link" href="docs/android-building-from-source.html#troubleshooting">#</a></h2><p>Gradle build fails in <code>ndk-build</code>. See the section about <code>local.properties</code> file above.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/android-ui-performance.html#content">← Prev</a><a class="docs-next" href="docs/activityindicator.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/appregistry.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/alertios.html#content">← Prev</a><a class="docs-next" href="docs/appregistry.html#content">Next →</a></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)
|
||||
|
||||
@@ -375,7 +375,7 @@ make them customizable, React Native exposes a
|
||||
pop<span class="token punctuation">:</span> CustomLeftToRightGesture<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><a href="https://rnplay.org/apps/HPy6UA" target="_blank">Run this example</a></p><p>For further information about customizing scene transitions, <a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js" target="_blank">read the
|
||||
source</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/accessibility.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
source</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/handling-touches.html#content">← Prev</a><a class="docs-next" href="docs/accessibility.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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 @@ for the app and then actually run the app when it's ready by invoking
|
||||
<code>AppRegistry.unmountApplicationComponentAtRootTag</code> with the tag that was
|
||||
pass into <code>runApplication</code>. These should always be used as a pair.</p><p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make
|
||||
sure the JS execution environment is setup before other modules are
|
||||
<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/appregistry.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registerconfig"></a><span class="methodType">static </span>registerConfig<span class="methodType">(config)</span> <a class="hash-link" href="docs/appregistry.html#registerconfig">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registercomponent"></a><span class="methodType">static </span>registerComponent<span class="methodType">(appKey, getComponentFunc)</span> <a class="hash-link" href="docs/appregistry.html#registercomponent">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registerrunnable"></a><span class="methodType">static </span>registerRunnable<span class="methodType">(appKey, func)</span> <a class="hash-link" href="docs/appregistry.html#registerrunnable">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getappkeys"></a><span class="methodType">static </span>getAppKeys<span class="methodType">(0)</span> <a class="hash-link" href="docs/appregistry.html#getappkeys">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="runapplication"></a><span class="methodType">static </span>runApplication<span class="methodType">(appKey, appParameters)</span> <a class="hash-link" href="docs/appregistry.html#runapplication">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="unmountapplicationcomponentatroottag"></a><span class="methodType">static </span>unmountApplicationComponentAtRootTag<span class="methodType">(rootTag)</span> <a class="hash-link" href="docs/appregistry.html#unmountapplicationcomponentatroottag">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/appstate.html#content">Next →</a></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>
|
||||
<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/appregistry.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registerconfig"></a><span class="methodType">static </span>registerConfig<span class="methodType">(config)</span> <a class="hash-link" href="docs/appregistry.html#registerconfig">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registercomponent"></a><span class="methodType">static </span>registerComponent<span class="methodType">(appKey, getComponentFunc)</span> <a class="hash-link" href="docs/appregistry.html#registercomponent">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registerrunnable"></a><span class="methodType">static </span>registerRunnable<span class="methodType">(appKey, func)</span> <a class="hash-link" href="docs/appregistry.html#registerrunnable">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getappkeys"></a><span class="methodType">static </span>getAppKeys<span class="methodType">(0)</span> <a class="hash-link" href="docs/appregistry.html#getappkeys">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="runapplication"></a><span class="methodType">static </span>runApplication<span class="methodType">(appKey, appParameters)</span> <a class="hash-link" href="docs/appregistry.html#runapplication">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="unmountapplicationcomponentatroottag"></a><span class="methodType">static </span>unmountApplicationComponentAtRootTag<span class="methodType">(rootTag)</span> <a class="hash-link" href="docs/appregistry.html#unmountapplicationcomponentatroottag">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/animated.html#content">← Prev</a><a class="docs-next" href="docs/appstate.html#content">Next →</a></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)
|
||||
|
||||
@@ -114,7 +114,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
description<span class="token punctuation">:</span> <span class="token string">'In the IOS 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<any<span class="token operator">></span> <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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/asyncstorage.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/appregistry.html#content">← Prev</a><a class="docs-next" href="docs/asyncstorage.html#content">Next →</a></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)
|
||||
|
||||
@@ -219,7 +219,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<any<span class="token operator">></span> <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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/backandroid.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/appstate.html#content">← Prev</a><a class="docs-next" href="docs/backandroid.html#content">Next →</a></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)
|
||||
|
||||
@@ -5,7 +5,7 @@ functionality to exit the app if there are no listeners or if none of the listen
|
||||
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">return</span> <span class="token boolean">false</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/backandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="exitapp"></a><span class="methodType">static </span>exitApp<span class="methodType">(0)</span> <a class="hash-link" href="docs/backandroid.html#exitapp">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a><span class="methodType">static </span>addEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backandroid.html#addeventlistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a><span class="methodType">static </span>removeEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backandroid.html#removeeventlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/cameraroll.html#content">Next →</a></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><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/backandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="exitapp"></a><span class="methodType">static </span>exitApp<span class="methodType">(0)</span> <a class="hash-link" href="docs/backandroid.html#exitapp">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a><span class="methodType">static </span>addEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backandroid.html#addeventlistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a><span class="methodType">static </span>removeEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backandroid.html#removeeventlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/asyncstorage.html#content">← Prev</a><a class="docs-next" href="docs/cameraroll.html#content">Next →</a></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)
|
||||
|
||||
@@ -128,7 +128,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Photos'</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<any<span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <CameraRollExample <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 class="embedded-simulator"><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%22CameraRoll%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/clipboard.html#content">Next →</a></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 class="embedded-simulator"><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%22CameraRoll%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/backandroid.html#content">← Prev</a><a class="docs-next" href="docs/clipboard.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/datepickerandroid.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/cameraroll.html#content">← Prev</a><a class="docs-next" href="docs/datepickerandroid.html#content">Next →</a></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
@@ -74,7 +74,7 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F
|
||||
newFrame<span class="token punctuation">.</span>size <span class="token operator">=</span> rootView<span class="token punctuation">.</span>intrinsicSize<span class="token punctuation">;</span>
|
||||
|
||||
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> newFrame<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the example <a href="https://phabricator.fb.com/diffusion/FBOBJC/browse/master/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the example <a href="https://phabricator.fb.com/diffusion/FBOBJC/browse/master/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-prev" href="docs/running-on-simulator-ios.html#content">← Prev</a><a class="docs-next" href="docs/native-modules-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/dimensions.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/clipboard.html#content">← Prev</a><a class="docs-next" href="docs/dimensions.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/drawerlayoutandroid.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/activityindicator.html#content">← Prev</a><a class="docs-next" href="docs/drawerlayoutandroid.html#content">Next →</a></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
@@ -5,7 +5,7 @@ due to device rotation) so any rendering logic or styles that depend on
|
||||
these constants should try to call this function on every render, rather
|
||||
than caching the value (for example, using inline styles rather than
|
||||
setting a value in a <code>StyleSheet</code>).</p><p>Example: <code>var {height, width} = Dimensions.get('window');</code></p><p>@param {string} dim Name of dimension as defined when calling <code>set</code>.
|
||||
@returns {Object?} Value for the dimension.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/geolocation.html#content">Next →</a></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>
|
||||
@returns {Object?} Value for the dimension.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/datepickerandroid.html#content">← Prev</a><a class="docs-next" href="docs/geolocation.html#content">Next →</a></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)
|
||||
|
||||
@@ -136,7 +136,7 @@ the jerky animation each 250ms when <code>setState</code> triggers a re-render.<
|
||||
<code>shouldComponentUpdate</code></a>
|
||||
you can avoid the unnecessary overhead involved in reconciling unchanged
|
||||
component subtrees, to the point where it may be performant enough to
|
||||
use <code>setState</code> instead of <code>setNativeProps</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/debugging.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
use <code>setState</code> instead of <code>setNativeProps</code>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/timers.html#content">← Prev</a><a class="docs-next" href="docs/debugging.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -47,7 +47,7 @@ from the edge of the window.</p></div></div><div class="prop"><h4 class="propTit
|
||||
- settling, meaning that there was an interaction with the navigation view, and the
|
||||
navigation view is now finishing its closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView <span class="propType">ReactPropTypes.func.isRequired</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarbackgroundcolor"></a>statusBarBackgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/drawerlayoutandroid.html#statusbarbackgroundcolor">#</a></h4><div><p>Make the drawer take the entire screen and draw the background of the
|
||||
status bar to allow it to open over the status bar. It will only have an
|
||||
effect on API 21+.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/drawerlayoutandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="opendrawer"></a>openDrawer<span class="methodType">(0)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#opendrawer">#</a></h4><div><p>Opens the drawer.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="closedrawer"></a>closeDrawer<span class="methodType">(0)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#closedrawer">#</a></h4><div><p>Closes the drawer.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/image.html#content">Next →</a></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>
|
||||
effect on API 21+.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/drawerlayoutandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="opendrawer"></a>openDrawer<span class="methodType">(0)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#opendrawer">#</a></h4><div><p>Opens the drawer.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="closedrawer"></a>closeDrawer<span class="methodType">(0)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#closedrawer">#</a></h4><div><p>Closes the drawer.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/datepickerios.html#content">← Prev</a><a class="docs-next" href="docs/image.html#content">Next →</a></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 @@ class <span class="token class-name">AlignItemsBasics</span> extends <span class
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</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> AlignItemsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20AlignItemsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60alignItems%60%20to%20'flex-start'%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60justifyContent%60%20to%20%60flex-end%60.%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60flexDirection%60%20to%20%60row%60.%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AlignItemsBasics)%3B" frameborder="0"></iframe></div><h4><a class="anchor" name="going-deeper"></a>Going Deeper <a class="hash-link" href="docs/flexbox.html#going-deeper">#</a></h4><p>We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented <a href="./docs/layout-props.html" target="_blank">here</a>.</p><p>We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to <a href="/react-native/docs/handling-text-input.html" target="">learn how to handle text input with the TextInput component</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/handling-text-input.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</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> AlignItemsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20AlignItemsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60alignItems%60%20to%20'flex-start'%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60justifyContent%60%20to%20%60flex-end%60.%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60flexDirection%60%20to%20%60row%60.%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AlignItemsBasics)%3B" frameborder="0"></iframe></div><h4><a class="anchor" name="going-deeper"></a>Going Deeper <a class="hash-link" href="docs/flexbox.html#going-deeper">#</a></h4><p>We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented <a href="./docs/layout-props.html" target="_blank">here</a>.</p><p>We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to <a href="/react-native/docs/handling-text-input.html" target="">learn how to handle text input with the TextInput component</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/height-and-width.html#content">← Prev</a><a class="docs-next" href="docs/handling-text-input.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/intentandroid.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/dimensions.html#content">← Prev</a><a class="docs-next" href="docs/intentandroid.html#content">Next →</a></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
@@ -25,7 +25,7 @@ class <span class="token class-name">PizzaTranslator</span> extends <span class=
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'PizzaTranslator'</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> PizzaTranslator<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20PizzaTranslator%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7Btext%3A%20''%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.text.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('PizzaTranslator'%2C%20()%20%3D%3E%20PizzaTranslator)%3B" frameborder="0"></iframe></div><p>In this example, we store <code>text</code> in the state, because it changes over time.</p><p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://facebook.github.io/react/docs/forms.html" target="_blank">React docs on controlled components</a>, or the <a href="/react-native/docs/textinput.html" target="">reference docs for TextInput</a>.</p><p>Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this is one that controls layout, and <a href="/react-native/docs/using-a-scrollview.html" target="">learn about the ScrollView</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/using-a-scrollview.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'PizzaTranslator'</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> PizzaTranslator<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20PizzaTranslator%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7Btext%3A%20''%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.text.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('PizzaTranslator'%2C%20()%20%3D%3E%20PizzaTranslator)%3B" frameborder="0"></iframe></div><p>In this example, we store <code>text</code> in the state, because it changes over time.</p><p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://facebook.github.io/react/docs/forms.html" target="_blank">React docs on controlled components</a>, or the <a href="/react-native/docs/textinput.html" target="">reference docs for TextInput</a>.</p><p>Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this is one that controls layout, and <a href="/react-native/docs/using-a-scrollview.html" target="">learn about the ScrollView</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/flexbox.html#content">← Prev</a><a class="docs-next" href="docs/using-a-scrollview.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<<span class="token operator">/</span>TouchableHighlight<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><p>Tappable components should provide feedback that show the user what is handling their touch, and what will happen when they lift their finger. The user should also be able to cancel a tap by dragging their finger away.</p><p>Which component you use will depend on what kind of feedback you want to provide:</p><ul><li><p>Generally, you can use <a href="/react-native/docs/touchablehighlight.html" target=""><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.</p></li><li><p>You may consider using <a href="/react-native/docs/touchablenativefeedback.html" target=""><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user's touch.</p></li><li><p><a href="/react-native/docs/touchableopacity.html" target=""><strong>TouchableOpacity</strong></a> can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.</p></li><li><p>If you need to handle a tap gesture but you don't want any feedback to be displayed, use <a href="/react-native/docs/touchablewithoutfeedback.html" target=""><strong>TouchableWithoutFeedback</strong></a>.</p></li></ul><h3><a class="anchor" name="long-presses"></a>Long presses <a class="hash-link" href="docs/handling-touches.html#long-presses">#</a></h3><p>In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the <code>onLongPress</code> props of any of the touchable components listed above.</p><h2><a class="anchor" name="scrolling-lists-and-swiping-views"></a>Scrolling lists and swiping views <a class="hash-link" href="docs/handling-touches.html#scrolling-lists-and-swiping-views">#</a></h2><p>A common pattern to many mobile apps is the scrollable list of items. Users interact with these using panning or swiping gestures. The <a href="/react-native/docs/basics-component-scrollview.html" target="">ScrollView</a> component displays a list of items that can be scrolled using these gestures.</p><p>ScrollViews can scroll vertically or horizontally, and can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/viewpagerandroid.html" target="">ViewPagerAndroid</a> component.</p><p>A <a href="/react-native/docs/basics-component-listview.html" target="">ListView</a> is a special kind of ScrollView that is best suited for displaying long vertical lists of items. It can also display section headers and footers, similar to <code>UITableView</code>s on iOS.</p><h3><a class="anchor" name="pinch-to-zoom"></a>Pinch-to-zoom <a class="hash-link" href="docs/handling-touches.html#pinch-to-zoom">#</a></h3><p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p><h2><a class="anchor" name="handling-additional-gestures"></a>Handling additional gestures <a class="hash-link" href="docs/handling-touches.html#handling-additional-gestures">#</a></h2><p>If you want to allow a user to drag a view around the screen, or you want to implement your own custom pan/drag gesture, take a look at the <a href="/react-native/docs/panresponder.html" target="">PanResponder</a> API or the <a href="/react-native/docs/gesturerespondersystem.html" target="">gesture responder system docs</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/animations.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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></div><p>Tappable components should provide feedback that show the user what is handling their touch, and what will happen when they lift their finger. The user should also be able to cancel a tap by dragging their finger away.</p><p>Which component you use will depend on what kind of feedback you want to provide:</p><ul><li><p>Generally, you can use <a href="/react-native/docs/touchablehighlight.html" target=""><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.</p></li><li><p>You may consider using <a href="/react-native/docs/touchablenativefeedback.html" target=""><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user's touch.</p></li><li><p><a href="/react-native/docs/touchableopacity.html" target=""><strong>TouchableOpacity</strong></a> can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.</p></li><li><p>If you need to handle a tap gesture but you don't want any feedback to be displayed, use <a href="/react-native/docs/touchablewithoutfeedback.html" target=""><strong>TouchableWithoutFeedback</strong></a>.</p></li></ul><h3><a class="anchor" name="long-presses"></a>Long presses <a class="hash-link" href="docs/handling-touches.html#long-presses">#</a></h3><p>In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the <code>onLongPress</code> props of any of the touchable components listed above.</p><h2><a class="anchor" name="scrolling-lists-and-swiping-views"></a>Scrolling lists and swiping views <a class="hash-link" href="docs/handling-touches.html#scrolling-lists-and-swiping-views">#</a></h2><p>A common pattern to many mobile apps is the scrollable list of items. Users interact with these using panning or swiping gestures. The <a href="/react-native/docs/basics-component-scrollview.html" target="">ScrollView</a> component displays a list of items that can be scrolled using these gestures.</p><p>ScrollViews can scroll vertically or horizontally, and can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/viewpagerandroid.html" target="">ViewPagerAndroid</a> component.</p><p>A <a href="/react-native/docs/basics-component-listview.html" target="">ListView</a> is a special kind of ScrollView that is best suited for displaying long vertical lists of items. It can also display section headers and footers, similar to <code>UITableView</code>s on iOS.</p><h3><a class="anchor" name="pinch-to-zoom"></a>Pinch-to-zoom <a class="hash-link" href="docs/handling-touches.html#pinch-to-zoom">#</a></h3><p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p><h2><a class="anchor" name="handling-additional-gestures"></a>Handling additional gestures <a class="hash-link" href="docs/handling-touches.html#handling-additional-gestures">#</a></h2><p>If you want to allow a user to drag a view around the screen, or you want to implement your own custom pan/drag gesture, take a look at the <a href="/react-native/docs/panresponder.html" target="">PanResponder</a> API or the <a href="/react-native/docs/gesturerespondersystem.html" target="">gesture responder system docs</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/images.html#content">← Prev</a><a class="docs-next" href="docs/animations.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -31,7 +31,7 @@ class <span class="token class-name">FlexDimensionsBasics</span> extends <span c
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</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> FlexDimensionsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20FlexDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B" frameborder="0"></iframe></div><p>After you can control a component's size, the next step is to <a href="/react-native/docs/flexbox.html" target="">learn how to lay it out on the screen</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/flexbox.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</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> FlexDimensionsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20FlexDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B" frameborder="0"></iframe></div><p>After you can control a component's size, the next step is to <a href="/react-native/docs/flexbox.html" target="">learn how to lay it out on the screen</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/style.html#content">← Prev</a><a class="docs-next" href="docs/flexbox.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -723,7 +723,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>
|
||||
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 punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/listview.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/drawerlayoutandroid.html#content">← Prev</a><a class="docs-next" href="docs/listview.html#content">Next →</a></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)
|
||||
|
||||
@@ -21,7 +21,7 @@ using local resources that are outside of <code>Images.xcassets</code>.</p><h3><
|
||||
<Image source<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 operator">></span>
|
||||
<Text<span class="token operator">></span>Inside<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>Image<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="off-thread-decoding"></a>Off-thread Decoding <a class="hash-link" href="docs/images.html#off-thread-decoding">#</a></h2><p>Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/handling-touches.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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><h2><a class="anchor" name="off-thread-decoding"></a>Off-thread Decoding <a class="hash-link" href="docs/images.html#off-thread-decoding">#</a></h2><p>Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/colors.html#content">← Prev</a><a class="docs-next" href="docs/handling-touches.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -419,7 +419,7 @@ if (!foundHash) {
|
||||
display('platform', isMac ? 'objc' : 'android');
|
||||
}
|
||||
</script>
|
||||
</span></div><div class="docs-prevnext"><a class="docs-next" href="docs/colors.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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></div><div class="docs-prevnext"><a class="docs-prev" href="docs/more-resources.html#content">← Prev</a><a class="docs-next" href="docs/colors.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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 @@ or the "choose application" dialog will be shown.</p><p>You can use ot
|
||||
or any other URL that can be opened with {@code Intent.ACTION_VIEW}.</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><p>@deprecated</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="canopenurl"></a><span class="methodType">static </span>canOpenURL<span class="methodType">(url, callback)</span> <a class="hash-link" href="docs/intentandroid.html#canopenurl">#</a></h4><div><p>Determine whether or not an installed app can handle a given URL.</p><p>You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact,
|
||||
or any other URL that can be opened with {@code Intent.ACTION_VIEW}.</p><p>NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!</p><p>@param URL the URL to open</p><p>@deprecated</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getinitialurl"></a><span class="methodType">static </span>getInitialURL<span class="methodType">(callback)</span> <a class="hash-link" href="docs/intentandroid.html#getinitialurl">#</a></h4><div><p>If the app launch was triggered by an app link with {@code Intent.ACTION_VIEW},
|
||||
it will give the link url, otherwise it will give <code>null</code></p><p>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><p>@deprecated</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/interactionmanager.html#content">Next →</a></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>
|
||||
it will give the link url, otherwise it will give <code>null</code></p><p>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><p>@deprecated</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/geolocation.html#content">← Prev</a><a class="docs-next" href="docs/interactionmanager.html#content">Next →</a></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)
|
||||
|
||||
@@ -23,7 +23,7 @@ allowing events such as touches to start interactions and block queued tasks
|
||||
from executing, making apps more responsive.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/interactionmanager.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="runafterinteractions"></a><span class="methodType">static </span>runAfterInteractions<span class="methodType">(task)</span> <a class="hash-link" href="docs/interactionmanager.html#runafterinteractions">#</a></h4><div><p>Schedule a function to run after all interactions have completed. Returns a cancellable
|
||||
"promise".</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="createinteractionhandle"></a><span class="methodType">static </span>createInteractionHandle<span class="methodType">(0)</span> <a class="hash-link" href="docs/interactionmanager.html#createinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has started.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clearinteractionhandle"></a><span class="methodType">static </span>clearInteractionHandle<span class="methodType">(handle)</span> <a class="hash-link" href="docs/interactionmanager.html#clearinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has completed.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setdeadline"></a><span class="methodType">static </span>setDeadline<span class="methodType">(deadline)</span> <a class="hash-link" href="docs/interactionmanager.html#setdeadline">#</a></h4><div><p>A positive number will use setTimeout to schedule any tasks after the
|
||||
eventLoopRunningTime hits the deadline value, otherwise all tasks will be
|
||||
executed in one setImmediate batch (default).</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/interactionmanager.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="events"></a>Events<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/interactionmanager.html#events">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addlistener"></a>addListener<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/interactionmanager.html#addlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/layoutanimation.html#content">Next →</a></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>
|
||||
executed in one setImmediate batch (default).</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/interactionmanager.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="events"></a>Events<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/interactionmanager.html#events">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addlistener"></a>addListener<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/interactionmanager.html#addlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/intentandroid.html#content">← Prev</a><a class="docs-next" href="docs/layoutanimation.html#content">Next →</a></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
@@ -134,7 +134,7 @@ for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a clas
|
||||
<code>zIndex</code> will render on top. Think of the z-direction like it's
|
||||
pointing from the phone into your eyeball. See
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">https://developer.mozilla.org/en-US/docs/Web/CSS/z-index</a> for
|
||||
more detail.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/shadow-props.html#content">Next →</a></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>
|
||||
more detail.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/vibration.html#content">← Prev</a><a class="docs-next" href="docs/shadow-props.html#content">Next →</a></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)
|
||||
|
||||
@@ -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<any<span class="token operator">></span> <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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/linking.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/interactionmanager.html#content">← Prev</a><a class="docs-next" href="docs/linking.html#content">Next →</a></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)
|
||||
|
||||
@@ -19,7 +19,7 @@ received.</p><p>For that we need to know the library's headers. To achieve
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search
|
||||
Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p><p><img src="img/AddToSearchPaths.png" alt=""></p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
example).</p><p><img src="img/AddToSearchPaths.png" alt=""></p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/native-components-ios.html#content">← Prev</a><a class="docs-next" href="docs/running-on-device-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -130,7 +130,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/nativemethodsmixin.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/layoutanimation.html#content">← Prev</a><a class="docs-next" href="docs/nativemethodsmixin.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/mapview.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/image.html#content">← Prev</a><a class="docs-next" href="docs/mapview.html#content">Next →</a></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)
|
||||
|
||||
@@ -38,7 +38,7 @@ about sections you should safely be able to use <code>cloneWithRows</code>.</p><
|
||||
ie. ['s1', 's2', ...]. If not provided, it's assumed that the
|
||||
keys of dataBlob are the section identities.</p><p>Note: this returns a new object!</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowcount"></a>getRowCount<span class="methodType">(0)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowcount">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowandsectioncount"></a>getRowAndSectionCount<span class="methodType">(0)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowandsectioncount">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="rowshouldupdate"></a>rowShouldUpdate<span class="methodType">(sectionIndex, rowIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#rowshouldupdate">#</a></h4><div><p>Returns if the row is dirtied and needs to be rerendered</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowdata"></a>getRowData<span class="methodType">(sectionIndex, rowIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowdata">#</a></h4><div><p>Gets the data required to render the row.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowidforflatindex"></a>getRowIDForFlatIndex<span class="methodType">(index)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowidforflatindex">#</a></h4><div><p>Gets the rowID at index provided if the dataSource arrays were flattened,
|
||||
or null of out of range indexes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionidforflatindex"></a>getSectionIDForFlatIndex<span class="methodType">(index)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionidforflatindex">#</a></h4><div><p>Gets the sectionID at index provided if the dataSource arrays were flattened,
|
||||
or null for out of range indexes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionlengths"></a>getSectionLengths<span class="methodType">(0)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionlengths">#</a></h4><div><p>Returns an array containing the number of rows in each section</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sectionheadershouldupdate"></a>sectionHeaderShouldUpdate<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#sectionheadershouldupdate">#</a></h4><div><p>Returns if the section header is dirtied and needs to be rerendered</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionheaderdata"></a>getSectionHeaderData<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionheaderdata">#</a></h4><div><p>Gets the data required to render the section header</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/nativemethodsmixin.html#content">Next →</a></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>
|
||||
or null for out of range indexes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionlengths"></a>getSectionLengths<span class="methodType">(0)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionlengths">#</a></h4><div><p>Returns an array containing the number of rows in each section</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sectionheadershouldupdate"></a>sectionHeaderShouldUpdate<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#sectionheadershouldupdate">#</a></h4><div><p>Returns if the section header is dirtied and needs to be rerendered</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionheaderdata"></a>getSectionHeaderData<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionheaderdata">#</a></h4><div><p>Gets the data required to render the section header</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/linking.html#content">← Prev</a><a class="docs-next" href="docs/nativemethodsmixin.html#content">Next →</a></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)
|
||||
|
||||
@@ -479,7 +479,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/modal.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/listview.html#content">← Prev</a><a class="docs-next" href="docs/modal.html#content">Next →</a></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)
|
||||
|
||||
@@ -216,7 +216,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/navigator.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/mapview.html#content">← Prev</a><a class="docs-next" href="docs/navigator.html#content">Next →</a></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
@@ -82,7 +82,7 @@ MyCustomView<span class="token punctuation">.</span>propTypes <span class="token
|
||||
|
||||
<span class="token keyword">var</span> RCTMyCustomView <span class="token operator">=</span> <span class="token function">requireNativeComponent<span class="token punctuation">(</span></span>`RCTMyCustomView`<span class="token punctuation">,</span> MyCustomView<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>onChange<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Note the use of <code>nativeOnly</code> above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above). Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to call them out via the <code>nativeOnly</code> option.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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><p>Note the use of <code>nativeOnly</code> above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above). Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to call them out via the <code>nativeOnly</code> option.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/native-modules-android.html#content">← Prev</a><a class="docs-next" href="docs/running-on-device-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -247,7 +247,7 @@ import <span class="token punctuation">{</span> UIManager <span class="token pun
|
||||
@<span class="token string">"datetime"</span><span class="token punctuation">:</span> @<span class="token punctuation">(</span>UIDatePickerModeDateAndTime<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><p>This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the actual <code>RCTMapManager</code> and other components in the <a href="https://github.com/facebook/react-native/blob/master/React/Views" target="_blank">source code</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/linking-libraries-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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></div><p>This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the actual <code>RCTMapManager</code> and other components in the <a href="https://github.com/facebook/react-native/blob/master/React/Views" target="_blank">source code</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/native-modules-ios.html#content">← Prev</a><a class="docs-next" href="docs/linking-libraries-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -263,7 +263,7 @@ public void <span class="token function">onHostPause<span class="token punctuati
|
||||
@Override
|
||||
public void <span class="token function">onHostDestroy<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Activity `onDestroy`
|
||||
</span><span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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><span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/communication-ios.html#content">← Prev</a><a class="docs-next" href="docs/native-components-android.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -136,7 +136,7 @@ class <span class="token class-name">CalendarManager</span><span class="token pu
|
||||
<span class="token function">RCT_EXTERN_METHOD<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name location<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>location date<span class="token punctuation">:</span><span class="token punctuation">(</span>nonnull NSNumber <span class="token operator">*</span><span class="token punctuation">)</span>date<span class="token punctuation">)</span>
|
||||
|
||||
@end</div><p>For those of you new to Swift and Objective-C, whenever you <a href="https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html" target="_blank">mix the two languages in an iOS project</a>, you will also need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode <code>File>New File</code> menu option. You will need to import <code>RCTBridgeModule.h</code> in this header file.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// CalendarManager-Bridging-Header.h
|
||||
</span>#import <span class="token string">"RCTBridgeModule.h"</span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>#import <span class="token string">"RCTBridgeModule.h"</span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/gesture-responder-system.html#content">← Prev</a><a class="docs-next" href="docs/native-components-ios.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -19,7 +19,7 @@ has been completed in native.</p></div></div><div class="prop"><h4 class="method
|
||||
specified as <code>relativeToNativeNode</code>. This means that the returned x, y
|
||||
are relative to the origin x, y of the ancestor view.</p><p>As always, to obtain a native node handle for a component, you can use
|
||||
<code>React.findNodeHandle(component)</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="focus"></a><span class="methodType">static </span>focus<span class="methodType">(0)</span> <a class="hash-link" href="docs/nativemethodsmixin.html#focus">#</a></h4><div><p>Requests focus for the given input or view. The exact behavior triggered
|
||||
will depend on the platform and type of view.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="blur"></a><span class="methodType">static </span>blur<span class="methodType">(0)</span> <a class="hash-link" href="docs/nativemethodsmixin.html#blur">#</a></h4><div><p>Removes focus from an input or view. This is the opposite of <code>focus()</code>.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/netinfo.html#content">Next →</a></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>
|
||||
will depend on the platform and type of view.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="blur"></a><span class="methodType">static </span>blur<span class="methodType">(0)</span> <a class="hash-link" href="docs/nativemethodsmixin.html#blur">#</a></h4><div><p>Removes focus from an input or view. This is the opposite of <code>focus()</code>.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/linking.html#content">← Prev</a><a class="docs-next" href="docs/netinfo.html#content">Next →</a></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)
|
||||
|
||||
@@ -216,7 +216,7 @@ const styles <span class="token operator">=</span> StyleSheet<span class="token
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">17</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><h3><a class="anchor" name="homework"></a>Homework <a class="hash-link" href="docs/navigation.html#homework">#</a></h3><p>You are now an expert navigator. Take a look at <a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/NavigationExperimental" target="_blank">NavigationExperimental in UIExplorer</a> to learn how to implement other types of navigation hierarchies, such as a tabbed application with multiple navigation stacks.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/performance.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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><h3><a class="anchor" name="homework"></a>Homework <a class="hash-link" href="docs/navigation.html#homework">#</a></h3><p>You are now an expert navigator. Take a look at <a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/NavigationExperimental" target="_blank">NavigationExperimental in UIExplorer</a> to learn how to implement other types of navigation hierarchies, such as a tabbed application with multiple navigation stacks.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/javascript-environment.html#content">← Prev</a><a class="docs-next" href="docs/performance.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -128,7 +128,7 @@ re-renders the navigation bar and the stack items.</p></div></td></tr></tbody></
|
||||
be in the currently mounted set of routes defined in <code>routeStack</code>.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="jumpforward"></a>jumpForward<span class="methodType">(0)</span> <a class="hash-link" href="docs/navigator.html#jumpforward">#</a></h4><div><p>Jump forward to the next scene in the route stack.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="jumpback"></a>jumpBack<span class="methodType">(0)</span> <a class="hash-link" href="docs/navigator.html#jumpback">#</a></h4><div><p>Jump backward without unmounting the current scene.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="push"></a>push<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#push">#</a></h4><div><p>Navigate forward to a new scene, squashing any scenes that you could
|
||||
jump forward to.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to push into the navigator stack.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="pop"></a>pop<span class="methodType">(0)</span> <a class="hash-link" href="docs/navigator.html#pop">#</a></h4><div><p>Transition back and unmount the current scene.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replaceatindex"></a>replaceAtIndex<span class="methodType">(route, index, cb)</span> <a class="hash-link" href="docs/navigator.html#replaceatindex">#</a></h4><div><p>Replace a scene as specified by an index.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route representing the new scene to render.</p></div></td></tr><tr><td>index<br><br><div><span>number</span></div></td><td class="description"><div><p>The route in the stack that should be replaced.
|
||||
If negative, it counts from the back of the stack.</p></div></td></tr><tr><td>cb<br><br><div><span>Function</span></div></td><td class="description"><div><p>Callback function when the scene has been replaced.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replace"></a>replace<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#replace">#</a></h4><div><p>Replace the current scene with a new route.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route that replaces the current scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replaceprevious"></a>replacePrevious<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#replaceprevious">#</a></h4><div><p>Replace the previous scene.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route that replaces the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poptotop"></a>popToTop<span class="methodType">(0)</span> <a class="hash-link" href="docs/navigator.html#poptotop">#</a></h4><div><p>Pop to the first scene in the stack, unmounting every other scene.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poptoroute"></a>popToRoute<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#poptoroute">#</a></h4><div><p>Pop to a particular scene, as specified by its route.
|
||||
All scenes after it will be unmounted.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to pop to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replacepreviousandpop"></a>replacePreviousAndPop<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#replacepreviousandpop">#</a></h4><div><p>Replace the previous scene and pop to it.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route that replaces the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetto"></a>resetTo<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#resetto">#</a></h4><div><p>Navigate to a new scene and reset route stack.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getcurrentroutes"></a>getCurrentRoutes<span class="methodType">(0)</span> <a class="hash-link" href="docs/navigator.html#getcurrentroutes">#</a></h4><div><p>Returns the current list of routes.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/navigatorios.html#content">Next →</a></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>
|
||||
All scenes after it will be unmounted.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to pop to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replacepreviousandpop"></a>replacePreviousAndPop<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#replacepreviousandpop">#</a></h4><div><p>Replace the previous scene and pop to it.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route that replaces the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetto"></a>resetTo<span class="methodType">(route)</span> <a class="hash-link" href="docs/navigator.html#resetto">#</a></h4><div><p>Navigate to a new scene and reset route stack.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>Route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getcurrentroutes"></a>getCurrentRoutes<span class="methodType">(0)</span> <a class="hash-link" href="docs/navigator.html#getcurrentroutes">#</a></h4><div><p>Returns the current list of routes.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/modal.html#content">← Prev</a><a class="docs-next" href="docs/navigatorios.html#content">Next →</a></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)
|
||||
|
||||
@@ -402,7 +402,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pickerios.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/navigator.html#content">← Prev</a><a class="docs-next" href="docs/pickerios.html#content">Next →</a></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)
|
||||
|
||||
@@ -207,7 +207,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<any<span class="token operator">></span> <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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/panresponder.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/nativemethodsmixin.html#content">← Prev</a><a class="docs-next" href="docs/panresponder.html#content">Next →</a></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)
|
||||
|
||||
@@ -60,7 +60,7 @@ ws<span class="token punctuation">.</span>onerror <span class="token operator">=
|
||||
ws<span class="token punctuation">.</span>onclose <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // connection closed
|
||||
</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>e<span class="token punctuation">.</span>code<span class="token punctuation">,</span> e<span class="token punctuation">.</span>reason<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span></div><p>Your app can now display all sorts of data and you may soon need to organize this content into several screens. To manage the transition between these screens, you will need to learn about <a href="/react-native/docs/using-navigators.html" target="">navigators</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/using-navigators.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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><p>Your app can now display all sorts of data and you may soon need to organize this content into several screens. To manage the transition between these screens, you will need to learn about <a href="/react-native/docs/using-navigators.html" target="">navigators</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/using-a-listview.html#content">← Prev</a><a class="docs-next" href="docs/using-navigators.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -177,7 +177,7 @@ are the responder.</p></li></ul></div></div></div></span></div><div><div><table
|
||||
<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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pixelratio.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/netinfo.html#content">← Prev</a><a class="docs-next" href="docs/pixelratio.html#content">Next →</a></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)
|
||||
|
||||
@@ -184,7 +184,7 @@ inside of your <code>onPress</code> handler in <code>requestAnimationFrame</code
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h3><a class="anchor" name="profiling"></a>Profiling <a class="hash-link" href="docs/performance.html#profiling">#</a></h3><p>Use the built-in Profiler to get detailed information about work done in
|
||||
the JavaScript thread and main thread side-by-side.</p><p>For iOS, Instruments are an invaluable tool, and on Android you should
|
||||
learn to use systrace.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/upgrading.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
learn to use systrace.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/navigation.html#content">← Prev</a><a class="docs-next" href="docs/upgrading.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -129,7 +129,7 @@ const PickerExample <span class="token operator">=</span> React<span class="toke
|
||||
<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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressbarandroid.html#content">Next →</a></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> PickerExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/pickerios.html#content">← Prev</a><a class="docs-next" href="docs/progressbarandroid.html#content">Next →</a></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)
|
||||
|
||||
@@ -138,7 +138,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
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<any<span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <PickerStyleExample <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 class="embedded-simulator"><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%22PickerIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/picker.html#content">Next →</a></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 class="embedded-simulator"><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%22PickerIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/navigatorios.html#content">← Prev</a><a class="docs-next" href="docs/picker.html#content">Next →</a></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 @@ Settings > Display > Font size, on iOS it will always return the default p
|
||||
@platform android</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getpixelsizeforlayoutsize"></a><span class="methodType">static </span>getPixelSizeForLayoutSize<span class="methodType">(layoutSize)</span> <a class="hash-link" href="docs/pixelratio.html#getpixelsizeforlayoutsize">#</a></h4><div><p>Converts a layout size (dp) to pixel size (px).</p><p>Guaranteed to return an integer number.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="roundtonearestpixel"></a><span class="methodType">static </span>roundToNearestPixel<span class="methodType">(layoutSize)</span> <a class="hash-link" href="docs/pixelratio.html#roundtonearestpixel">#</a></h4><div><p>Rounds a layout size (dp) to the nearest layout size that corresponds to
|
||||
an integer number of pixels. For example, on a device with a PixelRatio
|
||||
of 3, <code>PixelRatio.roundToNearestPixel(8.4) = 8.33</code>, which corresponds to
|
||||
exactly (8.33 * 3) = 25 pixels.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="startdetecting"></a><span class="methodType">static </span>startDetecting<span class="methodType">(0)</span> <a class="hash-link" href="docs/pixelratio.html#startdetecting">#</a></h4><div><p>// No-op for iOS, but used on the web. Should not be documented.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="description"></a>Description <a class="hash-link" href="docs/pixelratio.html#description">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/PixelRatio.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="pixel-grid-snapping"></a>Pixel Grid Snapping <a class="hash-link" href="docs/pixelratio.html#pixel-grid-snapping">#</a></h2><p>In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.</p><p>In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.</p><p>We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.</p><p>In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.</p></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pushnotificationios.html#content">Next →</a></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>
|
||||
exactly (8.33 * 3) = 25 pixels.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="startdetecting"></a><span class="methodType">static </span>startDetecting<span class="methodType">(0)</span> <a class="hash-link" href="docs/pixelratio.html#startdetecting">#</a></h4><div><p>// No-op for iOS, but used on the web. Should not be documented.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="description"></a>Description <a class="hash-link" href="docs/pixelratio.html#description">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/PixelRatio.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="pixel-grid-snapping"></a>Pixel Grid Snapping <a class="hash-link" href="docs/pixelratio.html#pixel-grid-snapping">#</a></h2><p>In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.</p><p>In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.</p><p>We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.</p><p>In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.</p></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/panresponder.html#content">← Prev</a><a class="docs-next" href="docs/pushnotificationios.html#content">Next →</a></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 @@ const styles <span class="token operator">=</span> StyleSheet<span class="token
|
||||
<span class="token keyword">if</span><span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version <span class="token operator">===</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Running on Lollipop!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="platform-specific-extensions"></a>Platform-specific extensions <a class="hash-link" href="docs/platform-specific-code.html#platform-specific-extensions">#</a></h2><p>When your platform-specific code is more complex, you should consider splitting the code out into separate files. React Native will detect when a file has a <code>.ios.</code> or <code>.android.</code> extension and load the relevant platform file when required from other components.</p><p>For example, say you have the following files in your project:</p><div class="prism language-javascript">BigButton<span class="token punctuation">.</span>ios<span class="token punctuation">.</span>js
|
||||
BigButton<span class="token punctuation">.</span>android<span class="token punctuation">.</span>js</div><p>You can then require the component as follows:</p><div class="prism language-javascript">const BigButton <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./BigButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>React Native will automatically pick up the right file based on the running platform.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/gesture-responder-system.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
BigButton<span class="token punctuation">.</span>android<span class="token punctuation">.</span>js</div><p>You can then require the component as follows:</p><div class="prism language-javascript">const BigButton <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./BigButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>React Native will automatically pick up the right file based on the running platform.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/upgrading.html#content">← Prev</a><a class="docs-next" href="docs/gesture-responder-system.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -75,7 +75,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/picker.html#content">← Prev</a><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></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 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
progressView<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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="embedded-simulator"><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%22ProgressViewIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/refreshcontrol.html#content">Next →</a></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 class="embedded-simulator"><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%22ProgressViewIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/progressbarandroid.html#content">← Prev</a><a class="docs-next" href="docs/refreshcontrol.html#content">Next →</a></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)
|
||||
|
||||
@@ -40,7 +40,7 @@ class <span class="token class-name">LotsOfGreetings</span> extends <span class=
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'LotsOfGreetings'</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> LotsOfGreetings<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aclass%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('LotsOfGreetings'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B" frameborder="0"></iframe></div><p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p><p>The other new thing going on here is the <a href="/react-native/docs/view.html" target=""><code>View</code></a> component. A <a href="/react-native/docs/view.html" target=""><code>View</code></a> is useful
|
||||
as a container for other components, to help control style and layout.</p><p>With <code>props</code> and the basic <a href="/react-native/docs/text.html" target=""><code>Text</code></a>, <a href="/react-native/docs/image.html" target=""><code>Image</code></a>, and <a href="/react-native/docs/view.html" target=""><code>View</code></a> components, you can
|
||||
build a wide variety of static screens. To learn how to make your app change over time, you need to <a href="/react-native/docs/state.html" target="">learn about State</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/state.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
build a wide variety of static screens. To learn how to make your app change over time, you need to <a href="/react-native/docs/state.html" target="">learn about State</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/tutorial.html#content">← Prev</a><a class="docs-next" href="docs/state.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -222,7 +222,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<any<span class="token operator">></span> <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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/statusbarios.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/pixelratio.html#content">← Prev</a><a class="docs-next" href="docs/statusbarios.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/scrollview.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/progressviewios.html#content">← Prev</a><a class="docs-next" href="docs/scrollview.html#content">Next →</a></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
@@ -212,7 +212,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/segmentedcontrolios.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/refreshcontrol.html#content">← Prev</a><a class="docs-next" href="docs/segmentedcontrolios.html#content">Next →</a></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)
|
||||
|
||||
@@ -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<any<span class="token operator">></span> <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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/slider.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/scrollview.html#content">← Prev</a><a class="docs-next" href="docs/slider.html#content">Next →</a></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
@@ -23,7 +23,7 @@ android <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div><h3><a class="anchor" name="generating-the-release-apk"></a>Generating the release APK <a class="hash-link" href="docs/signed-apk-android.html#generating-the-release-apk">#</a></h3><p>Simply run the following in a terminal:</p><div class="prism language-javascript">$ cd android && <span class="token punctuation">.</span><span class="token operator">/</span>gradlew assembleRelease</div><p>Gradle's <code>assembleRelease</code> will bundle all the JavaScript needed to run your app into the APK. If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p><p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p><h3><a class="anchor" name="testing-the-release-build-of-your-app"></a>Testing the release build of your app <a class="hash-link" href="docs/signed-apk-android.html#testing-the-release-build-of-your-app">#</a></h3><p>Before uploading the release build to the Play Store, make sure you test it thoroughly. Install it on the device using:</p><div class="prism language-javascript">$ cd android && <span class="token punctuation">.</span><span class="token operator">/</span>gradlew installRelease</div><p>Note that <code>installRelease</code> is only available if you've set up signing as described above.</p><p>You can kill any running packager instances, all your and framework JavaScript code is bundled in the APK's assets.</p><h3><a class="anchor" name="enabling-proguard-to-reduce-the-size-of-the-apk-optional"></a>Enabling Proguard to reduce the size of the APK (optional) <a class="hash-link" href="docs/signed-apk-android.html#enabling-proguard-to-reduce-the-size-of-the-apk-optional">#</a></h3><p>Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.</p><p><em><strong>IMPORTANT</strong>: Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See <code>app/proguard-rules.pro</code>.</em></p><p>To enable Proguard, edit <code>android/app/build.gradle</code>:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">/**
|
||||
* Run Proguard to shrink the Java bytecode in release builds.
|
||||
*/</span>
|
||||
def enableProguardInReleaseBuilds <span class="token operator">=</span> <span class="token boolean">true</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/android-ui-performance.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
def enableProguardInReleaseBuilds <span class="token operator">=</span> <span class="token boolean">true</span></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/running-on-device-android.html#content">← Prev</a><a class="docs-next" href="docs/android-ui-performance.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/sliderios.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/segmentedcontrolios.html#content">← Prev</a><a class="docs-next" href="docs/sliderios.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/statusbar.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/slider.html#content">← Prev</a><a class="docs-next" href="docs/statusbar.html#content">Next →</a></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)
|
||||
|
||||
@@ -33,7 +33,7 @@ class <span class="token class-name">BlinkApp</span> extends <span class="token
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'BlinkApp'</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> BlinkApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7BshowText%3A%20true%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20this.setState(%7B%20showText%3A%20!this.state.showText%20%7D)%3B%0A%20%20%20%20%7D%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20let%20display%20%3D%20this.state.showText%20%3F%20this.props.text%20%3A%20'%20'%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bdisplay%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aclass%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('BlinkApp'%2C%20()%20%3D%3E%20BlinkApp)%3B" frameborder="0"></iframe></div><p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like <a href="http://redux.js.org/index.html" target="_blank">Redux</a> to control your data flow. In that case you would use Redux to modify your state rather than calling <code>setState</code> directly.</p><p>State works the same way as it does in React, so for more details on handling state, you can look at the <a href="https://facebook.github.io/react/docs/component-api.html" target="_blank">React.Component API</a>.</p><p>At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to <a href="/react-native/docs/style.html" target="">learn about Style</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/style.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'BlinkApp'</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> BlinkApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7BshowText%3A%20true%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20this.setState(%7B%20showText%3A%20!this.state.showText%20%7D)%3B%0A%20%20%20%20%7D%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20let%20display%20%3D%20this.state.showText%20%3F%20this.props.text%20%3A%20'%20'%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bdisplay%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aclass%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('BlinkApp'%2C%20()%20%3D%3E%20BlinkApp)%3B" frameborder="0"></iframe></div><p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like <a href="http://redux.js.org/index.html" target="_blank">Redux</a> to control your data flow. In that case you would use Redux to modify your state rather than calling <code>setState</code> directly.</p><p>State works the same way as it does in React, so for more details on handling state, you can look at the <a href="https://facebook.github.io/react/docs/component-api.html" target="_blank">React.Component API</a>.</p><p>At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to <a href="/react-native/docs/style.html" target="">learn about Style</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/props.html#content">← Prev</a><a class="docs-next" href="docs/style.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -476,7 +476,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/switch.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/sliderios.html#content">← Prev</a><a class="docs-next" href="docs/switch.html#content">Next →</a></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
@@ -26,7 +26,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>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'LotsOfStyles'</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> LotsOfStyles<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20LotsOfStyles%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.red%7D%3Ejust%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.bigblue%7D%3Ejust%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.bigblue%2C%20styles.red%5D%7D%3Ebigblue%2C%20then%20red%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.red%2C%20styles.bigblue%5D%7D%3Ered%2C%20then%20bigblue%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20bigblue%3A%20%7B%0A%20%20%20%20color%3A%20'blue'%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%20%20fontSize%3A%2030%2C%0A%20%20%7D%2C%0A%20%20red%3A%20%7B%0A%20%20%20%20color%3A%20'red'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0AAppRegistry.registerComponent('LotsOfStyles'%2C%20()%20%3D%3E%20LotsOfStyles)%3B" frameborder="0"></iframe></div><p>One common pattern is to make your component accept a <code>style</code> prop which in
|
||||
turn is used to style subcomponents. You can use this to make styles "cascade" they way they do in CSS.</p><p>There are a lot more ways to customize text style. Check out the <a href="/react-native/docs/text.html" target="">Text component reference</a> for a complete list.</p><p>Now you can make your text beautiful. The next step in becoming a style master is to <a href="/react-native/docs/height-and-width.html" target="">learn how to control component size</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/height-and-width.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
turn is used to style subcomponents. You can use this to make styles "cascade" they way they do in CSS.</p><p>There are a lot more ways to customize text style. Check out the <a href="/react-native/docs/text.html" target="">Text component reference</a> for a complete list.</p><p>Now you can make your text beautiful. The next step in becoming a style master is to <a href="/react-native/docs/height-and-width.html" target="">learn how to control component size</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/state.html#content">← Prev</a><a class="docs-next" href="docs/height-and-width.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -57,7 +57,7 @@ StyleSheet<span class="token punctuation">.</span><span class="token function">f
|
||||
to resolve style objects represented by IDs. Thus, an array of style
|
||||
objects (instances of StyleSheet.create), are individually resolved to,
|
||||
their respective objects, merged as one and then returned. This also explains
|
||||
the alternative use.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/timepickerandroid.html#content">Next →</a></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>
|
||||
the alternative use.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/statusbarios.html#content">← Prev</a><a class="docs-next" href="docs/timepickerandroid.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/tabbarios.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/statusbar.html#content">← Prev</a><a class="docs-next" href="docs/tabbarios.html#content">Next →</a></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)
|
||||
|
||||
@@ -5,7 +5,7 @@ blank content, you probably forgot to add a selected one.</p></div></div><div cl
|
||||
icon is defined. If left empty, the icon will be tinted in blue.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="docs/tabbarios-item.html#style">#</a></h4><div><p>React style object.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="systemicon"></a>systemIcon <span class="propType">enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated')</span> <a class="hash-link" href="docs/tabbarios-item.html#systemicon">#</a></h4><div><p>Items comes with a few predefined system icons. Note that if you are
|
||||
using them, the title and selectedIcon will be overridden with the
|
||||
system ones.</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/tabbarios-item.html#title">#</a></h4><div><p>Text that appears under the icon. It is ignored when a system icon
|
||||
is defined.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/text.html#content">Next →</a></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>
|
||||
is defined.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/tabbarios.html#content">← Prev</a><a class="docs-next" href="docs/text.html#content">Next →</a></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)
|
||||
|
||||
@@ -102,7 +102,7 @@ it defaults to center.</p></div></div><div class="prop"><h4 class="propTitle"><a
|
||||
<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> TabBarExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><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%22TabBarIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/tabbarios-item.html#content">Next →</a></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> TabBarExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><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%22TabBarIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/switch.html#content">← Prev</a><a class="docs-next" href="docs/tabbarios-item.html#content">Next →</a></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 @@
|
||||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div><p>Note: you may have to install/upgrade/link Node.js and other parts of your environment in order for the tests to run correctly. Check out the latest setup in <a href="https://github.com/facebook/react-native/blob/master/.travis.yml#L11-24" target="_blank">.travis.yml</a></p><h2><a class="anchor" name="unit-tests-android"></a>Unit tests (Android) <a class="hash-link" href="docs/testing.html#unit-tests-android">#</a></h2><p>React Native uses the <a href="https://buckbuild.com/setup/install.html" target="_blank">Buck build tool</a> to run tests. Unit tests run locally on your machine, no emulator is needed. To run the tests:</p><div class="prism language-javascript">$ cd react<span class="token operator">-</span>native
|
||||
$ <span class="token punctuation">.</span><span class="token operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>unit<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-android"></a>Integration tests (Android) <a class="hash-link" href="docs/testing.html#integration-tests-android">#</a></h2><p>React Native uses the <a href="https://buckbuild.com/setup/install.html" target="_blank">Buck build tool</a> to run tests. Integration tests run on an emulator / device and verify that modules and components, as well as the core parts of React Native (such as the bridge) work well end-to-end.</p><p>Make sure you have the path to the Android NDK set up, see <a href="/react-native/docs/android-building-from-source.html#prerequisites" target="">Prerequisites</a>.</p><p>To run the tests:</p><div class="prism language-javascript">$ cd react<span class="token operator">-</span>native
|
||||
$ npm install
|
||||
$ <span class="token punctuation">.</span><span class="token operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>integration<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-ios"></a>Integration Tests (iOS) <a class="hash-link" href="docs/testing.html#integration-tests-ios">#</a></h2><p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>. <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method). <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>. The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a>, <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a>, and <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank">IntegrationTestsApp.js</a> for example usage and integration points.</p><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.</p><h2><a class="anchor" name="snapshot-tests-ios"></a>Snapshot Tests (iOS) <a class="hash-link" href="docs/testing.html#snapshot-tests-ios">#</a></h2><p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/javascript-environment.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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 operator">/</span>scripts<span class="token operator">/</span>run<span class="token operator">-</span>android<span class="token operator">-</span>local<span class="token operator">-</span>integration<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="integration-tests-ios"></a>Integration Tests (iOS) <a class="hash-link" href="docs/testing.html#integration-tests-ios">#</a></h2><p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>. <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method). <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>. The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a>, <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a>, and <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank">IntegrationTestsApp.js</a> for example usage and integration points.</p><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.</p><h2><a class="anchor" name="snapshot-tests-ios"></a>Snapshot Tests (iOS) <a class="hash-link" href="docs/testing.html#snapshot-tests-ios">#</a></h2><p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/debugging.html#content">← Prev</a><a class="docs-next" href="docs/javascript-environment.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -992,7 +992,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>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> TextExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/textinput.html#content">Next →</a></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> TextExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/tabbarios-item.html#content">← Prev</a><a class="docs-next" href="docs/textinput.html#content">Next →</a></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)
|
||||
|
||||
@@ -1435,7 +1435,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 class="embedded-simulator"><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%22TextInput%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/toolbarandroid.html#content">Next →</a></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 class="embedded-simulator"><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%22TextInput%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/text.html#content">← Prev</a><a class="docs-next" href="docs/toolbarandroid.html#content">Next →</a></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)
|
||||
|
||||
@@ -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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/toastandroid.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/stylesheet.html#content">← Prev</a><a class="docs-next" href="docs/toastandroid.html#content">Next →</a></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)
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<span class="token number">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><p>This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.</p><p>Keep in mind that if you use ES6 classes for your React components <a href="https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins" target="_blank">there is no built-in API for mixins</a>. To use <code>TimerMixin</code> with ES6 classes, we recommend <a href="https://github.com/brigand/react-mixin" target="_blank">react-mixin</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/direct-manipulation.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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><p>This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.</p><p>Keep in mind that if you use ES6 classes for your React components <a href="https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins" target="_blank">there is no built-in API for mixins</a>. To use <code>TimerMixin</code> with ES6 classes, we recommend <a href="https://github.com/brigand/react-mixin" target="_blank">react-mixin</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/accessibility.html#content">← Prev</a><a class="docs-next" href="docs/direct-manipulation.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -52,7 +52,7 @@ which takes the following parameters:</p><ol><li>String message: A string with 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> ToastExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><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%22ToastAndroid%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/vibrationios.html#content">Next →</a></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> ToastExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><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%22ToastAndroid%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/timepickerandroid.html#content">← Prev</a><a class="docs-next" href="docs/vibrationios.html#content">Next →</a></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)
|
||||
|
||||
@@ -154,7 +154,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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/textinput.html#content">← Prev</a><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></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)
|
||||
|
||||
@@ -14,7 +14,7 @@ backgroundColor of the wrapped view isn't explicitly set to an opaque color
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><blockquote><p><strong>NOTE</strong>: TouchableHighlight supports only one child</p><p>If you wish to have several child components, wrap them in a View.</p></blockquote></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablehighlight.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablehighlight.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="docs/touchablehighlight.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onhideunderlay"></a>onHideUnderlay <span class="propType">function</span> <a class="hash-link" href="docs/touchablehighlight.html#onhideunderlay">#</a></h4><div><p>Called immediately after the underlay is hidden</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshowunderlay"></a>onShowUnderlay <span class="propType">function</span> <a class="hash-link" href="docs/touchablehighlight.html#onshowunderlay">#</a></h4><div><p>Called immediately after the underlay is shown</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="docs/touchablehighlight.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/touchablehighlight.html#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
|
||||
active.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablenativefeedback.html#content">Next →</a></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>
|
||||
active.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/toolbarandroid.html#content">← Prev</a><a class="docs-next" href="docs/touchablenativefeedback.html#content">Next →</a></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)
|
||||
|
||||
@@ -23,7 +23,7 @@ Available on android API level 21+.</p></div></div><div class="prop"><h4 class="
|
||||
string). If property <code>borderless</code> evaluates to true the ripple will
|
||||
render outside of the view bounds (see native actionbar buttons as an
|
||||
example of that behavior). This background type is available on Android
|
||||
API level 21+.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>color<br><br><div><span>string</span></div></td><td class="description"><div><p>The ripple color</p></div></td></tr><tr><td>borderless<br><br><div><span>boolean</span></div></td><td class="description"><div><p>If the ripple can render outside it's bounds</p></div></td></tr></tbody></table></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchableopacity.html#content">Next →</a></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>
|
||||
API level 21+.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>color<br><br><div><span>string</span></div></td><td class="description"><div><p>The ripple color</p></div></td></tr><tr><td>borderless<br><br><div><span>boolean</span></div></td><td class="description"><div><p>If the ripple can render outside it's bounds</p></div></td></tr></tbody></table></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/touchablehighlight.html#content">← Prev</a><a class="docs-next" href="docs/touchableopacity.html#content">Next →</a></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 @@ easy to add to an app without weird side-effects.</p><p>Example:</p><div class="
|
||||
<<span class="token operator">/</span>TouchableOpacity<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/touchableopacity.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchableopacity.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="docs/touchableopacity.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active. Defaults to 0.2.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchableopacity.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setopacityto"></a>setOpacityTo<span class="methodType">(value)</span> <a class="hash-link" href="docs/touchableopacity.html#setopacityto">#</a></h4><div><p>Animate the touchable to a new opacity.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablewithoutfeedback.html#content">Next →</a></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>
|
||||
active. Defaults to 0.2.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchableopacity.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setopacityto"></a>setOpacityTo<span class="methodType">(value)</span> <a class="hash-link" href="docs/touchableopacity.html#setopacityto">#</a></h4><div><p>Animate the touchable to a new opacity.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-prev" href="docs/touchablenativefeedback.html#content">← Prev</a><a class="docs-next" href="docs/touchablewithoutfeedback.html#content">Next →</a></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)
|
||||
|
||||
@@ -10,7 +10,7 @@ that steals the responder lock).</p></div></div><div class="prop"><h4 class="pro
|
||||
move off of the button, before deactivating the button. Once deactivated,
|
||||
try moving it back and you'll see that the button is once again
|
||||
reactivated! Move it back and forth several times while the scroll view
|
||||
is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/view.html#content">Next →</a></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>
|
||||
is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/touchableopacity.html#content">← Prev</a><a class="docs-next" href="docs/view.html#content">Next →</a></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)
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
ReactPropTypes.shape({skewX: ReactPropTypes.string}),
|
||||
ReactPropTypes.shape({skewY: ReactPropTypes.string})
|
||||
])
|
||||
)</span> <a class="hash-link" href="docs/transforms.html#transform">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transformmatrix"></a>transformMatrix <span class="propType">TransformMatrixPropType</span> <a class="hash-link" href="docs/transforms.html#transformmatrix">#</a></h4></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/shadow-props.html#content">Next →</a></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> <a class="hash-link" href="docs/transforms.html#transform">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transformmatrix"></a>transformMatrix <span class="propType">TransformMatrixPropType</span> <a class="hash-link" href="docs/transforms.html#transformmatrix">#</a></h4></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/layout-props.html#content">← Prev</a><a class="docs-next" href="docs/shadow-props.html#content">Next →</a></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 @@ class <span class="token class-name">HelloWorldApp</span> extends <span class="t
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'HelloWorldApp'</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> HelloWorldApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aclass%20HelloWorldApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20world!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('HelloWorldApp'%2C%20()%20%3D%3E%20HelloWorldApp)%3B" frameborder="0"></iframe></div><p>If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your <code>index.ios.js</code> or <code>index.android.js</code> file to create a real app on your local machine.</p><h2><a class="anchor" name="what-s-going-on-here"></a>What's going on here? <a class="hash-link" href="docs/tutorial.html#what-s-going-on-here">#</a></h2><p>Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.</p><p>First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. <code>import</code>, <code>from</code>, <code>class</code>, <code>extends</code>, and the <code>() =></code> syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, <a href="https://babeljs.io/docs/learn-es2015/" target="_blank">this page</a> has a good overview of ES2015 features.</p><p>The other unusual thing in this code example is <code><Text>Hello world!</Text></code>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <code><div></code> or <code><span></code>, you use React components. In this case, <code><Text></code>
|
||||
is a built-in component that just displays some text.</p><h2><a class="anchor" name="component-and-appregistry"></a>Component and AppRegistry <a class="hash-link" href="docs/tutorial.html#component-and-appregistry">#</a></h2><p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</code>, and it's registering it with the <code>AppRegistry</code>. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a <code>render</code> function which returns some JSX to render.</p><p>The <code>AppRegistry</code> just tells React Native which component is the root one for the whole application. You won't be thinking about <code>AppRegistry</code> a lot - there will probably just be one call to <code>AppRegistry.registerComponent</code> in your whole app. It's included in these examples so you can paste the whole thing into your <code>index.ios.js</code> or <code>index.android.js</code> file and get it running.</p><h2><a class="anchor" name="this-app-doesn-t-do-very-much"></a>This App Doesn't Do Very Much <a class="hash-link" href="docs/tutorial.html#this-app-doesn-t-do-very-much">#</a></h2><p>Good point. To make components do more interesting things, you need to <a href="/react-native/docs/props.html" target="">learn about Props</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/props.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
is a built-in component that just displays some text.</p><h2><a class="anchor" name="component-and-appregistry"></a>Component and AppRegistry <a class="hash-link" href="docs/tutorial.html#component-and-appregistry">#</a></h2><p>So this code is defining <code>HelloWorldApp</code>, a new <code>Component</code>, and it's registering it with the <code>AppRegistry</code>. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a <code>render</code> function which returns some JSX to render.</p><p>The <code>AppRegistry</code> just tells React Native which component is the root one for the whole application. You won't be thinking about <code>AppRegistry</code> a lot - there will probably just be one call to <code>AppRegistry.registerComponent</code> in your whole app. It's included in these examples so you can paste the whole thing into your <code>index.ios.js</code> or <code>index.android.js</code> file and get it running.</p><h2><a class="anchor" name="this-app-doesn-t-do-very-much"></a>This App Doesn't Do Very Much <a class="hash-link" href="docs/tutorial.html#this-app-doesn-t-do-very-much">#</a></h2><p>Good point. To make components do more interesting things, you need to <a href="/react-native/docs/props.html" target="">learn about Props</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/getting-started.html#content">← Prev</a><a class="docs-next" href="docs/props.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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 @@ version of React Native:</p><h2><a class="anchor" name="1-upgrade-the-react-nati
|
||||
run <code>react-native init</code>, like the iOS and the Android sub-projects. To get these latest changes,
|
||||
run this in a terminal:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native upgrade</div><p>This will check your files against the latest template and perform the following:</p><ul><li>If there is a new file in the template, it is simply created.</li><li>If a file in the template is identical to your file, it is skipped.</li><li>If a file is different in your project than the template, you will be prompted; you have options
|
||||
to view a diff between your file and the template file, keep your file or overwrite it with the
|
||||
template version. If you are unsure, press <code>h</code> to get a list of possible commands.</li></ul><h1><a class="anchor" name="manual-upgrades"></a>Manual Upgrades <a class="hash-link" href="docs/upgrading.html#manual-upgrades">#</a></h1><p>Xcode project format is pretty complex and sometimes it's tricky to upgrade and merge new changes.</p><h3><a class="anchor" name="from-0-13-to-0-14"></a>From 0.13 to 0.14 <a class="hash-link" href="docs/upgrading.html#from-0-13-to-0-14">#</a></h3><p>The major change in this version happened to the CLI (<a href="https://github.com/facebook/react-native/releases/tag/v0.14.0-rc" target="_blank">see changelog</a>) and static images (<a href="docs/images.html" target="_blank">see docs</a>). To use the new asset system in existing Xcode project, do the following:</p><p>Add new "Run Script" step to your project's build phases:</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050044/871bf926-86f7-11e5-8908-736106457bcb.png" alt=""></p><p>Set the script to</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator">/</span>node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">/</span>packager<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">-</span>xcode<span class="token punctuation">.</span>sh</div><p><img src="https://cloud.githubusercontent.com/assets/192222/11050052/8f098252-86f7-11e5-994a-364aabbaa7d1.png" alt=""></p><p>Move main.jsbundle to Trash (it will be generated automatically by Xcode using the script above)</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050104/f3d025e2-86f7-11e5-9101-a4622236338d.png" alt=""></p><p>If you installed Node via nvm, you might experience "react-native: command not found". See <a href="https://github.com/facebook/react-native/issues/3974" target="_blank">issues/3974</a> for workaround and <a href="https://github.com/facebook/react-native/pull/4015" target="_blank">pull/4015</a> for the fix.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/platform-specific-code.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>
|
||||
template version. If you are unsure, press <code>h</code> to get a list of possible commands.</li></ul><h1><a class="anchor" name="manual-upgrades"></a>Manual Upgrades <a class="hash-link" href="docs/upgrading.html#manual-upgrades">#</a></h1><p>Xcode project format is pretty complex and sometimes it's tricky to upgrade and merge new changes.</p><h3><a class="anchor" name="from-0-13-to-0-14"></a>From 0.13 to 0.14 <a class="hash-link" href="docs/upgrading.html#from-0-13-to-0-14">#</a></h3><p>The major change in this version happened to the CLI (<a href="https://github.com/facebook/react-native/releases/tag/v0.14.0-rc" target="_blank">see changelog</a>) and static images (<a href="docs/images.html" target="_blank">see docs</a>). To use the new asset system in existing Xcode project, do the following:</p><p>Add new "Run Script" step to your project's build phases:</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050044/871bf926-86f7-11e5-8908-736106457bcb.png" alt=""></p><p>Set the script to</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator">/</span>node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">/</span>packager<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">-</span>xcode<span class="token punctuation">.</span>sh</div><p><img src="https://cloud.githubusercontent.com/assets/192222/11050052/8f098252-86f7-11e5-994a-364aabbaa7d1.png" alt=""></p><p>Move main.jsbundle to Trash (it will be generated automatically by Xcode using the script above)</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050104/f3d025e2-86f7-11e5-9101-a4622236338d.png" alt=""></p><p>If you installed Node via nvm, you might experience "react-native: command not found". See <a href="https://github.com/facebook/react-native/issues/3974" target="_blank">issues/3974</a> for workaround and <a href="https://github.com/facebook/react-native/pull/4015" target="_blank">pull/4015</a> for the fix.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/performance.html#content">← Prev</a><a class="docs-next" href="docs/platform-specific-code.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -25,7 +25,7 @@ class <span class="token class-name">ListViewBasics</span> extends <span class="
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// App registration and rendering
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'ListViewBasics'</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> ListViewBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ListView%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ListViewBasics%20extends%20Component%20%7B%0A%20%20%2F%2F%20Initialize%20the%20hardcoded%20data%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20const%20ds%20%3D%20new%20ListView.DataSource(%7BrowHasChanged%3A%20(r1%2C%20r2)%20%3D%3E%20r1%20!%3D%3D%20r2%7D)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20dataSource%3A%20ds.cloneWithRows(%5B%0A%20%20%20%20%20%20%20%20'John'%2C%20'Joel'%2C%20'James'%2C%20'Jimmy'%2C%20'Jackson'%2C%20'Jillian'%2C%20'Julie'%2C%20'Devin'%0A%20%20%20%20%20%20%5D)%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BpaddingTop%3A%2022%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CListView%0A%20%20%20%20%20%20%20%20%20%20dataSource%3D%7Bthis.state.dataSource%7D%0A%20%20%20%20%20%20%20%20%20%20renderRow%3D%7B(rowData)%20%3D%3E%20%3CText%3E%7BrowData%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('ListViewBasics'%2C%20()%20%3D%3E%20ListViewBasics)%3B" frameborder="0"></iframe></div><p>One of the most common uses for a <code>ListView</code> is displaying data that you fetch from a server. To do that, you will need to <a href="/react-native/docs/network.html" target="">learn about networking in React Native</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/network.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'ListViewBasics'</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> ListViewBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ListView%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ListViewBasics%20extends%20Component%20%7B%0A%20%20%2F%2F%20Initialize%20the%20hardcoded%20data%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20const%20ds%20%3D%20new%20ListView.DataSource(%7BrowHasChanged%3A%20(r1%2C%20r2)%20%3D%3E%20r1%20!%3D%3D%20r2%7D)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20dataSource%3A%20ds.cloneWithRows(%5B%0A%20%20%20%20%20%20%20%20'John'%2C%20'Joel'%2C%20'James'%2C%20'Jimmy'%2C%20'Jackson'%2C%20'Jillian'%2C%20'Julie'%2C%20'Devin'%0A%20%20%20%20%20%20%5D)%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BpaddingTop%3A%2022%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CListView%0A%20%20%20%20%20%20%20%20%20%20dataSource%3D%7Bthis.state.dataSource%7D%0A%20%20%20%20%20%20%20%20%20%20renderRow%3D%7B(rowData)%20%3D%3E%20%3CText%3E%7BrowData%7D%3C%2FText%3E%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('ListViewBasics'%2C%20()%20%3D%3E%20ListViewBasics)%3B" frameborder="0"></iframe></div><p>One of the most common uses for a <code>ListView</code> is displaying data that you fetch from a server. To do that, you will need to <a href="/react-native/docs/network.html" target="">learn about networking in React Native</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/using-a-scrollview.html#content">← Prev</a><a class="docs-next" href="docs/network.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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
@@ -95,7 +95,7 @@ class <span class="token class-name">MyScene</span> extends <span class="token c
|
||||
<<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></div><p>In this example, the <code>MyScene</code> component is passed the title of the current route via the <code>title</code> prop. It displays two tappable components that call the <code>onForward</code> and <code>onBack</code> functions passed through its props, which in turn will call <code>navigator.push()</code> and <code>navigator.pop()</code> as needed.</p><p>Check out the <a href="docs/navigator.html" target="_blank">Navigator API reference</a> for more <code>Navigator</code> code samples, or read through the <a href="docs/navigation.html" target="_blank">Navigation guide</a> for other examples of what you can do with navigators.</p><h2><a class="anchor" name="high-five"></a>High Five! <a class="hash-link" href="docs/using-navigators.html#high-five">#</a></h2><p>If you've gotten here by reading linearly through the tutorial, then you are a pretty impressive human being. Congratulations. Next, you might want to check out <a href="/react-native/docs/more-resources.html" target="">all the cool stuff the community does with React Native</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/more-resources.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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></div><p>In this example, the <code>MyScene</code> component is passed the title of the current route via the <code>title</code> prop. It displays two tappable components that call the <code>onForward</code> and <code>onBack</code> functions passed through its props, which in turn will call <code>navigator.push()</code> and <code>navigator.pop()</code> as needed.</p><p>Check out the <a href="docs/navigator.html" target="_blank">Navigator API reference</a> for more <code>Navigator</code> code samples, or read through the <a href="docs/navigation.html" target="_blank">Navigation guide</a> for other examples of what you can do with navigators.</p><h2><a class="anchor" name="high-five"></a>High Five! <a class="hash-link" href="docs/using-navigators.html#high-five">#</a></h2><p>If you've gotten here by reading linearly through the tutorial, then you are a pretty impressive human being. Congratulations. Next, you might want to check out <a href="/react-native/docs/more-resources.html" target="">all the cool stuff the community does with React Native</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/networking.html#content">← Prev</a><a class="docs-next" href="docs/more-resources.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></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)
|
||||
|
||||
@@ -83,7 +83,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
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 class="embedded-simulator"><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%22Vibration%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/layout-props.html#content">Next →</a></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 class="embedded-simulator"><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%22Vibration%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/vibrationios.html#content">← Prev</a><a class="docs-next" href="docs/layout-props.html#content">Next →</a></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)
|
||||
|
||||
@@ -40,7 +40,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
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 class="embedded-simulator"><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%22VibrationIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/vibration.html#content">Next →</a></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 class="embedded-simulator"><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%22VibrationIOS%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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/toastandroid.html#content">← Prev</a><a class="docs-next" href="docs/vibration.html#content">Next →</a></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)
|
||||
|
||||
@@ -363,7 +363,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token keyword">return</span> <ZIndexExample <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></div><div class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/viewpagerandroid.html#content">Next →</a></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 class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/touchablewithoutfeedback.html#content">← Prev</a><a class="docs-next" href="docs/viewpagerandroid.html#content">Next →</a></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)
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user