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
@@ -6,7 +6,7 @@
|
||||
</span><h2><a class="anchor" name="overview-changes-in-rn-for-rtl-support"></a>Overview Changes in RN for RTL support <a class="hash-link" href="#overview-changes-in-rn-for-rtl-support">#</a></h2><p><a href="https://github.com/facebook/css-layout" target="_blank">css-layout</a> already has a concept of <code>start</code> and <code>end</code> for the layout. In the Left-to-Right (LTR) layout, <code>start</code> means <code>left</code>, and <code>end</code> means <code>right</code>. But in RTL, <code>start</code> means <code>right</code>, and <code>end</code> means <code>left</code>. This means we can make RN depend on the <code>start</code> and <code>end</code> calculation to compute the correct layout, which includes <code>position</code>, <code>padding</code>, and <code>margin</code>.</p><p>In addition, <a href="https://github.com/facebook/css-layout" target="_blank">css-layout</a> already makes each component's direction inherits from its parent. This means, we simply need to set the direction of the root component to RTL, and the entire app will flip.</p><p>The diagram below describes the changes at high level:</p><p><img src="/react-native/blog/img/rtl-rn-core-updates.png" alt=""></p><p>These include:</p><ul><li><a href="https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f" target="_blank">css-layout RTL support for absolute positioning</a></li><li>mapping <code>left</code> and <code>right</code> to <code>start</code> and <code>end</code> in RN core implementation for shadow nodes</li><li>and exposing a <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank">bridged utility module</a> to help control the RTL layout</li></ul><p>With this update, when you allow RTL layout for your app:</p><ul><li>every component layout will flip horizontally</li><li>some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components</li><li>minimal additional effort may be needed to make your app fully RTL-ready</li></ul><h2><a class="anchor" name="making-an-app-rtl-ready"></a>Making an App RTL-ready <a class="hash-link" href="#making-an-app-rtl-ready">#</a></h2><ol><li><p>To support RTL, you should first add the RTL language bundles to your app.</p><ul><li>See the general guides from <a href="https://developer.apple.com/library/ios/documentation/MacOSX/Conceptual/BPInternational/LocalizingYourApp/LocalizingYourApp.html#//apple_ref/doc/uid/10000171i-CH5-SW1" target="_blank">iOS</a> and <a href="https://developer.android.com/training/basics/supporting-devices/languages.html" target="_blank">Android</a>.</li></ul></li><li><p>Allow RTL layout for your app by calling the <code>allowRTL()</code> function at the beginning of native code. We provided this utility to only apply to an RTL layout when your app is ready. Here is an example:</p><p>iOS:</p><div class="prism language-objc"><span class="token comment" spellcheck="true"> // in AppDelegate.m
|
||||
</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>RCTI18nUtil sharedInstance<span class="token punctuation">]</span> allowRTL<span class="token punctuation">:</span>YES<span class="token punctuation">]</span><span class="token punctuation">;</span></div><p>Android:</p><div class="prism language-java"><span class="token comment" spellcheck="true"> // in MainActivity.java
|
||||
</span> I18nUtil sharedI18nUtilInstance <span class="token operator">=</span> I18nUtil<span class="token punctuation">.</span><span class="token function">getInstance<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
sharedI18nUtilInstance<span class="token punctuation">.</span><span class="token function">setAllowRTL<span class="token punctuation">(</span></span>context<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></li><li><p>For Android, you need add <code>android:supportsRtl="true"</code> to the <a href="http://developer.android.com/guide/topics/manifest/application-element.html" target="_blank"><code><application></code></a> element in <code>AndroidManifest.xml</code> file.</p></li></ol><p>Now, when you recompile your app and change the device language to an RTL language (e.g. Arabic or Hebrew), your app layout should change to RTL automatically.</p><h2><a class="anchor" name="writing-rtl-ready-components"></a>Writing RTL-ready Components <a class="hash-link" href="#writing-rtl-ready-components">#</a></h2><p>In general, most components are already RTL-ready, for example:</p><ul><li><p>Left-to-Right Layout</p><span><p align="left">
|
||||
sharedI18nUtilInstance<span class="token punctuation">.</span><span class="token function">allowRTL<span class="token punctuation">(</span></span>context<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></li><li><p>For Android, you need add <code>android:supportsRtl="true"</code> to the <a href="http://developer.android.com/guide/topics/manifest/application-element.html" target="_blank"><code><application></code></a> element in <code>AndroidManifest.xml</code> file.</p></li></ol><p>Now, when you recompile your app and change the device language to an RTL language (e.g. Arabic or Hebrew), your app layout should change to RTL automatically.</p><h2><a class="anchor" name="writing-rtl-ready-components"></a>Writing RTL-ready Components <a class="hash-link" href="#writing-rtl-ready-components">#</a></h2><p>In general, most components are already RTL-ready, for example:</p><ul><li><p>Left-to-Right Layout</p><span><p align="left">
|
||||
<img src="/react-native/blog/img/rtl-demo-listitem-ltr.png" width="300">
|
||||
</p>
|
||||
</span></li><li><p>Right-to-Left Layout</p><span><p align="left">
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -12,7 +12,7 @@ time.</p><p><a href="http://easings.net/#easeInCubic">http://easings.net/#easeIn
|
||||
n = 5: <a href="http://easings.net/#easeInQuint">http://easings.net/#easeInQuint</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sin"></a><span class="methodType">static </span>sin<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#sin">#</a></h4><div><p>A sinusoidal function.</p><p><a href="http://easings.net/#easeInSine">http://easings.net/#easeInSine</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="circle"></a><span class="methodType">static </span>circle<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#circle">#</a></h4><div><p>A circular function.</p><p><a href="http://easings.net/#easeInCirc">http://easings.net/#easeInCirc</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="exp"></a><span class="methodType">static </span>exp<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#exp">#</a></h4><div><p>An exponential function.</p><p><a href="http://easings.net/#easeInExpo">http://easings.net/#easeInExpo</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="elastic"></a><span class="methodType">static </span>elastic<span class="methodType">(bounciness)</span> <a class="hash-link" href="docs/easing.html#elastic">#</a></h4><div><p>A simple elastic interaction, similar to a spring oscillating back and
|
||||
forth.</p><p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness
|
||||
doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
|
||||
times.</p><p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p><p>Wolfram Plots:</p><ul><li><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (bounciness = 1, default)</li><li><a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="back"></a><span class="methodType">static </span>back<span class="methodType">(s)</span> <a class="hash-link" href="docs/easing.html#back">#</a></h4><div><p>Use with <code>Animated.parallel()</code> to create a simple effect where the object
|
||||
times.</p><p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="back"></a><span class="methodType">static </span>back<span class="methodType">(s)</span> <a class="hash-link" href="docs/easing.html#back">#</a></h4><div><p>Use with <code>Animated.parallel()</code> to create a simple effect where the object
|
||||
animates back slightly as the animation starts.</p><p>Wolfram Plot:</p><ul><li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="bounce"></a><span class="methodType">static </span>bounce<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#bounce">#</a></h4><div><p>Provides a simple bouncing effect.</p><p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="bezier"></a><span class="methodType">static </span>bezier<span class="methodType">(x1, y1, x2, y2)</span> <a class="hash-link" href="docs/easing.html#bezier">#</a></h4><div><p>Provides a cubic bezier curve, equivalent to CSS Transitions'
|
||||
<code>transition-timing-function</code>.</p><p>A useful tool to visualize cubic bezier curves can be found at
|
||||
<a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="in"></a><span class="methodType">static </span>in<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#in">#</a></h4><div><p>Runs an easing function forwards.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="out"></a><span class="methodType">static </span>out<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#out">#</a></h4><div><p>Runs an easing function backwards.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="inout"></a><span class="methodType">static </span>inOut<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#inout">#</a></h4><div><p>Makes any easing function symmetrical. The easing function will run
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// skip this line if using Create React Native App
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> JustifyContentBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20JustifyContentBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60justifyContent%60%20to%20%60center%60.%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60flexDirection%60%20to%20%60row%60.%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'space-between'%2C%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20JustifyContentBasics)%3B" frameborder="0"></iframe></div><h4><a class="anchor" name="align-items"></a>Align Items <a class="hash-link" href="docs/flexbox.html#align-items">#</a></h4><p>Adding <code>alignItems</code> to a component's style determines the <strong>alignment</strong> of children along the <strong>secondary axis</strong> (if the primary axis is <code>row</code>, then the secondary is <code>column</code>, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are <code>flex-start</code>, <code>center</code>, <code>flex-end</code>, and <code>stretch</code>.</p><blockquote><p>For <code>stretch</code> to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting <code>alignItems: stretch</code> does nothing until the <code>width: 50</code> is removed from the children.</p></blockquote><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> JustifyContentBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20JustifyContentBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60justifyContent%60%20to%20%60center%60.%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60flexDirection%60%20to%20%60row%60.%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'space-between'%2C%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20JustifyContentBasics)%3B" frameborder="0"></iframe></div><h4><a class="anchor" name="align-items"></a>Align Items <a class="hash-link" href="docs/flexbox.html#align-items">#</a></h4><p>Adding <code>alignItems</code> to a component's style determines the <strong>alignment</strong> of children along the <strong>secondary axis</strong> (if the primary axis is <code>row</code>, then the secondary is <code>column</code>, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are <code>flex-start</code>, <code>center</code>, <code>flex-end</code>, and <code>stretch</code>.</p><blockquote><p>For <code>stretch</code> to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting <code>alignItems: stretch</code> does nothing until the <code>height: 50</code> is removed from the children.</p></blockquote><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">AlignItemsBasics</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -183,7 +183,7 @@ RCTRootView <span class="token operator">*</span>rootView <span class="token ope
|
||||
<span class="token comment" spellcheck="true"> // Date is ready to use!
|
||||
</span> <span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function">constantsToExport<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token punctuation">[</span><span class="token builtin">String</span><span class="token punctuation">:</span> <span class="token builtin">Any</span><span class="token punctuation">]</span><span class="token operator">!</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">func</span> <span class="token function">constantsToExport<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token punctuation">[</span><span class="token builtin">String</span><span class="token punctuation">:</span> <span class="token builtin">Any</span><span class="token punctuation">]</span><span class="token operator">!</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string">"someKey"</span><span class="token punctuation">:</span> <span class="token string">"someValue"</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -195,7 +195,7 @@ RCTRootView <span class="token operator">*</span>rootView <span class="token ope
|
||||
<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>
|
||||
|
||||
<span class="token keyword">@end</span></div><p>For those of you new to Swift and Objective-C, whenever you <a href="https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html" target="_blank">mix the two languages in an iOS project</a>, you will also need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode <code>File>New File</code> menu option. You will need to import <code>RCTBridgeModule.h</code> in this header file.</p><div class="prism language-objectivec"><span class="token comment" spellcheck="true">// CalendarManager-Bridging-Header.h
|
||||
</span><span class="token macro">#<span class="token directive">import</span> <React/RCTBridgeModule.h></span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/testing.html#content">← Previous</a><a class="docs-next btn" href="docs/native-components-ios.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/NativeModulesIOS.md">Improve this page</a> by sending 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">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</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">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></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><span class="token macro">#<span class="token directive">import</span> <React/RCTBridgeModule.h></span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>_RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p><blockquote><p><strong>Important when making third party modules</strong>: Static libraries with Swift are only supported in Xcode 9 and later. In order for the Xcode project to build when you use Swift in the iOS static library you include in the module, your main app project must contain Swift code and a bridging header itself. If your app project does not contain any Swift code, a workaround can be a single empty .swift file and an empty bridging header.</p></blockquote></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/testing.html#content">← Previous</a><a class="docs-next btn" href="docs/native-components-ios.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/NativeModulesIOS.md">Improve this page</a> by sending 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">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</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">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></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)
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>majorVersionIOS <span class="token operator"><=</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Work around a change in behavior'</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-sh">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"><span class="token keyword">const</span> BigButton <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./BigButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>React Native will automatically pick up the right file based on the running platform.</p></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/components.html#content">← Previous</a><a class="docs-next btn" href="docs/navigation.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/PlatformSpecificInformation.md">Improve this page</a> by sending 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">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</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">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></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>
|
||||
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"><span class="token keyword">const</span> BigButton <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./BigButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>React Native will automatically pick up the right file based on the running platform.</p></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/components-and-apis.html#content">← Previous</a><a class="docs-next btn" href="docs/navigation.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/PlatformSpecificInformation.md">Improve this page</a> by sending 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">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</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">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></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)
|
||||
|
||||
@@ -42,7 +42,7 @@ functionality for the ScrollView. Only works for vertical ScrollViews
|
||||
<code>hidden</code>) are removed from their native backing superview when offscreen.
|
||||
This can improve scrolling performance on long lists. The default value is
|
||||
true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#scrollenabled">#</a></h4><div><p>When false, the view cannot be scrolled via touch interaction.
|
||||
The default value is true.</p><p>Note that the view can be always be scrolled by calling <code>scrollTo</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.
|
||||
The default value is true.</p><p>Note that the view can always be scrolled by calling <code>scrollTo</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices?: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/scrollview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
|
||||
top of the screen when scrolling. For example, passing
|
||||
|
||||
@@ -32,7 +32,7 @@ fixed number of pixels to offset the final target position, e.g. to compensate f
|
||||
headers.</p><p>Note: cannot scroll to locations outside the render window without specifying the
|
||||
<code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/sectionlist.html#recordinteraction">#</a></h4><div><p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
|
||||
if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by
|
||||
taps on items or by navigation actions.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/sectionlist.html#flashscrollindicators">#</a></h4><div><p>Displays the scroll indicators momentarily.</p></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/sectionlist.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/sectionlist.html#props">#</a></h4><strong>Type:</strong><br>IntersectionTypeAnnotation</div></div></span></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Lists/SectionList.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/scrollview.html#content">← Prev</a><a class="docs-next" href="docs/segmentedcontrolios.html#content">Next →</a></div></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">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</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">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></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>
|
||||
taps on items or by navigation actions.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/sectionlist.html#flashscrollindicators">#</a></h4><div><p>Displays the scroll indicators momentarily.</p></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/sectionlist.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="sectionbase"></a>SectionBase <a class="hash-link" href="docs/sectionlist.html#sectionbase">#</a></h4><strong>Type:</strong><br>ObjectTypeAnnotation</div><div class="prop"><h4 class="propTitle"><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/sectionlist.html#props">#</a></h4><strong>Type:</strong><br>IntersectionTypeAnnotation</div></div></span></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Lists/SectionList.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/scrollview.html#content">← Prev</a><a class="docs-next" href="docs/segmentedcontrolios.html#content">Next →</a></div></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">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</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">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></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)
|
||||
|
||||
@@ -106,7 +106,7 @@ May also contain other properties from ScrollEvent but on Android contentSize
|
||||
is not provided for performance reasons.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onselectionchange"></a>onSelectionChange?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onselectionchange">#</a></h4><div><p>Callback that is called when the text input selection is changed.
|
||||
This will be called with
|
||||
<code>{ nativeEvent: { selection: { start, end } } }</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input's submit button is pressed.
|
||||
Invalid if <code>multiline={true}</code> is specified.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder?: <span class="propType">node</span> <a class="hash-link" href="docs/textinput.html#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeytype"></a>returnKeyType?: <span class="propType">enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</span> <a class="hash-link" href="docs/textinput.html#returnkeytype">#</a></h4><div><p>Determines how the return key should look. On Android you can also use
|
||||
Invalid if <code>multiline={true}</code> is specified.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeytype"></a>returnKeyType?: <span class="propType">enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</span> <a class="hash-link" href="docs/textinput.html#returnkeytype">#</a></h4><div><p>Determines how the return key should look. On Android you can also use
|
||||
<code>returnKeyLabel</code>.</p><p><em>Cross platform</em></p><p>The following values work across platforms:</p><ul><li><code>done</code></li><li><code>go</code></li><li><code>next</code></li><li><code>search</code></li><li><code>send</code></li></ul><p><em>Android Only</em></p><p>The following values work on Android only:</p><ul><li><code>none</code></li><li><code>previous</code></li></ul><p><em>iOS Only</em></p><p>The following values work on iOS only:</p><ul><li><code>default</code></li><li><code>emergency-call</code></li><li><code>google</code></li><li><code>join</code></li><li><code>route</code></li><li><code>yahoo</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="securetextentry"></a>secureTextEntry?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#securetextentry">#</a></h4><div><p>If <code>true</code>, the text input obscures the text entered so that sensitive text
|
||||
like passwords stay secure. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selecttextonfocus"></a>selectTextOnFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#selecttextonfocus">#</a></h4><div><p>If <code>true</code>, all text will automatically be selected on focus.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selection"></a>selection?: <span class="propType"><span>{<span><span><span>start: number</span>, </span><span>end: number</span></span>}</span></span> <a class="hash-link" href="docs/textinput.html#selection">#</a></h4><div><p>The start and end of the text input's selection. Set start and end to
|
||||
the same value to position the cursor.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#selectioncolor">#</a></h4><div><p>The highlight and cursor color of the text input.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType"><a href="docs/text.html#style">Text#style</a></span> <a class="hash-link" href="docs/textinput.html#style">#</a></h4><div><p>Note that not all Text styles are supported,
|
||||
|
||||
@@ -12,9 +12,13 @@
|
||||
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/timepickerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="open"></a><span class="methodType">static </span>open<span class="methodType">(options)</span> <a class="hash-link" href="docs/timepickerandroid.html#open">#</a></h4><div><p>Opens the standard Android time picker dialog.</p><p>The available keys for the <code>options</code> object are:
|
||||
<em> <code>hour</code> (0-23) - the hour to show, defaults to the current time
|
||||
</em> <code>minute</code> (0-59) - the minute to show, defaults to the current time
|
||||
* <code>is24Hour</code> (boolean) - If <code>true</code>, the picker uses the 24-hour format. If <code>false</code>,
|
||||
<em> <code>is24Hour</code> (boolean) - If <code>true</code>, the picker uses the 24-hour format. If <code>false</code>,
|
||||
the picker shows an AM/PM chooser. If undefined, the default for the current locale
|
||||
is used.</p><p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>hour</code> (0-23),
|
||||
is used.
|
||||
</em> <code>mode</code> (<code>enum('clock', 'spinner', 'default')</code>) - set the time picker mode
|
||||
- 'clock': Show a time picker in clock mode.
|
||||
- 'spinner': Show a time picker in spinner mode.
|
||||
- 'default': Show a default time picker based on Android versions.</p><p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>hour</code> (0-23),
|
||||
<code>minute</code> (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will
|
||||
still be resolved with action being <code>TimePickerAndroid.dismissedAction</code> and all the other keys
|
||||
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="timesetaction"></a><span class="methodType">static </span>timeSetAction<span class="methodType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#timesetaction">#</a></h4><div><p>A time has been selected.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="dismissedaction"></a><span class="methodType">static </span>dismissedAction<span class="methodType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.</p></div></div></div></span></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/TimePickerAndroid/TimePickerAndroid.android.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/systrace.html#content">← Prev</a><a class="docs-next" href="docs/toastandroid.html#content">Next →</a></div></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">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</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">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</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="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></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>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -13,8 +13,7 @@
|
||||
<span class="token punctuation">}</span></div><p>You can use this component to navigate back and forth in the web view's
|
||||
history and configure various properties for the web content.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/webview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/webview.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a>automaticallyAdjustContentInsets?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#automaticallyadjustcontentinsets">#</a></h4><div><p>Controls whether to adjust the content inset for web views that are
|
||||
placed behind a navigation bar, tab bar, or toolbar. The default value
|
||||
is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a>contentInset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/webview.html#contentinset">#</a></h4><div><p>The amount by which the web view content is inset from the edges of
|
||||
the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="html"></a>html?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#html">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectjavascript"></a>injectJavaScript?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#injectjavascript">#</a></h4><div><p>Function that accepts a string that will be passed to the WebView and
|
||||
is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="html"></a>html?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#html">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectjavascript"></a>injectJavaScript?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#injectjavascript">#</a></h4><div><p>Function that accepts a string that will be passed to the WebView and
|
||||
executed immediately as JavaScript.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectedjavascript"></a>injectedJavaScript?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#injectedjavascript">#</a></h4><div><p>Set this to provide JavaScript that will be injected into the web page
|
||||
when the view loads.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mediaplaybackrequiresuseraction"></a>mediaPlaybackRequiresUserAction?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#mediaplaybackrequiresuseraction">#</a></h4><div><p>Boolean that determines whether HTML5 audio and video requires the user
|
||||
to tap them before they start playing. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeconfig"></a>nativeConfig?: <span class="propType"><span>{<span><span><span>component: any</span>, </span><span><span>props: object</span>, </span><span>viewManager: object</span></span>}</span></span> <a class="hash-link" href="docs/webview.html#nativeconfig">#</a></h4><div><p>Override the native component used to render the WebView. Enables a custom native
|
||||
@@ -33,7 +32,8 @@ default on Android Kitkat and below and on iOS. The default value is <code>true<
|
||||
native full-screen controller. The default value is <code>false</code>.</p><p><strong>NOTE</strong> : In order for video to play inline, not only does this
|
||||
property need to be set to <code>true</code>, but the video element in the HTML
|
||||
document must also include the <code>webkit-playsinline</code> attribute.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#bounces">#</a></h4><div><p>Boolean value that determines whether the web view bounces
|
||||
when it reaches the edge of the content. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType"><span><span>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), </span><span>[enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')]</span></span></span> <a class="hash-link" href="docs/webview.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the web view's content.
|
||||
when it reaches the edge of the content. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a><span class="platform">ios</span>contentInset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/webview.html#contentinset">#</a></h4><div><p>The amount by which the web view content is inset from the edges of
|
||||
the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType"><span><span>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), </span><span>[enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')]</span></span></span> <a class="hash-link" href="docs/webview.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the web view's content.
|
||||
By default only phone numbers are detected.</p><p>You can provide one type or an array of many types.</p><p>Possible values for <code>dataDetectorTypes</code> are:</p><ul><li><code>'phoneNumber'</code></li><li><code>'link'</code></li><li><code>'address'</code></li><li><code>'calendarEvent'</code></li><li><code>'none'</code></li><li><code>'all'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate?: <span class="propType">ScrollView.propTypes.decelerationRate</span> <a class="hash-link" href="docs/webview.html#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
|
||||
decelerates after the user lifts their finger. You may also use the
|
||||
string shortcuts <code>"normal"</code> and <code>"fast"</code> which match the underlying iOS
|
||||
|
||||
File diff suppressed because one or more lines are too long
+2
-2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user