mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -54,11 +54,11 @@
|
||||
duration<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_animateToClosedPositionDuringBounce<span 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><h2><a class="anchor" name="maintaining-your-rtl-ready-app"></a>Maintaining Your RTL-ready App <a class="hash-link" href="#maintaining-your-rtl-ready-app">#</a></h2><p>Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank"><code>I18nManager</code></a> provides the <code>forceRTL()</code> function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the UIExplorer:</p><span><p align="center">
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><h2><a class="anchor" name="maintaining-your-rtl-ready-app"></a>Maintaining Your RTL-ready App <a class="hash-link" href="#maintaining-your-rtl-ready-app">#</a></h2><p>Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank"><code>I18nManager</code></a> provides the <code>forceRTL()</code> function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the RNTester:</p><span><p align="center">
|
||||
<img src="/react-native/blog/img/rtl-demo-forcertl.png" width="300">
|
||||
</p>
|
||||
|
||||
</span><div class="prism language-javascript"><UIExplorerBlock title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'Quickly Test RTL Layout'</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</span><div class="prism language-javascript"><RNTesterBlock title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'Quickly Test RTL Layout'</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>flexDirectionRow<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>switchRowTextView<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
forceRTL
|
||||
@@ -70,7 +70,7 @@
|
||||
value<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>isRTL<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>RNTesterBlock<span class="token operator">></span>
|
||||
|
||||
_onDirectionChange <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
I18nManager<span class="token punctuation">.</span><span class="token function">forceRTL<span class="token punctuation">(</span></span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -81,7 +81,7 @@ _onDirectionChange <span class="token operator">=</span> <span class="token punc
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span></div><p>When working on a new feature, you can easily toggle this button and reload the app to see RTL layout. The benefit is you won't need to change the language setting to test, however some text alignment won't change, as explained in the next section. Therefore, it's always a good idea to test your app in the RTL language before launching.</p><h2><a class="anchor" name="limitations-and-future-plan"></a>Limitations and Future Plan <a class="hash-link" href="#limitations-and-future-plan">#</a></h2><p>The RTL support should cover most of the UX in your app; however, there are some limitations for now:</p><ul><li>Text alignment behaviors differ in iOS and Android<ul><li>In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned.</li><li>In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment.</li></ul></li></ul><ul><li><p>There is no "true" left/right</p><p> As discussed before, we map the <code>left</code>/<code>right</code> styles from the JS side to <code>start</code>/<code>end</code>, all <code>left</code> in code for RTL layout becomes "right" on screen, and <code>right</code> in code becomes "left" on screen. This is convenient because you don't need to change your product code too much, but it means there is no way to specify "true left" or "true right" in the code. In the future, allowing a component to control its direction regardless of the language may be necessary.</p></li><li><p>Make RTL support for gestures and animations more developer friendly</p><p> Currently, there is still some programming effort required to make gestures and animations RTL compatible.
|
||||
In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.</p></li></ul><h2><a class="anchor" name="try-it-out"></a>Try it Out! <a class="hash-link" href="#try-it-out">#</a></h2><p>Check out the <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/RTLExample.js" target="_blank"><code>RTLExample</code></a> in the <code>UIExplorer</code> to understand more about RTL support, and let us know how it works for you!</p><p>Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!</p></div></div><div><aside class="author-info"><div class="author-image"><span class="the-image" style="background-image:url(https://avatars0.githubusercontent.com/u/13987140?v=3&s=128);"></span></div><p class="posted-on">Posted on <time class="date">August 19, 2016</time></p><p class="name-title"><a href="https://github.com/MengjueW" target="_blank">Mengjue (Mandy) Wang</a>, <span class="title">Software Engineer Intern at Facebook</span></p></aside><aside class="entry-share"><h3 class="small-title">Share this post</h3><div class="social-buttons"><div class="fb-like" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div><a href="https://twitter.com/share" class="twitter-share-button" data-text="Right-to-Left Layout Support For React Native Apps" data-url="http://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html" data-related="reactnative" data-show-count="false">Tweet</a></div></aside></div></article></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.</p></li></ul><h2><a class="anchor" name="try-it-out"></a>Try it Out! <a class="hash-link" href="#try-it-out">#</a></h2><p>Check out the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/RTLExample.js" target="_blank"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p><p>Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!</p></div></div><div><aside class="author-info"><div class="author-image"><span class="the-image" style="background-image:url(https://avatars0.githubusercontent.com/u/13987140?v=3&s=128);"></span></div><p class="posted-on">Posted on <time class="date">August 19, 2016</time></p><p class="name-title"><a href="https://github.com/MengjueW" target="_blank">Mengjue (Mandy) Wang</a>, <span class="title">Software Engineer Intern at Facebook</span></p></aside><aside class="entry-share"><h3 class="small-title">Share this post</h3><div class="social-buttons"><div class="fb-like" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div><a href="https://twitter.com/share" class="twitter-share-button" data-text="Right-to-Left Layout Support For React Native Apps" data-url="http://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html" data-related="reactnative" data-show-count="false">Tweet</a></div></aside></div></article></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></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)
|
||||
|
||||
@@ -186,13 +186,13 @@ the animation will always run a frame behind the gesture due to the async nature
|
||||
</span> <span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">></span>
|
||||
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Animated<span class="token punctuation">.</span>ScrollView<span class="token operator">></span></div><p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/" target="_blank">UIExplorer sample app</a>,
|
||||
<<span class="token operator">/</span>Animated<span class="token punctuation">.</span>ScrollView<span class="token operator">></span></div><p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/RNTester/" target="_blank">RNTester app</a>,
|
||||
then loading the Native Animated Example.
|
||||
You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NativeAnimationsExample.js" target="_blank">source code</a> to learn how these examples were produced.</p><h4><a class="anchor" name="caveats"></a>Caveats <a class="hash-link" href="docs/animations.html#caveats">#</a></h4><p>Not everything you can do with <code>Animated</code> is currently supported by the native driver.
|
||||
You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js" target="_blank">source code</a> to learn how these examples were produced.</p><h4><a class="anchor" name="caveats"></a>Caveats <a class="hash-link" href="docs/animations.html#caveats">#</a></h4><p>Not everything you can do with <code>Animated</code> is currently supported by the native driver.
|
||||
The main limitation is that you can only animate non-layout properties:
|
||||
things like <code>transform</code>, <code>opacity</code> and <code>backgroundColor</code> will work, but flexbox and position properties will not.
|
||||
When using <code>Animated.event</code>, it will only work with direct events and not bubbling events.
|
||||
This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p><h3><a class="anchor" name="additional-examples"></a>Additional examples <a class="hash-link" href="docs/animations.html#additional-examples">#</a></h3><p>The UIExplorer sample app has various examples of <code>Animated</code> in use:</p><ul><li><a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/js/AnimatedGratuitousApp" target="_blank">AnimatedGratuitousApp</a></li><li><a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NativeAnimationsExample.js" target="_blank">NativeAnimationsExample</a></li></ul><h2><a class="anchor" name="layoutanimation-api"></a><code>LayoutAnimation</code> API <a class="hash-link" href="docs/animations.html#layoutanimation-api">#</a></h2><p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code>
|
||||
This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p><h3><a class="anchor" name="additional-examples"></a>Additional examples <a class="hash-link" href="docs/animations.html#additional-examples">#</a></h3><p>The RNTester app has various examples of <code>Animated</code> in use:</p><ul><li><a href="https://github.com/facebook/react-native/tree/master/Examples/RNTester/js/AnimatedGratuitousApp" target="_blank">AnimatedGratuitousApp</a></li><li><a href="https://github.com/facebook/react-native/blob/master/Examples/RNTester/js/NativeAnimationsExample.js" target="_blank">NativeAnimationsExample</a></li></ul><h2><a class="anchor" name="layoutanimation-api"></a><code>LayoutAnimation</code> API <a class="hash-link" href="docs/animations.html#layoutanimation-api">#</a></h2><p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code>
|
||||
animations that will be used for all views in the next render/layout cycle.
|
||||
This is useful for doing flexbox layout updates without bothering to measure or
|
||||
calculate specific properties in order to animate them directly, and is
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -74,7 +74,7 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F
|
||||
newFrame<span class="token punctuation">.</span>size <span class="token operator">=</span> rootView<span class="token punctuation">.</span>intrinsicContentSize<span class="token punctuation">;</span>
|
||||
|
||||
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> newFrame<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the example <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-prev" href="docs/linking-libraries-ios.html#content">← Prev</a><a class="docs-next" href="docs/building-for-apple-tv.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/CommunicationIOS.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the exmaple <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>'s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-prev" href="docs/linking-libraries-ios.html#content">← Prev</a><a class="docs-next" href="docs/building-for-apple-tv.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/CommunicationIOS.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -47,7 +47,7 @@ native event object:</p><div class="prism language-javascript">onPanResponderMov
|
||||
<View <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">.</span>_panResponder<span class="token punctuation">.</span>panHandlers<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><h3><a class="anchor" name="working-example"></a>Working Example <a class="hash-link" href="docs/panresponder.html#working-example">#</a></h3><p>To see it in action, try the
|
||||
<a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/PanResponderExample.js" target="_blank">PanResponder example in UIExplorer</a></p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/panresponder.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="create"></a><span class="methodType">static </span>create<span class="methodType">(config)</span> <a class="hash-link" href="docs/panresponder.html#create">#</a></h4><div><p>@param {object} config Enhanced versions of all of the responder callbacks
|
||||
<a href="https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js" target="_blank">PanResponder example in RNTester</a></p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/panresponder.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="create"></a><span class="methodType">static </span>create<span class="methodType">(config)</span> <a class="hash-link" href="docs/panresponder.html#create">#</a></h4><div><p>@param {object} config Enhanced versions of all of the responder callbacks
|
||||
that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the
|
||||
<code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with
|
||||
<code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks. For
|
||||
|
||||
@@ -4,8 +4,8 @@ $ npm run flow</div><h2><a class="anchor" name="android"></a>Android <a class="h
|
||||
javac <span class="token number">1.8</span><span class="token punctuation">.</span>0_111</div><p>The version string <code>1.8.x_xxx</code> corresponds to JDK 8.</p><p>You also need to install the <a href="https://buckbuild.com/setup/install.html" target="_blank">Buck build tool</a>.</p><p>To run the Android unit 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><p>It's a good idea to add an Android unit test whenever you are working on code that can be tested by Java code alone. The Android unit tests live under <a href="https://github.com/facebook/react-native/tree/master/ReactAndroid/src/test/java/com/facebook/react" target="_blank"><code>ReactAndroid/src/tests</code></a>, so you can browse through that directory for good examples of tests.</p><h3><a class="anchor" name="integration-tests"></a>Integration Tests <a class="hash-link" href="docs/testing.html#integration-tests">#</a></h3><p>To run the integration tests, you need to install the Android NDK. See <a href="docs/android-building-from-source.html#prerequisites" target="_blank">Prerequisites</a>.</p><p>You also need to install the <a href="https://buckbuild.com/setup/install.html" target="_blank">Buck build tool</a>.</p><p>We recommend running the Android integration tests in an emulator, although you can also use a real Android device. It's a good idea to keep the emulator running with a visible window. That way if your tests stall, you can look at the emulator to debug.</p><p>Some devices and some emulator configurations may not work with the tests. We do maintain an emulator configuration that works, as the standard for testing. To run this emulator config:</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>emulator<span class="token punctuation">.</span>sh</div><p>Once you have an emulator running, to run the integration 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>integration<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><p>The integration tests should only take a few minutes to run on a modern developer machine.</p><p>It's a good idea to add an Android integration test whenever you are working on code that needs both JavaScript and Java to be tested in conjunction. The Android integration tests live under <a href="https://github.com/facebook/react-native/tree/master/ReactAndroid/src/androidTest/java/com/facebook/react/tests" target="_blank"><code>ReactAndroid/src/androidTest</code></a>, so you can browse through that directory for good examples of tests.</p><h2><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/testing.html#ios">#</a></h2><h3><a class="anchor" name="integration-tests"></a>Integration Tests <a class="hash-link" href="docs/testing.html#integration-tests">#</a></h3><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>. </p><p>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. </p><p>See the following for example usage and integration points:</p><ul><li><a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a></li><li><a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a></li><li><a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank"><code>IntegrationTestsApp.js</code></a></li></ul><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode, or by running the following in the command line on macOS:</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>objc<span class="token operator">-</span>test<span class="token operator">-</span>ios<span class="token punctuation">.</span>sh</div><blockquote><p>Your Xcode install will come with a variety of Simulators running the latest OS. You may need to manually create a new Simulator to match what the <code>XCODE_DESTINATION</code> param in the test script.</p></blockquote><h3><a class="anchor" name="screenshot-snapshot-tests"></a>Screenshot/Snapshot Tests <a class="hash-link" href="docs/testing.html#screenshot-snapshot-tests">#</a></h3><p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p><h2><a class="anchor" name="apple-tv"></a>Apple TV <a class="hash-link" href="docs/testing.html#apple-tv">#</a></h2><p>The same tests discussed above for iOS will also run on tvOS. In the UIExplorer Xcode project, select the UIExplorer-tvOS target, and you can follow the same steps above to run the tests in Xcode.</p><p>You can run Apple TV unit and integration tests locally by running the following in the command line on macOS:</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>integration<span class="token operator">-</span>tests<span class="token punctuation">.</span>sh</div><p>The integration tests should only take a few minutes to run on a modern developer machine.</p><p>It's a good idea to add an Android integration test whenever you are working on code that needs both JavaScript and Java to be tested in conjunction. The Android integration tests live under <a href="https://github.com/facebook/react-native/tree/master/ReactAndroid/src/androidTest/java/com/facebook/react/tests" target="_blank"><code>ReactAndroid/src/androidTest</code></a>, so you can browse through that directory for good examples of tests.</p><h2><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/testing.html#ios">#</a></h2><h3><a class="anchor" name="integration-tests"></a>Integration Tests <a class="hash-link" href="docs/testing.html#integration-tests">#</a></h3><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>. </p><p>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. </p><p>See the following for example usage and integration points:</p><ul><li><a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a></li><li><a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterIntegrationTests.m" target="_blank"><code>RNTesterIntegrationTests.m</code></a></li><li><a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank"><code>IntegrationTestsApp.js</code></a></li></ul><p>You can run integration tests locally with cmd+U in the IntegrationTest and RNTester apps in Xcode, or by running the following in the command line on macOS:</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>objc<span class="token operator">-</span>test<span class="token operator">-</span>ios<span class="token punctuation">.</span>sh</div><blockquote><p>Your Xcode install will come with a variety of Simulators running the latest OS. You may need to manually create a new Simulator to match what the <code>XCODE_DESTINATION</code> param in the test script.</p></blockquote><h3><a class="anchor" name="screenshot-snapshot-tests"></a>Screenshot/Snapshot Tests <a class="hash-link" href="docs/testing.html#screenshot-snapshot-tests">#</a></h3><p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterSnapshotTests.m#L42" target="_blank">RNTester/RNTesterSnapshotTests.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><h2><a class="anchor" name="apple-tv"></a>Apple TV <a class="hash-link" href="docs/testing.html#apple-tv">#</a></h2><p>The same tests discussed above for iOS will also run on tvOS. In the RNTester Xcode project, select the RNTester-tvOS target, and you can follow the same steps above to run the tests in Xcode.</p><p>You can run Apple TV unit and integration tests locally by running the following in the command line on macOS:</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>objc<span class="token operator">-</span>test<span class="token operator">-</span>tvos<span class="token punctuation">.</span>sh <span class="token punctuation">(</span>make sure the line `TEST<span class="token operator">=</span><span class="token string">"test"</span>` is uncommented<span class="token punctuation">)</span></div><h2><a class="anchor" name="end-to-end-tests"></a>End-to-end tests <a class="hash-link" href="docs/testing.html#end-to-end-tests">#</a></h2><p>Finally, make sure end-to-end tests run successfully by executing the following script:</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>test<span class="token operator">-</span>manual<span class="token operator">-</span>e2e<span class="token punctuation">.</span>sh</div><h2><a class="anchor" name="website"></a>Website <a class="hash-link" href="docs/testing.html#website">#</a></h2><p>The React Native website is hosted on GitHub pages and is automatically generated from Markdown sources as well as comments in the JavaScript source files. It's always a good idea to check that the website is generated properly whenever you edit the docs.</p><div class="prism language-javascript">$ cd website
|
||||
$ npm install
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 585 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user