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

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2016-07-04 19:23:20 +00:00
parent 884f7d8bce
commit e1668f4454
44 changed files with 75 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/css/react-native.css
+33
View File
@@ -1407,12 +1407,45 @@ div[data-twttr-id] iframe {
background-color: hsl(198, 100%, 94%);
}
.survey {
padding: 10px;
padding-top: 0;
background-color: rgba(5, 165, 209, 0.05);
border: 2px solid #05A5D1;
position: relative;
}
.survey-image {
float: left;
height: 128px;
width: 128px;
background-image: url('../img/survey.png');
}
.survey p {
margin-left: 130px;
}
.survey .button {
font-size: 24px;
background: #05A5D1;
color: #fafafa;
}
@media only screen
and (max-device-width: 1024px) {
#content {
display: inline;
}
.survey-image {
position: static;
margin: 10px auto;
}
.survey p {
margin-left: 0px;
}
.container {
min-width: 0;
overflow: auto;
releases/next/docs/accessibility.html
+1 -1
View File
@@ -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">&gt;</span></div><p>In the above example we&#x27;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 &quot;Vision&quot; and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an &quot;Accessibility Shortcut&quot;. 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></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">&gt;</span></div><p>In the above example we&#x27;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 &quot;Vision&quot; and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an &quot;Accessibility Shortcut&quot;. 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>
(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)
releases/next/docs/android-building-from-source.html
+1 -1
View File
@@ -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">&quot;/path/to/build/directory/${rootProject.name}/${project.name}&quot;</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></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-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)
releases/next/docs/android-ui-performance.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/animations.html
+1 -1
View File
@@ -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></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-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)
releases/next/docs/colors.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/communication-ios.html
+1 -1
View File
@@ -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&#x27;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&#x27;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&#x27;s fine to change root view&#x27;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>&#x27;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></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&#x27;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&#x27;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&#x27;s fine to change root view&#x27;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>&#x27;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>
(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)
releases/next/docs/debugging.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/direct-manipulation.html
+1 -1
View File
@@ -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></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-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)
releases/next/docs/flexbox.html
+1 -1
View File
@@ -58,7 +58,7 @@ class <span class="token class-name">AlignItemsBasics</span> <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">&#x27;AwesomeProject&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20AlignItemsBasics%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&#x27;flex-start&#x27;%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&#x27;column&#x27;%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20&#x27;center&#x27;%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20&#x27;center&#x27;%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&#x27;powderblue&#x27;%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&#x27;skyblue&#x27;%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&#x27;steelblue&#x27;%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(&#x27;AwesomeProject&#x27;%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&#x27;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&#x27;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&#x27;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></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">&#x27;AwesomeProject&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20AlignItemsBasics%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&#x27;flex-start&#x27;%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&#x27;column&#x27;%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20&#x27;center&#x27;%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20&#x27;center&#x27;%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&#x27;powderblue&#x27;%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&#x27;skyblue&#x27;%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&#x27;steelblue&#x27;%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(&#x27;AwesomeProject&#x27;%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&#x27;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&#x27;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&#x27;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>
(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)
releases/next/docs/gesture-responder-system.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/getting-started.html
+1 -1
View File
@@ -195,7 +195,7 @@ if (!foundHash) {
display('platform', isMac ? 'ios' : 'android');
}
</script>
</span></div><div class="docs-prevnext"><a class="docs-next" href="docs/tutorial.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></div><div class="docs-prevnext"><a class="docs-next" href="docs/tutorial.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)
releases/next/docs/handling-text-input.html
+1 -1
View File
@@ -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">&#x27;PizzaTranslator&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;&#x27;%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(&#x27;%20&#x27;).map((word)%20%3D%3E%20word%20%26%26%20&#x27;%F0%9F%8D%95&#x27;).join(&#x27;%20&#x27;)%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(&#x27;PizzaTranslator&#x27;%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&#x27;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></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">&#x27;PizzaTranslator&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;&#x27;%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(&#x27;%20&#x27;).map((word)%20%3D%3E%20word%20%26%26%20&#x27;%F0%9F%8D%95&#x27;).join(&#x27;%20&#x27;)%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(&#x27;PizzaTranslator&#x27;%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&#x27;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>
(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)
releases/next/docs/handling-touches.html
+1 -1
View File
@@ -10,7 +10,7 @@
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></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="/docs/touchablehighlight.html" target=""><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view&#x27;s background will be darkened when the user presses down on the button.</p></li><li><p>You may consider using <a href="/docs/touchablenativefeedback.html" target=""><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user&#x27;s touch.</p></li><li><p><a href="/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&#x27;t want any feedback to be displayed, use <a href="/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="/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="/docs/viewpagerandroid.html" target="">ViewPagerAndroid</a> component.</p><p>A <a href="/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="/docs/panresponder.html" target="">PanResponder</a> API or the <a href="/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></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="/docs/touchablehighlight.html" target=""><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view&#x27;s background will be darkened when the user presses down on the button.</p></li><li><p>You may consider using <a href="/docs/touchablenativefeedback.html" target=""><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user&#x27;s touch.</p></li><li><p><a href="/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&#x27;t want any feedback to be displayed, use <a href="/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="/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="/docs/viewpagerandroid.html" target="">ViewPagerAndroid</a> component.</p><p>A <a href="/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="/docs/panresponder.html" target="">PanResponder</a> API or the <a href="/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>
(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)
releases/next/docs/height-and-width.html
+1 -1
View File
@@ -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">&#x27;AwesomeProject&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;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&#x27;powderblue&#x27;%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&#x27;skyblue&#x27;%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&#x27;steelblue&#x27;%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(&#x27;AwesomeProject&#x27;%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B" frameborder="0"></iframe></div><p>After you can control a component&#x27;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></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">&#x27;AwesomeProject&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;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&#x27;powderblue&#x27;%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&#x27;skyblue&#x27;%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&#x27;steelblue&#x27;%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(&#x27;AwesomeProject&#x27;%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B" frameborder="0"></iframe></div><p>After you can control a component&#x27;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>
(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)
releases/next/docs/images.html
+1 -1
View File
@@ -21,7 +21,7 @@ using local resources that are outside of <code>Images.xcassets</code>.</p><h3><
&lt;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">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Inside&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>Image<span class="token operator">&gt;</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></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-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)
releases/next/docs/integration-with-existing-apps.html
+1 -1
View File
@@ -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></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-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)
releases/next/docs/javascript-environment.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/linking-libraries-ios.html
+1 -1
View File
@@ -19,7 +19,7 @@ received.</p><p>For that we need to know the library&#x27;s headers. To achieve
to your project&#x27;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></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-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)
releases/next/docs/more-resources.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/native-components-android.html
+1 -1
View File
@@ -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&#x27;ll have some special properties that you need to expose for the native component, but don&#x27;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&#x27;t want these native only properties to be part of the API, you don&#x27;t want to put them in <code>propTypes</code>, but if you don&#x27;t you&#x27;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></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&#x27;ll have some special properties that you need to expose for the native component, but don&#x27;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&#x27;t want these native only properties to be part of the API, you don&#x27;t want to put them in <code>propTypes</code>, but if you don&#x27;t you&#x27;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>
(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)
releases/next/docs/native-components-ios.html
+1 -1
View File
@@ -247,7 +247,7 @@ import <span class="token punctuation">{</span> UIManager <span class="token pun
@<span class="token string">&quot;datetime&quot;</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></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-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)
releases/next/docs/native-modules-android.html
+1 -1
View File
@@ -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"> // Actvity `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></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-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)
releases/next/docs/native-modules-ios.html
+1 -1
View File
@@ -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&gt;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">&quot;RCTBridgeModule.h&quot;</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></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">&quot;RCTBridgeModule.h&quot;</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>
(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)
releases/next/docs/navigation.html
+1 -1
View File
@@ -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">&#x27;500&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h3><a class="anchor" name="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></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-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)
releases/next/docs/network.html
+1 -1
View File
@@ -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">&gt;</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/navigators.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><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/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)
releases/next/docs/performance.html
+1 -1
View File
@@ -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></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-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)
releases/next/docs/platform-specific-code.html
+1 -1
View File
@@ -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">&#x27;Running on Lollipop!&#x27;</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">&#x27;./BigButton&#x27;</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></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">&#x27;./BigButton&#x27;</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>
(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)
releases/next/docs/props.html
+1 -1
View File
@@ -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">&#x27;LotsOfGreetings&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;center&#x27;%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D&#x27;Rexxar&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D&#x27;Jaina&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D&#x27;Valeera&#x27;%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(&#x27;LotsOfGreetings&#x27;%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></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-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)
releases/next/docs/running-on-device-android.html
+1 -1
View File
@@ -21,7 +21,7 @@ TA9300GLMK device</div><h2><a class="anchor" name="accessing-development-serv
<img src="img/AndroidDevServerDialog.png" width="150" />
</center>
</span><p>For IOS: Edit the AppDelegate.m and change the line below to match the port number you&#x27;re running:</p><p><code>jsCodeLocation = [NSURL URLWithString:@&quot;http://localhost:8081/index.ios.bundle?platform=ios&amp;dev=true&quot;];</code></p><h3><a class="anchor" name="configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi"></a>Configure your app to connect to the local dev server via Wi-Fi <a class="hash-link" href="docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi">#</a></h3><ol><li>Make sure your laptop and your phone are on the <strong>same Wi-Fi network</strong>.</li><li>Open your React Native app on your device. You can do this the same way you&#x27;d open any other app.</li><li>You&#x27;ll see a red screen with an error. This is OK. The following steps will fix that.</li><li>Open the <strong>Developer menu</strong> by shaking the device or running <code>adb shell input keyevent 82</code> from the command line.</li><li>Go to <code>Dev Settings</code>.</li><li>Go to <code>Debug server host for device</code>.</li><li>Type in your machine&#x27;s IP address and the port of the local dev server (e.g. 10.0.1.1:8081). <strong>On Mac</strong>, you can find the IP address in System Preferences / Network. <strong>On Windows</strong>, open the command prompt and type <code>ipconfig</code> to find your machine&#x27;s IP address (<a href="http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information" target="_blank">more info</a>).</li><li>Go back to the <strong>Developer menu</strong> and select <code>Reload JS</code>.</li></ol></div><div class="docs-prevnext"><a class="docs-next" href="docs/signed-apk-android.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><p>For IOS: Edit the AppDelegate.m and change the line below to match the port number you&#x27;re running:</p><p><code>jsCodeLocation = [NSURL URLWithString:@&quot;http://localhost:8081/index.ios.bundle?platform=ios&amp;dev=true&quot;];</code></p><h3><a class="anchor" name="configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi"></a>Configure your app to connect to the local dev server via Wi-Fi <a class="hash-link" href="docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi">#</a></h3><ol><li>Make sure your laptop and your phone are on the <strong>same Wi-Fi network</strong>.</li><li>Open your React Native app on your device. You can do this the same way you&#x27;d open any other app.</li><li>You&#x27;ll see a red screen with an error. This is OK. The following steps will fix that.</li><li>Open the <strong>Developer menu</strong> by shaking the device or running <code>adb shell input keyevent 82</code> from the command line.</li><li>Go to <code>Dev Settings</code>.</li><li>Go to <code>Debug server host for device</code>.</li><li>Type in your machine&#x27;s IP address and the port of the local dev server (e.g. 10.0.1.1:8081). <strong>On Mac</strong>, you can find the IP address in System Preferences / Network. <strong>On Windows</strong>, open the command prompt and type <code>ipconfig</code> to find your machine&#x27;s IP address (<a href="http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information" target="_blank">more info</a>).</li><li>Go back to the <strong>Developer menu</strong> and select <code>Reload JS</code>.</li></ol></div><div class="docs-prevnext"><a class="docs-next" href="docs/signed-apk-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)
releases/next/docs/running-on-device-ios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/running-on-simulator-ios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/signed-apk-android.html
+1 -1
View File
@@ -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 &amp;&amp; <span class="token punctuation">.</span><span class="token operator">/</span>gradlew assembleRelease</div><p>Gradle&#x27;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 &amp;&amp; <span class="token punctuation">.</span><span class="token operator">/</span>gradlew installRelease</div><p>Note that <code>installRelease</code> is only available if you&#x27;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&#x27;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&#x27;ve enabled Proguard. Proguard often requires configuration specific to each native library you&#x27;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></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-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)
releases/next/docs/state.html
+1 -1
View File
@@ -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">&#x27;BlinkApp&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;%20&#x27;%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&#x27;I%20love%20to%20blink&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D&#x27;Yes%20blinking%20is%20so%20great&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D&#x27;Why%20did%20they%20ever%20take%20this%20out%20of%20HTML&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D&#x27;Look%20at%20me%20look%20at%20me%20look%20at%20me&#x27;%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(&#x27;BlinkApp&#x27;%2C%20()%20%3D%3E%20BlinkApp)%3B" frameborder="0"></iframe></div><p>In a real application, you probably won&#x27;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></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">&#x27;BlinkApp&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;%20&#x27;%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&#x27;I%20love%20to%20blink&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D&#x27;Yes%20blinking%20is%20so%20great&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D&#x27;Why%20did%20they%20ever%20take%20this%20out%20of%20HTML&#x27;%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D&#x27;Look%20at%20me%20look%20at%20me%20look%20at%20me&#x27;%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(&#x27;BlinkApp&#x27;%2C%20()%20%3D%3E%20BlinkApp)%3B" frameborder="0"></iframe></div><p>In a real application, you probably won&#x27;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>
(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)
releases/next/docs/style.html
+1 -1
View File
@@ -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">&#x27;LotsOfStyles&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%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&#x27;blue&#x27;%2C%0A%20%20%20%20fontWeight%3A%20&#x27;bold&#x27;%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&#x27;red&#x27;%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0AAppRegistry.registerComponent(&#x27;LotsOfStyles&#x27;%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 &quot;cascade&quot; 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></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 &quot;cascade&quot; 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>
(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)
releases/next/docs/testing.html
+1 -1
View File
@@ -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&#x27;s recommended that you enforce tests are run with the correct configuration. It&#x27;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&#x27;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></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&#x27;s recommended that you enforce tests are run with the correct configuration. It&#x27;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&#x27;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>
(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)
releases/next/docs/timers.html
+1 -1
View File
@@ -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></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-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)
releases/next/docs/troubleshooting.html
+1 -1
View File
@@ -6,7 +6,7 @@ sudo chown <span class="token operator">-</span>R $USER <span class="token opera
<span class="token string">&#x27;RCTWebSocket&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span></div><p>Next, make sure you have run <code>pod install</code> and that a <code>Pods/</code> directory has been created in your project with React installed. CocoaPods will instruct you to use the generated <code>.xcworkspace</code> file henceforth to be able to use these installed dependencies.</p><h4><a class="anchor" name="argument-list-too-long-recursive-header-expansion-failed"></a>Argument list too long: recursive header expansion failed <a class="hash-link" href="docs/troubleshooting.html#argument-list-too-long-recursive-header-expansion-failed">#</a></h4><p>In the project&#x27;s build settings, <code>User Search Header Paths</code> and <code>Header Search Paths</code> are two configs that specify where Xcode should look for <code>#import</code> header files specified in the code. For Pods, CocoaPods uses a default array of specific folders to look in. Verify that this particular config is not overwritten, and that none of the folders configured are too large. If one of the folders is a large folder, Xcode will attempt to recursively search the entire directory and throw above error at some point.</p><p>To revert the <code>User Search Header Paths</code> and <code>Header Search Paths</code> build settings to their defaults set by CocoaPods - select the entry in the Build Settings panel, and hit delete. It will remove the custom override and return to the CocoaPod defaults.</p><h3><a class="anchor" name="no-transports-available"></a>No transports available <a class="hash-link" href="docs/troubleshooting.html#no-transports-available">#</a></h3><p>React Native implements a polyfill for WebSockets. These <a href="https://github.com/facebook/react-native/blob/master/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js" target="_blank">polyfills</a> are initialized as part of the react-native module that you include in your application through <code>import React from &#x27;react-native&#x27;</code>. If you load another module that requires WebSockets, such as <a href="https://github.com/facebook/react-native/issues/3645" target="_blank">Firebase</a>, be sure to load/require it after react-native:</p><div class="prism language-javascript">import React from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
import Firebase from <span class="token string">&#x27;firebase&#x27;</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="shell-command-unresponsive-exception"></a>Shell Command Unresponsive Exception <a class="hash-link" href="docs/troubleshooting.html#shell-command-unresponsive-exception">#</a></h2><p>If you encounter a ShellCommandUnresponsiveException exception such as:</p><div class="prism language-javascript">Execution failed <span class="token keyword">for</span> task <span class="token string">&#x27;:app:installDebug&#x27;</span><span class="token punctuation">.</span>
com<span class="token punctuation">.</span>android<span class="token punctuation">.</span>builder<span class="token punctuation">.</span>testing<span class="token punctuation">.</span>api<span class="token punctuation">.</span>DeviceException<span class="token punctuation">:</span> com<span class="token punctuation">.</span>android<span class="token punctuation">.</span>ddmlib<span class="token punctuation">.</span>ShellCommandUnresponsiveException</div><p>Try <a href="https://github.com/facebook/react-native/issues/2720" target="_blank">downgrading your Gradle version to 1.2.3</a> in <code>android/build.gradle</code>.</p><h2><a class="anchor" name="react-native-init-hangs"></a>react-native init hangs <a class="hash-link" href="docs/troubleshooting.html#react-native-init-hangs">#</a></h2><p>If you run into issues where running <code>react-native init</code> hangs in your system, try running it again in verbose mode and refering to <a href="https://github.com/facebook/react-native/issues/2797" target="_blank">#2797</a> for common causes:</p><div class="prism language-javascript">react<span class="token operator">-</span>native init <span class="token operator">--</span>verbose</div></div><div class="docs-prevnext"></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>
com<span class="token punctuation">.</span>android<span class="token punctuation">.</span>builder<span class="token punctuation">.</span>testing<span class="token punctuation">.</span>api<span class="token punctuation">.</span>DeviceException<span class="token punctuation">:</span> com<span class="token punctuation">.</span>android<span class="token punctuation">.</span>ddmlib<span class="token punctuation">.</span>ShellCommandUnresponsiveException</div><p>Try <a href="https://github.com/facebook/react-native/issues/2720" target="_blank">downgrading your Gradle version to 1.2.3</a> in <code>android/build.gradle</code>.</p><h2><a class="anchor" name="react-native-init-hangs"></a>react-native init hangs <a class="hash-link" href="docs/troubleshooting.html#react-native-init-hangs">#</a></h2><p>If you run into issues where running <code>react-native init</code> hangs in your system, try running it again in verbose mode and refering to <a href="https://github.com/facebook/react-native/issues/2797" target="_blank">#2797</a> for common causes:</p><div class="prism language-javascript">react<span class="token operator">-</span>native init <span class="token operator">--</span>verbose</div></div><div class="docs-prevnext"></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)
releases/next/docs/tutorial.html
+1 -1
View File
@@ -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">&#x27;HelloWorldApp&#x27;</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">&gt;</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.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%20%7D%20from%20&#x27;react-native&#x27;%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(&#x27;HelloWorldApp&#x27;%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&#x27;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&#x27;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&#x27;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>() =&gt;</code> syntax in the example above are all ES2015 features. If you aren&#x27;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>&lt;Text&gt;Hello world!&lt;/Text&gt;</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>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, you use React components. In this case, <code>&lt;Text&gt;</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&#x27;s registering it with the <code>AppRegistry</code>. When you&#x27;re building a React Native app, you&#x27;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&#x27;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&#x27;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&#x27;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&#x27;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></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&#x27;s registering it with the <code>AppRegistry</code>. When you&#x27;re building a React Native app, you&#x27;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&#x27;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&#x27;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&#x27;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&#x27;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>
(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)
releases/next/docs/upgrading.html
+1 -1
View File
@@ -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&#x27;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 &quot;Run Script&quot; step to your project&#x27;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 &quot;react-native: command not found&quot;. 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></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&#x27;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 &quot;Run Script&quot; step to your project&#x27;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 &quot;react-native: command not found&quot;. 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>
(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)
releases/next/docs/using-a-listview.html
+1 -1
View File
@@ -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">&#x27;AwesomeProject&#x27;</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">&gt;</span> ListViewBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></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></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">&#x27;AwesomeProject&#x27;</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">&gt;</span> ListViewBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></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>
(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)
releases/next/docs/using-a-scrollview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/using-navigators.html
+1 -1
View File
@@ -95,7 +95,7 @@ class <span class="token class-name">MyScene</span> extends <span class="token c
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></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&#x27;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></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&#x27;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>
(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)
releases/next/img/survey.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB