Updated docs for next

This commit is contained in:
Website Deployment Script
2016-07-05 19:25:56 +00:00
parent 8e6f136ee8
commit bc22305ef5
21 changed files with 297 additions and 144 deletions
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -2,9 +2,9 @@
a controlled component, so you must hook in to the <code>onDateChange</code> callback
and update the <code>date</code> prop in order for the component to update, otherwise
the user&#x27;s change will be reverted immediately to reflect <code>props.date</code> as the
source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/datepickerios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/datepickerios.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval <span class="propType">enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</span> <a class="hash-link" href="docs/datepickerios.html#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode <span class="propType">enum(&#x27;date&#x27;, &#x27;time&#x27;, &#x27;datetime&#x27;)</span> <a class="hash-link" href="docs/datepickerios.html#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange <span class="propType">function</span> <a class="hash-link" href="docs/datepickerios.html#ondatechange">#</a></h4><div><p>Date change handler.</p><p>This is called when the user changes the date or time in the UI.
source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/datepickerios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/datepickerios.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date <span class="propType">PropTypes.instanceOf(Date).isRequired</span> <a class="hash-link" href="docs/datepickerios.html#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate <span class="propType">PropTypes.instanceOf(Date)</span> <a class="hash-link" href="docs/datepickerios.html#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate <span class="propType">PropTypes.instanceOf(Date)</span> <a class="hash-link" href="docs/datepickerios.html#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval <span class="propType">PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30])</span> <a class="hash-link" href="docs/datepickerios.html#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode <span class="propType">PropTypes.oneOf([&#x27;date&#x27;, &#x27;time&#x27;, &#x27;datetime&#x27;])</span> <a class="hash-link" href="docs/datepickerios.html#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange <span class="propType">PropTypes.func.isRequired</span> <a class="hash-link" href="docs/datepickerios.html#ondatechange">#</a></h4><div><p>Date change handler.</p><p>This is called when the user changes the date or time in the UI.
The first and only argument is a Date object representing the new
date and time.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes <span class="propType">number</span> <a class="hash-link" href="docs/datepickerios.html#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>By default, the date picker will use the device&#x27;s timezone. With this
date and time.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/datepickerios.html#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>By default, the date picker will use the device&#x27;s timezone. With this
parameter, it is possible to force a certain timezone offset. For
instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/datepickerios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/DatePickerIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
+15 -5
View File
@@ -24,18 +24,28 @@ be set by the <code>drawerWidth</code> prop.</p><p>Example:</p><div class="prism
If you want to set the opacity of the drawer, use rgba. Example:</p><div class="prism language-javascript"><span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;DrawerLayoutAndroid drawerBackgroundColor<span class="token operator">=</span><span class="token string">&quot;rgba(0,0,0,0.5)&quot;</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>DrawerLayoutAndroid<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerlockmode"></a>drawerLockMode <span class="propType">enum(&#x27;unlocked&#x27;, &#x27;locked-closed&#x27;, &#x27;locked-open&#x27;)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerlockmode">#</a></h4><div><p>Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerlockmode"></a>drawerLockMode <span class="propType">ReactPropTypes.oneOf([
&#x27;unlocked&#x27;,
&#x27;locked-closed&#x27;,
&#x27;locked-open&#x27;
])</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerlockmode">#</a></h4><div><p>Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
- locked-open, meaning that the drawer will stay opened and not respond to gestures.
The drawer may still be opened and closed programmatically (<code>openDrawer</code>/<code>closeDrawer</code>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerposition"></a>drawerPosition <span class="propType">enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerposition">#</a></h4><div><p>Specifies the side of the screen from which the drawer will slide in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerwidth"></a>drawerWidth <span class="propType">number</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerwidth">#</a></h4><div><p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
from the edge of the window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">enum(&#x27;none&#x27;, &#x27;on-drag&#x27;)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
The drawer may still be opened and closed programmatically (<code>openDrawer</code>/<code>closeDrawer</code>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerposition"></a>drawerPosition <span class="propType">ReactPropTypes.oneOf([
DrawerConsts.DrawerPosition.Left,
DrawerConsts.DrawerPosition.Right
])</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerposition">#</a></h4><div><p>Specifies the side of the screen from which the drawer will slide in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerwidth"></a>drawerWidth <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerwidth">#</a></h4><div><p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
from the edge of the window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">ReactPropTypes.oneOf([
&#x27;none&#x27;, // default
&#x27;on-drag&#x27;,
])</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
- &#x27;none&#x27; (the default), drags do not dismiss the keyboard.
- &#x27;on-drag&#x27;, the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerclose"></a>onDrawerClose <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerclose">#</a></h4><div><p>Function called whenever the navigation view has been closed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondraweropen"></a>onDrawerOpen <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondraweropen">#</a></h4><div><p>Function called whenever the navigation view has been opened.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerslide"></a>onDrawerSlide <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerslide">#</a></h4><div><p>Function called whenever there is an interaction with the navigation view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerstatechanged"></a>onDrawerStateChanged <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerstatechanged">#</a></h4><div><p>Function called when the drawer state has changed. The drawer can be in 3 states:
- &#x27;on-drag&#x27;, the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerclose"></a>onDrawerClose <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerclose">#</a></h4><div><p>Function called whenever the navigation view has been closed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondraweropen"></a>onDrawerOpen <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondraweropen">#</a></h4><div><p>Function called whenever the navigation view has been opened.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerslide"></a>onDrawerSlide <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerslide">#</a></h4><div><p>Function called whenever there is an interaction with the navigation view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerstatechanged"></a>onDrawerStateChanged <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerstatechanged">#</a></h4><div><p>Function called when the drawer state has changed. The drawer can be in 3 states:
- idle, meaning there is no interaction with the navigation view happening at the time
- dragging, meaning there is currently an interaction with the navigation view
- settling, meaning that there was an interaction with the navigation view, and the
navigation view is now finishing its closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarbackgroundcolor"></a>statusBarBackgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/drawerlayoutandroid.html#statusbarbackgroundcolor">#</a></h4><div><p>Make the drawer take the entire screen and draw the background of the
navigation view is now finishing its closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView <span class="propType">ReactPropTypes.func.isRequired</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarbackgroundcolor"></a>statusBarBackgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/drawerlayoutandroid.html#statusbarbackgroundcolor">#</a></h4><div><p>Make the drawer take the entire screen and draw the background of the
status bar to allow it to open over the status bar. It will only have an
effect on API 21+.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/drawerlayoutandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="opendrawer"></a>openDrawer<span class="methodType">(0)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#opendrawer">#</a></h4><div><p>Opens the drawer.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="closedrawer"></a>closeDrawer<span class="methodType">(0)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#closedrawer">#</a></h4><div><p>Closes the drawer.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/image.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+17 -8
View File
@@ -47,15 +47,15 @@ class <span class="token class-name">DisplayAnImageWithStyle</span> extends <spa
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span>
<span class="token string">&#x27;DisplayAnImageWithStyle&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> DisplayAnImageWithStyle
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20stretch%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%20200%0A%20%20%7D%0A%7D)%3B%0A%0Aclass%20DisplayAnImageWithStyle%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.stretch%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire(&#x27;.%2Fimg%2Ffavicon.png&#x27;)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent(%0A%20%20&#x27;DisplayAnImageWithStyle&#x27;%2C%0A%20%20()%20%3D%3E%20DisplayAnImageWithStyle%0A)%3B" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/image.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
<code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onload">#</a></h4><div><p>Invoked when load completes successfully.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onloadstart">#</a></h4><div><p>Invoked on load start.</p><p>e.g., <code>onLoadStart={(e) =&gt; this.setState({loading: true})}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode <span class="propType">enum(&#x27;cover&#x27;, &#x27;contain&#x27;, &#x27;stretch&#x27;, &#x27;repeat&#x27;)</span> <a class="hash-link" href="docs/image.html#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn&#x27;t match the raw
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20stretch%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%20200%0A%20%20%7D%0A%7D)%3B%0A%0Aclass%20DisplayAnImageWithStyle%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.stretch%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire(&#x27;.%2Fimg%2Ffavicon.png&#x27;)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent(%0A%20%20&#x27;DisplayAnImageWithStyle&#x27;%2C%0A%20%20()%20%3D%3E%20DisplayAnImageWithStyle%0A)%3B" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/image.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
<code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onload">#</a></h4><div><p>Invoked when load completes successfully.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onloadstart">#</a></h4><div><p>Invoked on load start.</p><p>e.g., <code>onLoadStart={(e) =&gt; this.setState({loading: true})}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode <span class="propType">PropTypes.oneOf([&#x27;cover&#x27;, &#x27;contain&#x27;, &#x27;stretch&#x27;, &#x27;repeat&#x27;])</span> <a class="hash-link" href="docs/image.html#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn&#x27;t match the raw
image dimensions.</p><ul><li><p><code>cover</code>: Scale the image uniformly (maintain the image&#x27;s aspect ratio)
so that both dimensions (width and height) of the image will be equal
to or larger than the corresponding dimension of the view (minus padding).</p></li><li><p><code>contain</code>: Scale the image uniformly (maintain the image&#x27;s aspect ratio)
so that both dimensions (width and height) of the image will be equal to
or less than the corresponding dimension of the view (minus padding).</p></li><li><p><code>stretch</code>: Scale width and height independently, This may change the
aspect ratio of the src.</p></li><li><p><code>repeat</code>: Repeat the image to cover the frame of the view. The
image will keep it&#x27;s size and aspect ratio. (iOS only)</p></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">ImageSourcePropType</span> <a class="hash-link" href="docs/image.html#source">#</a></h4><div><p>The image source (either a remote URL or a local file resource).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/image.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span> </h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <div><p>Changes the color of all the non-transparent pixels to the tintColor.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>overlayColor <span class="propType">string</span> <div><p>When the image has rounded corners, specifying an overlayColor will
image will keep it&#x27;s size and aspect ratio. (iOS only)</p></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">ImageSourcePropType</span> <a class="hash-link" href="docs/image.html#source">#</a></h4><div><p>The image source (either a remote URL or a local file resource).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/image.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">ReactPropTypes.oneOf([&#x27;visible&#x27;, &#x27;hidden&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">ReactPropTypes.oneOf([&#x27;visible&#x27;, &#x27;hidden&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">ReactPropTypes.oneOf(Object.keys(ImageResizeMode))</span> </h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <div><p>Changes the color of all the non-transparent pixels to the tintColor.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>overlayColor <span class="propType">ReactPropTypes.string</span> <div><p>When the image has rounded corners, specifying an overlayColor will
cause the remaining space in the corners to be filled with a solid color.
This is useful in cases which are not supported by the Android
implementation of rounded corners:
@@ -65,17 +65,26 @@ background and setting the <code>overlayColor</code> to the same color
as the background.</p><p>For details of how this works under the hood, see
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></h6></div></div><div><blockquote><p><code>ImageResizeMode</code> is an <code>Enum</code> for different image resizing modes, set via the
<code>resizeMode</code> style property on <code>Image</code> components. The values are <code>contain</code>, <code>cover</code>,
<code>stretch</code>, <code>center</code>, <code>repeat</code>.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/image.html#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that&#x27;s read by the screen reader when the user interacts with
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible <span class="propType">bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="blurradius"></a><span class="platform">ios</span>blurRadius <span class="propType">number</span> <a class="hash-link" href="docs/image.html#blurradius">#</a></h4><div><p>blurRadius: the blur radius of the blur filter added to the image</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
<code>stretch</code>, <code>center</code>, <code>repeat</code>.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/image.html#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that&#x27;s read by the screen reader when the user interacts with
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="blurradius"></a><span class="platform">ios</span>blurRadius <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/image.html#blurradius">#</a></h4><div><p>blurRadius: the blur radius of the blur filter added to the image</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
by <code>capInsets</code> will stay a fixed size, but the center content and borders
of the image will be stretched. This is useful for creating resizable
rounded buttons, shadows, and other resizable assets. More info in the
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets" target="_blank">official Apple documentation</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultsource"></a><span class="platform">ios</span>defaultSource <span class="propType">{uri: string, width: number, height: number, scale: number}, number</span> <a class="hash-link" href="docs/image.html#defaultsource">#</a></h4><div><p>A static image to display while loading the image source.</p><ul><li><code>uri</code> - a string representing the resource identifier for the image, which
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets" target="_blank">official Apple documentation</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultsource"></a><span class="platform">ios</span>defaultSource <span class="propType">PropTypes.oneOfType([
// TODO: Tooling to support documenting these directly and having them display in the docs.
PropTypes.shape({
uri: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
scale: PropTypes.number,
}),
PropTypes.number,
])</span> <a class="hash-link" href="docs/image.html#defaultsource">#</a></h4><div><p>A static image to display while loading the image source.</p><ul><li><code>uri</code> - a string representing the resource identifier for the image, which
should be either a local file path or the name of a static image resource
(which should be wrapped in the <code>require(&#x27;./path/to/image.png&#x27;)</code> function).</li><li><code>width</code>, <code>height</code> - can be specified if known at build time, in which case
these will be used to set the default <code>&lt;Image/&gt;</code> component dimensions.</li><li><code>scale</code> - used to indicate the scale factor of the image. Defaults to 1.0 if
unspecified, meaning that one image pixel equates to one display point / DIP.</li><li><code>number</code> - Opaque type returned by something like <code>require(&#x27;./image.jpg&#x27;)</code>.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a><span class="platform">ios</span>onError <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onprogress"></a><span class="platform">ios</span>onProgress <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onprogress">#</a></h4><div><p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/image.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsize"></a><span class="methodType">static </span>getSize<span class="methodType">(uri, success, failure): </span> <a class="hash-link" href="docs/image.html#getsize">#</a></h4><div><p>Retrieve the width and height (in pixels) of an image prior to displaying it.
unspecified, meaning that one image pixel equates to one display point / DIP.</li><li><code>number</code> - Opaque type returned by something like <code>require(&#x27;./image.jpg&#x27;)</code>.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a><span class="platform">ios</span>onError <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onprogress"></a><span class="platform">ios</span>onProgress <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onprogress">#</a></h4><div><p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/image.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsize"></a><span class="methodType">static </span>getSize<span class="methodType">(uri, success, failure): </span> <a class="hash-link" href="docs/image.html#getsize">#</a></h4><div><p>Retrieve the width and height (in pixels) of an image prior to displaying it.
This method can fail if the image cannot be found, or fails to download.</p><p>In order to retrieve the image dimensions, the image may first need to be
loaded or downloaded, after which it will be cached. This means that in
principle you could use this method to preload images, however it is not
File diff suppressed because one or more lines are too long
+4 -4
View File
@@ -28,14 +28,14 @@ class <span class="token class-name">MapMyRide</span> extends <span class="token
)}]</span></span> <a class="hash-link" href="docs/mapview.html#annotations">#</a></h4><div><p>Map annotations with title and subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="followuserlocation"></a>followUserLocation <span class="propType">bool</span> <a class="hash-link" href="docs/mapview.html#followuserlocation">#</a></h4><div><p>If <code>true</code> the map will follow the user&#x27;s location whenever it changes.
Note that this has no effect unless <code>showsUserLocation</code> is enabled.
Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="legallabelinsets"></a>legalLabelInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/mapview.html#legallabelinsets">#</a></h4><div><p>Insets for the map&#x27;s legal label, originally at bottom left of the map.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maptype"></a>mapType <span class="propType">enum(&#x27;standard&#x27;, &#x27;satellite&#x27;, &#x27;hybrid&#x27;)</span> <a class="hash-link" href="docs/mapview.html#maptype">#</a></h4><div><p>The map type to be displayed.</p><ul><li><code>standard</code>: Standard road map (default).</li><li><code>satellite</code>: Satellite view.</li><li><code>hybrid</code>: Satellite view with roads and points of interest overlaid.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxdelta"></a>maxDelta <span class="propType">number</span> <a class="hash-link" href="docs/mapview.html#maxdelta">#</a></h4><div><p>Maximum size of the area that can be displayed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mindelta"></a>minDelta <span class="propType">number</span> <a class="hash-link" href="docs/mapview.html#mindelta">#</a></h4><div><p>Minimum size of the area that can be displayed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onannotationpress"></a>onAnnotationPress <span class="propType">function</span> <a class="hash-link" href="docs/mapview.html#onannotationpress">#</a></h4><div><p>Deprecated. Use annotation <code>onFocus</code> and <code>onBlur</code> instead.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onregionchange"></a>onRegionChange <span class="propType">function</span> <a class="hash-link" href="docs/mapview.html#onregionchange">#</a></h4><div><p>Callback that is called continuously when the user is dragging the map.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onregionchangecomplete"></a>onRegionChangeComplete <span class="propType">function</span> <a class="hash-link" href="docs/mapview.html#onregionchangecomplete">#</a></h4><div><p>Callback that is called once, when the user is done moving the map.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overlays"></a>overlays <span class="propType"><span>[{coordinates: [object Object], lineWidth: number, strokeColor: [object Object], fillColor: [object Object], id: string}]</span></span> <a class="hash-link" href="docs/mapview.html#overlays">#</a></h4><div><p>Map overlays</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pitchenabled"></a>pitchEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/mapview.html#pitchenabled">#</a></h4><div><p>When this property is set to <code>true</code> and a valid camera is associated
with the map, the cameras pitch angle is used to tilt the plane
of the map.</p><p>When this property is set to <code>false</code>, the cameras pitch
with the map, the camera&#x27;s pitch angle is used to tilt the plane
of the map.</p><p>When this property is set to <code>false</code>, the camera&#x27;s pitch
angle is ignored and the map is always displayed as if the user
is looking straight down onto it.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="region"></a>region <span class="propType">{latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number}</span> <a class="hash-link" href="docs/mapview.html#region">#</a></h4><div><p>The region to be displayed by the map.</p><p>The region is defined by the center coordinates and the span of
coordinates to display.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rotateenabled"></a>rotateEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/mapview.html#rotateenabled">#</a></h4><div><p>When this property is set to <code>true</code> and a valid camera is associated with
the map, the cameras heading angle is used to rotate the plane of the
the map, the camera&#x27;s heading angle is used to rotate the plane of the
map around its center point.</p><p>When this property is set to <code>false</code>, the
cameras heading angle is ignored and the map is always oriented so
camera&#x27;s heading angle is ignored and the map is always oriented so
that true north is situated at the top of the map view</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/mapview.html#scrollenabled">#</a></h4><div><p>If <code>false</code> the user won&#x27;t be able to change the map region being displayed.
Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showscompass"></a>showsCompass <span class="propType">bool</span> <a class="hash-link" href="docs/mapview.html#showscompass">#</a></h4><div><p>If <code>false</code>, compass won&#x27;t be displayed on the map.
Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showspointsofinterest"></a>showsPointsOfInterest <span class="propType">bool</span> <a class="hash-link" href="docs/mapview.html#showspointsofinterest">#</a></h4><div><p>If <code>false</code> points of interest won&#x27;t be displayed on the map.
+1 -1
View File
@@ -45,7 +45,7 @@ class <span class="token class-name">ModalExample</span> extends <span class="to
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/modal.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#animated">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>animationType</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animationtype"></a>animationType <span class="propType">enum(&#x27;none&#x27;, &#x27;slide&#x27;, &#x27;fade&#x27;)</span> <a class="hash-link" href="docs/modal.html#animationtype">#</a></h4><div><p>The <code>animationType</code> prop controls how the modal animates.</p><ul><li><code>slide</code> slides in from the bottom</li><li><code>fade</code> fades into view</li><li><code>none</code> appears without an animation</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrequestclose"></a>onRequestClose <span class="propType">Platform.OS === &#x27;android&#x27; ? PropTypes.func.isRequired : PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onrequestclose">#</a></h4><div><p>The <code>onRequestClose</code> prop allows passing a function that will be called once the modal has been dismissed.</p><p><em>On the Android platform, this is a required function.</em></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshow"></a>onShow <span class="propType">function</span> <a class="hash-link" href="docs/modal.html#onshow">#</a></h4><div><p>The <code>onShow</code> prop allows passing a function that will be called once the modal has been shown.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transparent"></a>transparent <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#transparent">#</a></h4><div><p>The <code>transparent</code> prop determines whether your modal will fill the entire view. Setting this to <code>true</code> will render the modal over a transparent background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="visible"></a>visible <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#visible">#</a></h4><div><p>The <code>visible</code> prop determines whether your modal is visible.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/modal.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ModalExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/modal.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#animated">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>animationType</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animationtype"></a>animationType <span class="propType">PropTypes.oneOf([&#x27;none&#x27;, &#x27;slide&#x27;, &#x27;fade&#x27;])</span> <a class="hash-link" href="docs/modal.html#animationtype">#</a></h4><div><p>The <code>animationType</code> prop controls how the modal animates.</p><ul><li><code>slide</code> slides in from the bottom</li><li><code>fade</code> fades into view</li><li><code>none</code> appears without an animation</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrequestclose"></a>onRequestClose <span class="propType">Platform.OS === &#x27;android&#x27; ? PropTypes.func.isRequired : PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onrequestclose">#</a></h4><div><p>The <code>onRequestClose</code> prop allows passing a function that will be called once the modal has been dismissed.</p><p><em>On the Android platform, this is a required function.</em></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshow"></a>onShow <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onshow">#</a></h4><div><p>The <code>onShow</code> prop allows passing a function that will be called once the modal has been shown.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transparent"></a>transparent <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/modal.html#transparent">#</a></h4><div><p>The <code>transparent</code> prop determines whether your modal will fill the entire view. Setting this to <code>true</code> will render the modal over a transparent background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="visible"></a>visible <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/modal.html#visible">#</a></h4><div><p>The <code>visible</code> prop determines whether your modal is visible.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/modal.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ModalExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+1 -1
View File
@@ -13,7 +13,7 @@ that the app is loading or there is some activity in the app.</p><p>Example:</p>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/progressbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/progressbarandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/progressbarandroid.html#color">#</a></h4><div><p>Color of the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indeterminate"></a>indeterminate <span class="propType">indeterminateType</span> <a class="hash-link" href="docs/progressbarandroid.html#indeterminate">#</a></h4><div><p>If the progress bar will show indeterminate progress. Note that this
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress <span class="propType">number</span> <a class="hash-link" href="docs/progressbarandroid.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr <span class="propType">STYLE_ATTRIBUTES</span> <a class="hash-link" href="docs/progressbarandroid.html#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/progressbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/progressbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ProgressBarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/progressbarandroid.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr <span class="propType">ReactPropTypes.oneOf(STYLE_ATTRIBUTES)</span> <a class="hash-link" href="docs/progressbarandroid.html#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">ReactPropTypes.string</span> <a class="hash-link" href="docs/progressbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/progressbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ProgressBarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ProgressBar <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;ProgressBarAndroid&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;React&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -34,7 +34,7 @@ functionality for the ScrollView.</p><p>See <a href="docs/refreshcontrol.html" t
<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 content does not scroll.
The default value is true.</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.</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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/scrollview.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
The default value is true.</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.</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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/scrollview.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">ReactPropTypes.oneOf([&#x27;visible&#x27;, &#x27;hidden&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">ReactPropTypes.oneOf([&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">ReactPropTypes.oneOf([&#x27;visible&#x27;, &#x27;hidden&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">ReactPropTypes.number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
<a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
This adds a drop shadow to the item and affects z-order for overlapping views.
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="endfillcolor"></a><span class="platform">android</span>endFillColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/scrollview.html#endfillcolor">#</a></h4><div><p>Sometimes a scrollview takes up more space than its content fills. When this is
+5 -5
View File
@@ -7,11 +7,11 @@ selects a value and changes the index, as shown in the example below.</p><div cl
onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>selectedIndex<span class="token punctuation">:</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>selectedSegmentIndex<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/segmentedcontrolios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/segmentedcontrolios.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a>enabled <span class="propType">bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#enabled">#</a></h4><div><p>If false the user won&#x27;t be able to interact with the control.
Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="momentary"></a>momentary <span class="propType">bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#momentary">#</a></h4><div><p>If true, then selecting a segment won&#x27;t persist visually.
The <code>onValueChange</code> callback will still work as expected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onchange">#</a></h4><div><p>Callback that is called when the user taps a segment;
passes the event as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onvaluechange">#</a></h4><div><p>Callback that is called when the user taps a segment;
passes the segment&#x27;s value as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedindex"></a>selectedIndex <span class="propType">number</span> <a class="hash-link" href="docs/segmentedcontrolios.html#selectedindex">#</a></h4><div><p>The index in <code>props.values</code> of the segment to be (pre)selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">string</span> <a class="hash-link" href="docs/segmentedcontrolios.html#tintcolor">#</a></h4><div><p>Accent color of the control.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="values"></a>values <span class="propType"><span>[string]</span></span> <a class="hash-link" href="docs/segmentedcontrolios.html#values">#</a></h4><div><p>The labels for the control&#x27;s segment buttons, in order.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/segmentedcontrolios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SegmentedControlIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/segmentedcontrolios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/segmentedcontrolios.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a>enabled <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#enabled">#</a></h4><div><p>If false the user won&#x27;t be able to interact with the control.
Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="momentary"></a>momentary <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#momentary">#</a></h4><div><p>If true, then selecting a segment won&#x27;t persist visually.
The <code>onValueChange</code> callback will still work as expected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onchange">#</a></h4><div><p>Callback that is called when the user taps a segment;
passes the event as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onvaluechange">#</a></h4><div><p>Callback that is called when the user taps a segment;
passes the segment&#x27;s value as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedindex"></a>selectedIndex <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/segmentedcontrolios.html#selectedindex">#</a></h4><div><p>The index in <code>props.values</code> of the segment to be (pre)selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/segmentedcontrolios.html#tintcolor">#</a></h4><div><p>Accent color of the control.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="values"></a>values <span class="propType">PropTypes.arrayOf(PropTypes.string)</span> <a class="hash-link" href="docs/segmentedcontrolios.html#values">#</a></h4><div><p>The labels for the control&#x27;s segment buttons, in order.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/segmentedcontrolios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/SegmentedControlIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
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
+18 -3
View File
@@ -45,10 +45,25 @@ at the beginning of the line is indicated by an ellipsis glyph. e.g., &quot;...w
missing text in the middle is indicated by an ellipsis glyph. &quot;ab...yz&quot;</li><li><code>tail</code> - The line is displayed so that the beginning fits in the container and the
missing text at the end of the line is indicated by an ellipsis glyph. e.g., &quot;abcd...&quot;</li><li><code>clip</code> - Lines are not drawn past the edge of the text container.</li></ul><p>The default is <code>tail</code>.</p><p><code>numberOfLines</code> must be set in conjunction with this prop.</p><blockquote><p><code>clip</code> is working only for iOS</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines <span class="propType">number</span> <a class="hash-link" href="docs/text.html#numberoflines">#</a></h4><div><p>Used to truncate the text with an ellipsis after computing the text
layout, including line wrapping, such that the total number of lines
does not exceed this number.</p><p>This prop is commonly used with <code>lineBreakMode</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlongpress">#</a></h4><div><p>This function is called on long press.</p><p>e.g., `onLongPress={this.increaseSize}&gt;``</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onpress">#</a></h4><div><p>This function is called on press.</p><p>e.g., `onPress={() =&gt; console.log(&#x27;1st&#x27;)}``</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/text.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span> </h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum(&#x27;normal&#x27;, &#x27;italic&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&#x27;normal&#x27;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</span> <div><p>Specifies font weight. The values &#x27;normal&#x27; and &#x27;bold&#x27; are supported for
does not exceed this number.</p><p>This prop is commonly used with <code>lineBreakMode</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlongpress">#</a></h4><div><p>This function is called on long press.</p><p>e.g., `onLongPress={this.increaseSize}&gt;``</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onpress">#</a></h4><div><p>This function is called on press.</p><p>e.g., `onPress={() =&gt; console.log(&#x27;1st&#x27;)}``</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/text.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">ReactPropTypes.string</span> </h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">ReactPropTypes.oneOf([&#x27;normal&#x27;, &#x27;italic&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">ReactPropTypes.oneOf(
[&#x27;normal&#x27; /*default*/, &#x27;bold&#x27;,
&#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;]
)</span> <div><p>Specifies font weight. The values &#x27;normal&#x27; and &#x27;bold&#x27; are supported for
most fonts. Not all fonts have a variant for each of the numeric values,
in that case the closest one is chosen.</p></div></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum(&#x27;auto&#x27;, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;justify&#x27;)</span> <div><p>Specifies text alignment. The value &#x27;justify&#x27; is only supported on iOS and
fallbacks to <code>left</code> on Android.</p></div></h6></div><div class="prop"><h6 class="propTitle">textDecorationLine <span class="propType">enum(&#x27;none&#x27;, &#x27;underline&#x27;, &#x27;line-through&#x27;, &#x27;underline line-through&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType">{width: number, height: number}</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">enum(&#x27;auto&#x27;, &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;center&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;double&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum(&#x27;auto&#x27;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/text.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectable"></a><span class="platform">android</span>selectable <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#selectable">#</a></h4><div><p>Lets the user select text, to use the native copy and paste functionality.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a><span class="platform">ios</span>allowFontScaling <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#allowfontscaling">#</a></h4><div><p>Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
in that case the closest one is chosen.</p></div></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">ReactPropTypes.oneOf(
[&#x27;auto&#x27; /*default*/, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;justify&#x27;]
)</span> <div><p>Specifies text alignment. The value &#x27;justify&#x27; is only supported on iOS and
fallbacks to <code>left</code> on Android.</p></div></h6></div><div class="prop"><h6 class="propTitle">textDecorationLine <span class="propType">ReactPropTypes.oneOf(
[&#x27;none&#x27; /*default*/, &#x27;underline&#x27;, &#x27;line-through&#x27;, &#x27;underline line-through&#x27;]
)</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType">ReactPropTypes.shape(
{width: ReactPropTypes.number, height: ReactPropTypes.number}
)</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">ReactPropTypes.oneOf(
[&#x27;auto&#x27; /*default*/, &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;center&#x27;]
)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">ReactPropTypes.oneOf(
[&#x27;solid&#x27; /*default*/, &#x27;double&#x27;, &#x27;dotted&#x27;,&#x27;dashed&#x27;]
)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">ReactPropTypes.oneOf(
[&#x27;auto&#x27; /*default*/, &#x27;ltr&#x27;, &#x27;rtl&#x27;]
)</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/text.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectable"></a><span class="platform">android</span>selectable <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#selectable">#</a></h4><div><p>Lets the user select text, to use the native copy and paste functionality.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a><span class="platform">ios</span>allowFontScaling <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#allowfontscaling">#</a></h4><div><p>Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
default is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a><span class="platform">ios</span>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#suppresshighlighting">#</a></h4><div><p>When <code>true</code>, no visual change is made when text is pressed down. By
default, a gray oval highlights the text on press down.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="description"></a>Description <a class="hash-link" href="docs/text.html#description">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Text.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="docs/text.html#nested-text">#</a></h2><p>Both iOS and Android allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (<code>NSAttributedString</code> on iOS, <code>SpannableString</code> on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.</p><div class="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
+60 -14
View File
@@ -81,30 +81,76 @@ has its padding set by the background image provided by the system, and it
cannot be changed. Solutions to avoid this is to either not set height
explicitly, case in which the system will take care of displaying the border
in the correct position, or to not display the border by setting
<code>underlineColorAndroid</code> to transparent.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/textinput.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/textinput.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize <span class="propType">enum(&#x27;none&#x27;, &#x27;sentences&#x27;, &#x27;words&#x27;, &#x27;characters&#x27;)</span> <a class="hash-link" href="docs/textinput.html#autocapitalize">#</a></h4><div><p>Can tell <code>TextInput</code> to automatically capitalize certain characters.</p><ul><li><code>characters</code>: all characters.</li><li><code>words</code>: first letter of each word.</li><li><code>sentences</code>: first letter of each sentence (<em>default</em>).</li><li><code>none</code>: don&#x27;t auto capitalize anything.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#autocorrect">#</a></h4><div><p>If <code>false</code>, disables auto-correct. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#autofocus">#</a></h4><div><p>If <code>true</code>, focuses the input on <code>componentDidMount</code>.
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bluronsubmit"></a>blurOnSubmit <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#bluronsubmit">#</a></h4><div><p>If <code>true</code>, the text field will blur when submitted.
<code>underlineColorAndroid</code> to transparent.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/textinput.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/textinput.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize <span class="propType">PropTypes.oneOf([
&#x27;none&#x27;,
&#x27;sentences&#x27;,
&#x27;words&#x27;,
&#x27;characters&#x27;,
])</span> <a class="hash-link" href="docs/textinput.html#autocapitalize">#</a></h4><div><p>Can tell <code>TextInput</code> to automatically capitalize certain characters.</p><ul><li><code>characters</code>: all characters.</li><li><code>words</code>: first letter of each word.</li><li><code>sentences</code>: first letter of each sentence (<em>default</em>).</li><li><code>none</code>: don&#x27;t auto capitalize anything.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#autocorrect">#</a></h4><div><p>If <code>false</code>, disables auto-correct. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#autofocus">#</a></h4><div><p>If <code>true</code>, focuses the input on <code>componentDidMount</code>.
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bluronsubmit"></a>blurOnSubmit <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#bluronsubmit">#</a></h4><div><p>If <code>true</code>, the text field will blur when submitted.
The default value is true for single-line fields and false for
multiline fields. Note that for multiline fields, setting <code>blurOnSubmit</code>
to <code>true</code> means that pressing return will blur the field and trigger the
<code>onSubmitEditing</code> event instead of inserting a newline into the field.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultvalue"></a>defaultValue <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#defaultvalue">#</a></h4><div><p>Provides an initial value that will change when the user starts typing.
<code>onSubmitEditing</code> event instead of inserting a newline into the field.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultvalue"></a>defaultValue <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#defaultvalue">#</a></h4><div><p>Provides an initial value that will change when the user starts typing.
Useful for simple use-cases where you do not want to deal with listening
to events and updating the value prop to keep the controlled state in sync.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="editable"></a>editable <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#editable">#</a></h4><div><p>If <code>false</code>, text is not editable. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardtype"></a>keyboardType <span class="propType">enum(&#x27;default&#x27;, &#x27;email-address&#x27;, &#x27;numeric&#x27;, &#x27;phone-pad&#x27;, &#x27;ascii-capable&#x27;, &#x27;numbers-and-punctuation&#x27;, &#x27;url&#x27;, &#x27;number-pad&#x27;, &#x27;name-phone-pad&#x27;, &#x27;decimal-pad&#x27;, &#x27;twitter&#x27;, &#x27;web-search&#x27;)</span> <a class="hash-link" href="docs/textinput.html#keyboardtype">#</a></h4><div><p>Determines which keyboard to open, e.g.<code>numeric</code>.</p><p>The following values work across platforms:</p><ul><li><code>default</code></li><li><code>numeric</code></li><li><code>email-address</code></li><li><code>phone-pad</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxlength"></a>maxLength <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#maxlength">#</a></h4><div><p>Limits the maximum number of characters that can be entered. Use this
instead of implementing the logic in JS to avoid flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiline"></a>multiline <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#multiline">#</a></h4><div><p>If <code>true</code>, the text input can be multiple lines.
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onchange">#</a></h4><div><p>Callback that is called when the text input&#x27;s text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onchangetext">#</a></h4><div><p>Callback that is called when the text input&#x27;s text changes.
Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</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.</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&#x27;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">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(&#x27;done&#x27;, &#x27;go&#x27;, &#x27;next&#x27;, &#x27;search&#x27;, &#x27;send&#x27;, &#x27;none&#x27;, &#x27;previous&#x27;, &#x27;default&#x27;, &#x27;emergency-call&#x27;, &#x27;google&#x27;, &#x27;join&#x27;, &#x27;route&#x27;, &#x27;yahoo&#x27;)</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="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 on iOS) 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><a href="/react-native/docs/style.html" target="">Styles</a></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#value">#</a></h4><div><p>The value to show for the text input. <code>TextInput</code> is a controlled
to events and updating the value prop to keep the controlled state in sync.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="editable"></a>editable <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#editable">#</a></h4><div><p>If <code>false</code>, text is not editable. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardtype"></a>keyboardType <span class="propType">PropTypes.oneOf([
// Cross-platform
&#x27;default&#x27;,
&#x27;email-address&#x27;,
&#x27;numeric&#x27;,
&#x27;phone-pad&#x27;,
// iOS-only
&#x27;ascii-capable&#x27;,
&#x27;numbers-and-punctuation&#x27;,
&#x27;url&#x27;,
&#x27;number-pad&#x27;,
&#x27;name-phone-pad&#x27;,
&#x27;decimal-pad&#x27;,
&#x27;twitter&#x27;,
&#x27;web-search&#x27;,
])</span> <a class="hash-link" href="docs/textinput.html#keyboardtype">#</a></h4><div><p>Determines which keyboard to open, e.g.<code>numeric</code>.</p><p>The following values work across platforms:</p><ul><li><code>default</code></li><li><code>numeric</code></li><li><code>email-address</code></li><li><code>phone-pad</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxlength"></a>maxLength <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/textinput.html#maxlength">#</a></h4><div><p>Limits the maximum number of characters that can be entered. Use this
instead of implementing the logic in JS to avoid flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiline"></a>multiline <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#multiline">#</a></h4><div><p>If <code>true</code>, the text input can be multiple lines.
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onchange">#</a></h4><div><p>Callback that is called when the text input&#x27;s text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onchangetext">#</a></h4><div><p>Callback that is called when the text input&#x27;s text changes.
Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onselectionchange"></a>onSelectionChange <span class="propType">PropTypes.func</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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input&#x27;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">PropTypes.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">PropTypes.oneOf([
// Cross-platform
&#x27;done&#x27;,
&#x27;go&#x27;,
&#x27;next&#x27;,
&#x27;search&#x27;,
&#x27;send&#x27;,
// Android-only
&#x27;none&#x27;,
&#x27;previous&#x27;,
// iOS-only
&#x27;default&#x27;,
&#x27;emergency-call&#x27;,
&#x27;google&#x27;,
&#x27;join&#x27;,
&#x27;route&#x27;,
&#x27;yahoo&#x27;,
])</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">PropTypes.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">PropTypes.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="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 on iOS) 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><a href="/react-native/docs/style.html" target="">Styles</a></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#value">#</a></h4><div><p>The value to show for the text input. <code>TextInput</code> is a controlled
component, which means the native value will be forced to match this
value prop if provided. For most uses, this works great, but in some
cases this may cause flickering - one common cause is preventing edits
by keeping value the same. In addition to simply setting the same value,
either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent
unwanted edits without flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimageleft"></a><span class="platform">android</span>inlineImageLeft <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#inlineimageleft">#</a></h4><div><p>If defined, the provided image resource will be rendered on the left.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimagepadding"></a><span class="platform">android</span>inlineImagePadding <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#inlineimagepadding">#</a></h4><div><p>Padding between the inline image, if any, and the text input itself.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a><span class="platform">android</span>numberOfLines <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#numberoflines">#</a></h4><div><p>Sets the number of lines for a <code>TextInput</code>. Use it with multiline set to
<code>true</code> to be able to fill the lines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeylabel"></a><span class="platform">android</span>returnKeyLabel <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#returnkeylabel">#</a></h4><div><p>Sets the return key to the label. Use it instead of <code>returnKeyType</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlinecolorandroid"></a><span class="platform">android</span>underlineColorAndroid <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#underlinecolorandroid">#</a></h4><div><p>The color of the <code>TextInput</code> underline.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearbuttonmode"></a><span class="platform">ios</span>clearButtonMode <span class="propType">enum(&#x27;never&#x27;, &#x27;while-editing&#x27;, &#x27;unless-editing&#x27;, &#x27;always&#x27;)</span> <a class="hash-link" href="docs/textinput.html#clearbuttonmode">#</a></h4><div><p>When the clear button should appear on the right side of the text view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cleartextonfocus"></a><span class="platform">ios</span>clearTextOnFocus <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#cleartextonfocus">#</a></h4><div><p>If <code>true</code>, clears the text field automatically when editing begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enablesreturnkeyautomatically"></a><span class="platform">ios</span>enablesReturnKeyAutomatically <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#enablesreturnkeyautomatically">#</a></h4><div><p>If <code>true</code>, the keyboard disables the return key when there is no text and
automatically enables it when there is text. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardappearance"></a><span class="platform">ios</span>keyboardAppearance <span class="propType">enum(&#x27;default&#x27;, &#x27;light&#x27;, &#x27;dark&#x27;)</span> <a class="hash-link" href="docs/textinput.html#keyboardappearance">#</a></h4><div><p>Determines the color of the keyboard.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onkeypress"></a><span class="platform">ios</span>onKeyPress <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onkeypress">#</a></h4><div><p>Callback that is called when a key is pressed.
unwanted edits without flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimageleft"></a><span class="platform">android</span>inlineImageLeft <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#inlineimageleft">#</a></h4><div><p>If defined, the provided image resource will be rendered on the left.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimagepadding"></a><span class="platform">android</span>inlineImagePadding <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/textinput.html#inlineimagepadding">#</a></h4><div><p>Padding between the inline image, if any, and the text input itself.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a><span class="platform">android</span>numberOfLines <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/textinput.html#numberoflines">#</a></h4><div><p>Sets the number of lines for a <code>TextInput</code>. Use it with multiline set to
<code>true</code> to be able to fill the lines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeylabel"></a><span class="platform">android</span>returnKeyLabel <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#returnkeylabel">#</a></h4><div><p>Sets the return key to the label. Use it instead of <code>returnKeyType</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlinecolorandroid"></a><span class="platform">android</span>underlineColorAndroid <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#underlinecolorandroid">#</a></h4><div><p>The color of the <code>TextInput</code> underline.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearbuttonmode"></a><span class="platform">ios</span>clearButtonMode <span class="propType">PropTypes.oneOf([
&#x27;never&#x27;,
&#x27;while-editing&#x27;,
&#x27;unless-editing&#x27;,
&#x27;always&#x27;,
])</span> <a class="hash-link" href="docs/textinput.html#clearbuttonmode">#</a></h4><div><p>When the clear button should appear on the right side of the text view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cleartextonfocus"></a><span class="platform">ios</span>clearTextOnFocus <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#cleartextonfocus">#</a></h4><div><p>If <code>true</code>, clears the text field automatically when editing begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enablesreturnkeyautomatically"></a><span class="platform">ios</span>enablesReturnKeyAutomatically <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#enablesreturnkeyautomatically">#</a></h4><div><p>If <code>true</code>, the keyboard disables the return key when there is no text and
automatically enables it when there is text. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardappearance"></a><span class="platform">ios</span>keyboardAppearance <span class="propType">PropTypes.oneOf([
&#x27;default&#x27;,
&#x27;light&#x27;,
&#x27;dark&#x27;,
])</span> <a class="hash-link" href="docs/textinput.html#keyboardappearance">#</a></h4><div><p>Determines the color of the keyboard.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onkeypress"></a><span class="platform">ios</span>onKeyPress <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onkeypress">#</a></h4><div><p>Callback that is called when a key is pressed.
Pressed key value is passed as an argument to the callback handler.
Fires before <code>onChange</code> callbacks.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectionstate"></a><span class="platform">ios</span>selectionState <span class="propType">DocumentSelectionState</span> <a class="hash-link" href="docs/textinput.html#selectionstate">#</a></h4><div><p>An instance of <code>DocumentSelectionState</code>, this is some state that is responsible for
Fires before <code>onChange</code> callbacks.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectionstate"></a><span class="platform">ios</span>selectionState <span class="propType">PropTypes.instanceOf(DocumentSelectionState)</span> <a class="hash-link" href="docs/textinput.html#selectionstate">#</a></h4><div><p>An instance of <code>DocumentSelectionState</code>, this is some state that is responsible for
maintaining selection information for a document.</p><p>Some functionality that can be performed with this instance is:</p><ul><li><code>blur()</code></li><li><code>focus()</code></li><li><code>update()</code></li></ul><blockquote><p>You can reference <code>DocumentSelectionState</code> in
<a href="https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js" target="_blank"><code>vendor/document/selection/DocumentSelectionState.js</code></a></p></blockquote></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/textinput.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="isfocused"></a>isFocused<span class="methodType">(0): </span> <a class="hash-link" href="docs/textinput.html#isfocused">#</a></h4><div><p>Returns <code>true</code> if the input is currently focused; <code>false</code> otherwise.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clear"></a>clear<span class="methodType">(0)</span> <a class="hash-link" href="docs/textinput.html#clear">#</a></h4><div><p>Removes all text from the <code>TextInput</code>.</p></div></div></div></span></div><div><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/textinput.html#examples">#</a></h3><div><table width="100%"><tbody><tr><td><h4><a class="anchor" name="ios"></a>IOS <a class="hash-link" href="docs/textinput.html#ios">#</a></h4></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextInputExample.ios.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
+11 -6
View File
@@ -18,20 +18,25 @@ onActionSelected<span class="token punctuation">:</span> <span class="token keyw
<span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // index of &#x27;Settings&#x27;
</span> <span class="token function">showSettings<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/toolbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/toolbarandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions <span class="propType"><span>[{title: string, icon: optionalImageSource, show: enum(&#x27;always&#x27;, &#x27;ifRoom&#x27;, &#x27;never&#x27;), showWithText: bool}]</span></span> <a class="hash-link" href="docs/toolbarandroid.html#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/toolbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/toolbarandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions <span class="propType">ReactPropTypes.arrayOf(ReactPropTypes.shape({
title: ReactPropTypes.string.isRequired,
icon: optionalImageSource,
show: ReactPropTypes.oneOf([&#x27;always&#x27;, &#x27;ifRoom&#x27;, &#x27;never&#x27;]),
showWithText: ReactPropTypes.bool
}))</span> <a class="hash-link" href="docs/toolbarandroid.html#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
or text on the right side of the widget. If they don&#x27;t fit they are placed in an &#x27;overflow&#x27;
menu.</p><p>This property takes an array of objects, where each object has the following keys:</p><ul><li><code>title</code>: <strong>required</strong>, the title of this action</li><li><code>icon</code>: the icon for this action, e.g. <code>require(&#x27;./some_icon.png&#x27;)</code></li><li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>,
<code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
<code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetstart"></a>contentInsetStart <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetstart">#</a></h4><div><p>Sets the content inset for the toolbar starting edge.</p><p>The content inset affects the valid area for Toolbar content other than
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetstart"></a>contentInsetStart <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetstart">#</a></h4><div><p>Sets the content inset for the toolbar starting edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="logo"></a>logo <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#logo">#</a></h4><div><p>Sets the toolbar logo.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navicon"></a>navIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#navicon">#</a></h4><div><p>Sets the navigation icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onactionselected"></a>onActionSelected <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#onactionselected">#</a></h4><div><p>Callback that is called when an action is selected. The only argument that is passed to the
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl <span class="propType">bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="logo"></a>logo <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#logo">#</a></h4><div><p>Sets the toolbar logo.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navicon"></a>navIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#navicon">#</a></h4><div><p>Sets the navigation icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onactionselected"></a>onActionSelected <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/toolbarandroid.html#onactionselected">#</a></h4><div><p>Callback that is called when an action is selected. The only argument that is passed to the
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl <span class="propType">ReactPropTypes.bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
In addition to this property you need to add</p><p> android:supportsRtl=&quot;true&quot;</p><p>to your application AndroidManifest.xml and then call
<code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">ReactPropTypes.string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">ReactPropTypes.string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">ReactPropTypes.string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
File diff suppressed because one or more lines are too long
+47 -30
View File
@@ -16,75 +16,89 @@ padding.</p><div class="prism language-javascript">class <span class="token clas
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><blockquote><p><code>View</code>s are designed to be used with <a href="/react-native/docs/style.html" target=""><code>StyleSheet</code></a> for clarity
and performance, although inline styles are also supported.</p></blockquote><h3><a class="anchor" name="synthetic-touch-events"></a>Synthetic Touch Events <a class="hash-link" href="docs/view.html#synthetic-touch-events">#</a></h3><p>For <code>View</code> repsonder props (e.g., <code>onResponderMove</code>), the synthetic touch event passed to them
are of the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event.</li><li><code>identifier</code> - The ID of the touch.</li><li><code>locationX</code> - The X position of the touch, relative to the element.</li><li><code>locationY</code> - The Y position of the touch, relative to the element.</li><li><code>pageX</code> - The X position of the touch, relative to the root element.</li><li><code>pageY</code> - The Y position of the touch, relative to the root element.</li><li><code>target</code> - The node id of the element receiving the touch event.</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation.</li><li><code>touches</code> - Array of all current touches on the screen.</li></ul></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="docs/view.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that&#x27;s read by the screen reader when the user interacts
are of the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event.</li><li><code>identifier</code> - The ID of the touch.</li><li><code>locationX</code> - The X position of the touch, relative to the element.</li><li><code>locationY</code> - The Y position of the touch, relative to the element.</li><li><code>pageX</code> - The X position of the touch, relative to the root element.</li><li><code>pageY</code> - The Y position of the touch, relative to the root element.</li><li><code>target</code> - The node id of the element receiving the touch event.</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation.</li><li><code>touches</code> - Array of all current touches on the screen.</li></ul></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/view.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that&#x27;s read by the screen reader when the user interacts
with the element. By default, the label is constructed by traversing all the
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hitslop"></a>hitSlop <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/view.html#hitslop">#</a></h4><div><p>This defines how far a touch event can start away from the view.
Typical interface guidelines recommend touch targets that are at least
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index
of sibling views always takes precedence if a touch hits two overlapping
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
the new layout may not yet be reflected on the screen at the time the
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to &quot;claim&quot; touch responsiveness? This is called for every touch move on
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to &quot;claim&quot; touch responsiveness? This is called for every touch move on
the <code>View</code> when it is not the responder.</p><p><code>View.props.onMoveShouldSetResponder: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onMoveShouldSetResponderCapture: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
what is happening.</p><p><code>View.props.onResponderGrant: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
the responder.</p><p><code>View.props.onResponderReject: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
<code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens
with control center/ notification center on iOS)</p><p><code>View.props.onResponderTerminate: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminationrequest">#</a></h4><div><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderterminationrequest">#</a></h4><div><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its
responder. Returning <code>true</code> allows its release.</p><p><code>View.props.onResponderTerminationRequest: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onStartShouldSetResponderCapture: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents <span class="propType">enum(&#x27;box-none&#x27;, &#x27;none&#x27;, &#x27;box-only&#x27;, &#x27;auto&#x27;)</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>&#x27;auto&#x27;</code>: The View can be the target of touch events.</li><li><code>&#x27;none&#x27;</code>: The View is never the target of touch events.</li><li><code>&#x27;box-none&#x27;</code>: The View is never the target of touch events but it&#x27;s
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents <span class="propType">PropTypes.oneOf([
&#x27;box-none&#x27;,
&#x27;none&#x27;,
&#x27;box-only&#x27;,
&#x27;auto&#x27;,
])</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>&#x27;auto&#x27;</code>: The View can be the target of touch events.</li><li><code>&#x27;none&#x27;</code>: The View is never the target of touch events.</li><li><code>&#x27;box-none&#x27;</code>: The View is never the target of touch events but it&#x27;s
subviews can be. It behaves like if the view had the following classes
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token operator">*</span> <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></li><li><code>&#x27;box-only&#x27;</code>: The view can be the target of touch events but it&#x27;s
subviews cannot be. It behaves like if the view had the following classes
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token operator">*</span> <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><blockquote><p>Since <code>pointerEvents</code> does not affect layout/appearance, and we are
already deviating from the spec by adding additional modes, we opt to not
include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to
implement it as a <code>className</code> anyways. Using <code>style</code> or not is an
implementation detail of the platform.</p></blockquote></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by <code>RCTView</code> and is useful
implementation detail of the platform.</p></blockquote></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by <code>RCTView</code> and is useful
for scrolling content when there are many subviews, most of which are
offscreen. For this property to be effective, it must be applied to a
view that contains many subviews that extend outside its bound. The
subviews must also have <code>overflow: hidden</code>, as should the containing view
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/view.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/view.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">ReactPropTypes.oneOf([&#x27;visible&#x27;, &#x27;hidden&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">ReactPropTypes.oneOf([&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">ReactPropTypes.oneOf([&#x27;visible&#x27;, &#x27;hidden&#x27;])</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">ReactPropTypes.number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
<a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
This adds a drop shadow to the item and affects z-order for overlapping views.
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the &#x27;layout-only view removal&#x27; optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType <span class="propType">AccessibilityComponentType</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>&#x27;none&#x27;</code></li><li><code>&#x27;button&#x27;</code></li><li><code>&#x27;radiobutton_checked&#x27;</code></li><li><code>&#x27;radiobutton_unchecked&#x27;</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion <span class="propType">enum(&#x27;none&#x27;, &#x27;polite&#x27;, &#x27;assertive&#x27;)</span> <a class="hash-link" href="docs/view.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the &#x27;layout-only view removal&#x27; optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType <span class="propType">PropTypes.oneOf(AccessibilityComponentType)</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>&#x27;none&#x27;</code></li><li><code>&#x27;button&#x27;</code></li><li><code>&#x27;radiobutton_checked&#x27;</code></li><li><code>&#x27;radiobutton_unchecked&#x27;</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion <span class="propType">PropTypes.oneOf([
&#x27;none&#x27;,
&#x27;polite&#x27;,
&#x27;assertive&#x27;,
])</span> <a class="hash-link" href="docs/view.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
when this view changes. Works for Android API &gt;= 19 only.
Possible values:</p><ul><li><code>&#x27;none&#x27;</code> - Accessibility services should not announce changes to this view.</li><li><code>&#x27;polite&#x27;</code>- Accessibility services should announce changes to this view.</li><li><code>&#x27;assertive&#x27;</code> - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li></ul><p>See the <a href="http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion" target="_blank">Android <code>View</code> docs</a>
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsable"></a><span class="platform">android</span>collapsable <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#collapsable">#</a></h4><div><p>Views that are only used to layout their children or otherwise don&#x27;t draw
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsable"></a><span class="platform">android</span>collapsable <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#collapsable">#</a></h4><div><p>Views that are only used to layout their children or otherwise don&#x27;t draw
anything may be automatically removed from the native hierarchy as an
optimization. Set this property to <code>false</code> to disable this optimization and
ensure that this <code>View</code> exists in the native view hierarchy.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="importantforaccessibility"></a><span class="platform">android</span>importantForAccessibility <span class="propType">enum(&#x27;auto&#x27;, &#x27;yes&#x27;, &#x27;no&#x27;, &#x27;no-hide-descendants&#x27;)</span> <a class="hash-link" href="docs/view.html#importantforaccessibility">#</a></h4><div><p>Controls how view is important for accessibility which is if it
ensure that this <code>View</code> exists in the native view hierarchy.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="importantforaccessibility"></a><span class="platform">android</span>importantForAccessibility <span class="propType">PropTypes.oneOf([
&#x27;auto&#x27;,
&#x27;yes&#x27;,
&#x27;no&#x27;,
&#x27;no-hide-descendants&#x27;,
])</span> <a class="hash-link" href="docs/view.html#importantforaccessibility">#</a></h4><div><p>Controls how view is important for accessibility which is if it
fires accessibility events and if it is reported to accessibility services
that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>&#x27;auto&#x27;</code> - The system determines whether the view is important for accessibility -
default (recommended).</li><li><code>&#x27;yes&#x27;</code> - The view is important for accessibility.</li><li><code>&#x27;no&#x27;</code> - The view is not important for accessibility.</li><li><code>&#x27;no-hide-descendants&#x27;</code> - The view is not important for accessibility,
nor are any of its descendant views.</li></ul><p>See the <a href="[http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank">Android <code>importantForAccessibility</code> docs</a>
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
in order to preserve 100% correct colors and blending behavior. The default
(<code>false</code>) falls back to drawing the component and its children with an alpha
applied to the paint used to draw each element instead of rendering the full
@@ -98,16 +112,19 @@ animation, consider combining it with renderToHardwareTextureAndroid if the
view <strong>contents</strong> are static (i.e. it doesn&#x27;t need to be redrawn each frame).
If that property is enabled, this View will be rendered off-screen once,
saved in a hardware texture, and then composited onto the screen with an alpha
each frame without having to switch rendering targets on the GPU.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendertohardwaretextureandroid"></a><span class="platform">android</span>renderToHardwareTextureAndroid <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#rendertohardwaretextureandroid">#</a></h4><div><p>Whether this <code>View</code> should render itself (and all of its children) into a
each frame without having to switch rendering targets on the GPU.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendertohardwaretextureandroid"></a><span class="platform">android</span>renderToHardwareTextureAndroid <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#rendertohardwaretextureandroid">#</a></h4><div><p>Whether this <code>View</code> should render itself (and all of its children) into a
single hardware texture on the GPU.</p><p>On Android, this is useful for animations and interactions that only
modify opacity, rotation, translation, and/or scale: in those cases, the
view doesn&#x27;t have to be redrawn and display lists don&#x27;t need to be
re-executed. The texture can just be re-used and re-composited with
different parameters. The downside is that this can use up limited video
memory, so this prop should be set back to false at the end of the
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits <span class="propType">AccessibilityTraits, [object Object]</span> <a class="hash-link" href="docs/view.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits <span class="propType">PropTypes.oneOfType([
PropTypes.oneOf(AccessibilityTraits),
PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)),
])</span> <a class="hash-link" href="docs/view.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
provided unless specified otherwise in element.</p><p>You can provide one trait or an array of many traits.</p><p>Possible values for <code>AccessibilityTraits</code> are:</p><ul><li><code>&#x27;none&#x27;</code> - The element has no traits.</li><li><code>&#x27;button&#x27;</code> - The element should be treated as a button.</li><li><code>&#x27;link&#x27;</code> - The element should be treated as a link.</li><li><code>&#x27;header&#x27;</code> - The element is a header that divides content into sections.</li><li><code>&#x27;search&#x27;</code> - The element should be treated as a search field.</li><li><code>&#x27;image&#x27;</code> - The element should be treated as an image.</li><li><code>&#x27;selected&#x27;</code> - The element is selected.</li><li><code>&#x27;plays&#x27;</code> - The element plays sound.</li><li><code>&#x27;key&#x27;</code> - The element should be treated like a keyboard key.</li><li><code>&#x27;text&#x27;</code> - The element should be treated as text.</li><li><code>&#x27;summary&#x27;</code> - The element provides app summary information.</li><li><code>&#x27;disabled&#x27;</code> - The element is disabled.</li><li><code>&#x27;frequentUpdates&#x27;</code> - The element frequently changes its value.</li><li><code>&#x27;startsMedia&#x27;</code> - The element starts a media session.</li><li><code>&#x27;adjustable&#x27;</code> - The element allows adjustment over a range of values.</li><li><code>&#x27;allowsDirectInteraction&#x27;</code> - The element allows direct touch interaction for VoiceOver users.</li><li><code>&#x27;pageTurn&#x27;</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><p>See the <a href="/react-native/docs/accessibility.html#accessibilitytraits-ios" target="">Accessibility guide</a>
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
modify this component&#x27;s dimensions nor its children; for example, when
translating the position of a static view, rasterization allows the
renderer to reuse a cached bitmap of a static view and quickly composite
+10 -7
View File
@@ -25,25 +25,28 @@ child.</p><p>Example:</p><div class="prism language-javascript">render<span clas
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/viewpagerandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/viewpagerandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialpage"></a>initialPage <span class="propType">number</span> <a class="hash-link" href="docs/viewpagerandroid.html#initialpage">#</a></h4><div><p>Index of initial page that should be selected. Use <code>setPage</code> method to
update the page, and <code>onPageSelected</code> to monitor page changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">enum(&#x27;none&#x27;, &#x27;on-drag&#x27;)</span> <a class="hash-link" href="docs/viewpagerandroid.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/viewpagerandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/viewpagerandroid.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialpage"></a>initialPage <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/viewpagerandroid.html#initialpage">#</a></h4><div><p>Index of initial page that should be selected. Use <code>setPage</code> method to
update the page, and <code>onPageSelected</code> to monitor page changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">ReactPropTypes.oneOf([
&#x27;none&#x27;, // default
&#x27;on-drag&#x27;,
])</span> <a class="hash-link" href="docs/viewpagerandroid.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
- &#x27;none&#x27; (the default), drags do not dismiss the keyboard.
- &#x27;on-drag&#x27;, the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescroll"></a>onPageScroll <span class="propType">function</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpagescroll">#</a></h4><div><p>Executed when transitioning between pages (ether because of animation for
- &#x27;on-drag&#x27;, the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescroll"></a>onPageScroll <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpagescroll">#</a></h4><div><p>Executed when transitioning between pages (ether because of animation for
the requested page change or when user is swiping/dragging between pages)
The <code>event.nativeEvent</code> object for this callback will carry following data:
- position - index of first page from the left that is currently visible
- offset - value from range [0,1) describing stage between page transitions.
Value x means that (1 - x) fraction of the page at &quot;position&quot; index is
visible, and x fraction of the next page is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescrollstatechanged"></a>onPageScrollStateChanged <span class="propType">function</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpagescrollstatechanged">#</a></h4><div><p>Function called when the page scrolling state has changed.
visible, and x fraction of the next page is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescrollstatechanged"></a>onPageScrollStateChanged <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpagescrollstatechanged">#</a></h4><div><p>Function called when the page scrolling state has changed.
The page scrolling state can be in 3 states:
- idle, meaning there is no interaction with the page scroller happening at the time
- dragging, meaning there is currently an interaction with the page scroller
- settling, meaning that there was an interaction with the page scroller, and the
page scroller is now finishing it&#x27;s closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpageselected"></a>onPageSelected <span class="propType">function</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpageselected">#</a></h4><div><p>This callback will be called once ViewPager finish navigating to selected page
page scroller is now finishing it&#x27;s closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpageselected"></a>onPageSelected <span class="propType">ReactPropTypes.func</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpageselected">#</a></h4><div><p>This callback will be called once ViewPager finish navigating to selected page
(when user swipes between pages). The <code>event.nativeEvent</code> object passed to this
callback will have following fields:
- position - index of page that has been selected</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagemargin"></a>pageMargin <span class="propType">number</span> <a class="hash-link" href="docs/viewpagerandroid.html#pagemargin">#</a></h4><div><p>Blank space to show between pages. This is only visible while scrolling, pages are still
edge-to-edge.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/viewpagerandroid.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
- position - index of page that has been selected</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagemargin"></a>pageMargin <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/viewpagerandroid.html#pagemargin">#</a></h4><div><p>Blank space to show between pages. This is only visible while scrolling, pages are still
edge-to-edge.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">ReactPropTypes.bool</span> <a class="hash-link" href="docs/viewpagerandroid.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
The default value is true.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/viewpagerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setpage"></a>setPage<span class="methodType">(selectedPage)</span> <a class="hash-link" href="docs/viewpagerandroid.html#setpage">#</a></h4><div><p>A helper function to scroll to a specific page in the ViewPager.
The transition between pages will be animated.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setpagewithoutanimation"></a>setPageWithoutAnimation<span class="methodType">(selectedPage)</span> <a class="hash-link" href="docs/viewpagerandroid.html#setpagewithoutanimation">#</a></h4><div><p>A helper function to scroll to a specific page in the ViewPager.
The transition between pages will <em>not</em> be animated.</p></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/viewpagerandroid.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewpagerscrollstate"></a>ViewPagerScrollState <a class="hash-link" href="docs/viewpagerandroid.html#viewpagerscrollstate">#</a></h4><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>idle</td><td class="description"><noscript></noscript></td></tr><tr><td>dragging</td><td class="description"><noscript></noscript></td></tr><tr><td>settling</td><td class="description"><noscript></noscript></td></tr></tbody></table></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/viewpagerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewPagerAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Documentation archive React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Documentation archive React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/0.29/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.29</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>React Native Versions</h1><p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p><table class="versions"><tbody><tr><th>master</th><td><a href="/react-native/releases/next">Docs</a></td><td></td></tr><tr><th>0.29-rc</th><td><a href="/react-native/releases/0.29">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.29.0-rc">Release Notes</a></td></tr><tr><th>(current) 0.28</th><td><a href="/react-native">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.28.0">Release Notes</a></td></tr><tr><th>0.27</th><td><a href="/react-native/releases/0.27">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.27.0">Release Notes</a></td></tr><tr><th>0.26</th><td><a href="/react-native/releases/0.26">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.26.0">Release Notes</a></td></tr><tr><th>0.25</th><td><a href="/react-native/releases/0.25">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.25.0">Release Notes</a></td></tr><tr><th>0.24</th><td><a href="/react-native/releases/0.24">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.24.0">Release Notes</a></td></tr><tr><th>0.23</th><td><a href="/react-native/releases/0.23">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.23.0">Release Notes</a></td></tr><tr><th>0.22</th><td><a href="/react-native/releases/0.22">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.22.0">Release Notes</a></td></tr><tr><th>0.21</th><td><a href="/react-native/releases/0.21">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.21.0">Release Notes</a></td></tr><tr><th>0.20</th><td><a href="/react-native/releases/0.20">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.20.0">Release Notes</a></td></tr><tr><th>0.19</th><td><a href="/react-native/releases/0.19">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.19.0">Release Notes</a></td></tr><tr><th>0.18</th><td><a href="/react-native/releases/0.18">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.18.0">Release Notes</a></td></tr></tbody></table></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Documentation archive React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Documentation archive React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>React Native Versions</h1><p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p><table class="versions"><tbody><tr><th>master</th><td><a href="/react-native/releases/next">Docs</a></td><td></td></tr><tr><th>0.29-rc</th><td><a href="/react-native/releases/0.29">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.29.0-rc">Release Notes</a></td></tr><tr><th>(current) 0.28</th><td><a href="/react-native">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.28.0">Release Notes</a></td></tr><tr><th>0.27</th><td><a href="/react-native/releases/0.27">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.27.0">Release Notes</a></td></tr><tr><th>0.26</th><td><a href="/react-native/releases/0.26">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.26.0">Release Notes</a></td></tr><tr><th>0.25</th><td><a href="/react-native/releases/0.25">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.25.0">Release Notes</a></td></tr><tr><th>0.24</th><td><a href="/react-native/releases/0.24">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.24.0">Release Notes</a></td></tr><tr><th>0.23</th><td><a href="/react-native/releases/0.23">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.23.0">Release Notes</a></td></tr><tr><th>0.22</th><td><a href="/react-native/releases/0.22">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.22.0">Release Notes</a></td></tr><tr><th>0.21</th><td><a href="/react-native/releases/0.21">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.21.0">Release Notes</a></td></tr><tr><th>0.20</th><td><a href="/react-native/releases/0.20">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.20.0">Release Notes</a></td></tr><tr><th>0.19</th><td><a href="/react-native/releases/0.19">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.19.0">Release Notes</a></td></tr><tr><th>0.18</th><td><a href="/react-native/releases/0.18">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.18.0">Release Notes</a></td></tr></tbody></table></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -14,6 +14,6 @@
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.29" ], hitsPerPage: 5 }
algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>