mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
File diff suppressed because one or more lines are too long
@@ -65,68 +65,7 @@ changes. This includes the <code>data</code> prop and parent component state.</l
|
||||
offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
|
||||
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
|
||||
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
|
||||
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>Also inherets <a href="docs/scrollview.html#props" target="_blank">ScrollView Props</a>, unless it is nested in another FlatList of same orientation.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass<any></span></span> <a class="hash-link" href="docs/flatlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code> and
|
||||
<code>leadingItem</code> props are provided. <code>renderItem</code> provides <code>separators.highlight</code>/<code>unhighlight</code>
|
||||
which will update the <code>highlighted</code> prop, but you can also add custom props with
|
||||
<code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listemptycomponent"></a>ListEmptyComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/flatlist.html#listemptycomponent">#</a></h4><div><p>Rendered when the list is empty. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/flatlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/flatlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="columnwrapperstyle"></a>columnWrapperStyle?: <span class="propType">StyleObj</span> <a class="hash-link" href="docs/flatlist.html#columnwrapperstyle">#</a></h4><div><p>Optional custom style for multi-item rows generated when numColumns > 1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data: <span class="propType"><span>?$ReadOnlyArray<ItemT></span></span> <a class="hash-link" href="docs/flatlist.html#data">#</a></h4><div><p>For simplicity, data is just a plain array. If you want to use something else, like an
|
||||
immutable list, use the underlying <code>VirtualizedList</code> directly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/flatlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
|
||||
any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
|
||||
<code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemlayout"></a>getItemLayout?: <span class="propType">(
|
||||
data: ?Array<ItemT>,
|
||||
index: number,
|
||||
) => {length: number, offset: number, index: number}</span> <a class="hash-link" href="docs/flatlist.html#getitemlayout">#</a></h4><div><p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if
|
||||
you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to
|
||||
use if you have fixed height items, for example:</p><div class="prism language-javascript">getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token punctuation">{</span>length<span class="token punctuation">:</span> ITEM_HEIGHT<span class="token punctuation">,</span> offset<span class="token punctuation">:</span> ITEM_HEIGHT <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span></div><p>Adding <code>getItemLayout</code> can be a great performance boost for lists of several hundred items.
|
||||
Remember to include separator length (height or width) in your offset calculation if you
|
||||
specify <code>ItemSeparatorComponent</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#horizontal">#</a></h4><div><p>If true, renders items next to each other horizontally instead of stacked vertically.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender: <span class="propType">number</span> <a class="hash-link" href="docs/flatlist.html#initialnumtorender">#</a></h4><div><p>How many items to render in the initial batch. This should be enough to fill the screen but not
|
||||
much more. Note these items will never be unmounted as part of the windowed rendering in order
|
||||
to improve perceived performance of scroll-to-top actions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialscrollindex"></a>initialScrollIndex?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/flatlist.html#initialscrollindex">#</a></h4><div><p>Instead of starting at the top with the first item, start at <code>initialScrollIndex</code>. This
|
||||
disables the "scroll to top" optimization that keeps the first <code>initialNumToRender</code> items
|
||||
always rendered and immediately renders the items starting at this initial index. Requires
|
||||
<code>getItemLayout</code> to be implemented.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inverted"></a>inverted?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#inverted">#</a></h4><div><p>Reverses the direction of scroll. Uses scale transforms of -1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: ItemT, index: number) => string</span> <a class="hash-link" href="docs/flatlist.html#keyextractor">#</a></h4><div><p>Used to extract a unique key for a given item at the specified index. Key is used for caching
|
||||
and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then
|
||||
falls back to using the index, like React does.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="legacyimplementation"></a>legacyImplementation?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#legacyimplementation">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numcolumns"></a>numColumns: <span class="propType">number</span> <a class="hash-link" href="docs/flatlist.html#numcolumns">#</a></h4><div><p>Multiple columns can only be rendered with <code>horizontal={false}</code> and will zig-zag like a
|
||||
<code>flexWrap</code> layout. Items should all be the same height - masonry layouts are not supported.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType"><span>?(info: {distanceFromEnd: number}) => void</span></span> <a class="hash-link" href="docs/flatlist.html#onendreached">#</a></h4><div><p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered
|
||||
content.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/flatlist.html#onendreachedthreshold">#</a></h4><div><p>How far from the end (in units of visible length of the list) the bottom edge of the
|
||||
list must be from the end of the content to trigger the <code>onEndReached</code> callback.
|
||||
Thus a value of 0.5 will trigger <code>onEndReached</code> when the end of the content is
|
||||
within half the visible length of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType"><span>?() => void</span></span> <a class="hash-link" href="docs/flatlist.html#onrefresh">#</a></h4><div><p>If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
|
||||
sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onviewableitemschanged"></a>onViewableItemsChanged?: <span class="propType"><span>?(info: {
|
||||
viewableItems: Array<ViewToken>,
|
||||
changed: Array<ViewToken>,
|
||||
}) => void</span></span> <a class="hash-link" href="docs/flatlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/flatlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {
|
||||
item: ItemT,
|
||||
index: number,
|
||||
separators: {
|
||||
highlight: () => void,
|
||||
unhighlight: () => void,
|
||||
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
|
||||
},
|
||||
}) => ?React.Element<any></span> <a class="hash-link" href="docs/flatlist.html#renderitem">#</a></h4><div><p>Takes an item from <code>data</code> and renders it into the list. Example usage:</p><div class="prism language-javascript"><span class="token operator"><</span>FlatList
|
||||
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span>Platform<span class="token punctuation">.</span>OS <span class="token operator">!==</span> <span class="token string">'android'</span> <span class="token operator">&&</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>style<span class="token punctuation">.</span>separator<span class="token punctuation">,</span> highlighted <span class="token operator">&&</span> <span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Title Text'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'item1'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">,</span> separators<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>TouchableHighlight
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_onPress</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
onShowUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>highlight<span class="token punctuation">}</span>
|
||||
onHideUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>unhighlight<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>Text<span class="token operator">></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div><p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic
|
||||
<code>separators.updateProps</code> function which let's you set whatever props you want to change the
|
||||
rendering of either the leading separator or trailing separator in case the more common
|
||||
<code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for
|
||||
your use-case.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/flatlist.html#viewabilityconfig">#</a></h4><div><p>See <code>ViewabilityHelper</code> for flow type and further documentation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewoffset"></a><span class="platform">android</span>progressViewOffset?: <span class="propType">number</span> <a class="hash-link" href="docs/flatlist.html#progressviewoffset">#</a></h4><div><p>Set this when offset is needed for the loading indicator to show correctly.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at the specified index such that it is positioned in the viewable area
|
||||
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>Also inherets <a href="docs/scrollview.html#props" target="_blank">ScrollView Props</a>, unless it is nested in another FlatList of same orientation.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="numcolumns"></a>numColumns?: <a class="hash-link" href="docs/flatlist.html#numcolumns">#</a></h4></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at the specified index such that it is positioned in the viewable area
|
||||
such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the
|
||||
middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p><p>Note: cannot scroll to locations outside the render window without specifying the
|
||||
<code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoitem">#</a></h4><div><p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p><p>Note: cannot scroll to locations outside the render window without specifying the
|
||||
|
||||
@@ -22,8 +22,7 @@
|
||||
parent, and then mask that view with text that says "Basic Mask".</p><p>The alpha channel of the view rendered by the <code>maskElement</code> prop determines how
|
||||
much of the view's content and background shows through. Fully or partially
|
||||
opaque pixels allow the underlying content to show through but fully
|
||||
transparent pixels block that content.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/maskedviewios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/maskedviewios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="children"></a>children: <span class="propType">any</span> <a class="hash-link" href="docs/maskedviewios.html#children">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maskelement"></a>maskElement: <span class="propType">React.Element<*></span> <a class="hash-link" href="docs/maskedviewios.html#maskelement">#</a></h4><div><p>Should be a React element to be rendered and applied as the
|
||||
mask for the child element.</p></div></div></div></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/MaskedView/MaskedViewIOS.ios.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/listview.html#content">← Prev</a><a class="docs-next" href="docs/modal.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
transparent pixels block that content.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/maskedviewios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/maskedviewios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maskelement"></a>maskElement: <span class="propType">element</span> <a class="hash-link" href="docs/maskedviewios.html#maskelement">#</a></h4></div></div></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/MaskedView/MaskedViewIOS.ios.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/listview.html#content">← Prev</a><a class="docs-next" href="docs/modal.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>itemValue<span class="token punctuation">,</span> itemIndex<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>language<span class="token punctuation">:</span> itemValue<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">"Java"</span> value<span class="token operator">=</span><span class="token string">"java"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">"JavaScript"</span> value<span class="token operator">=</span><span class="token string">"js"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>Picker<span class="token operator">></span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/picker.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/picker.html#viewproptypes">#</a></h4></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/picker.html#onvaluechange">#</a></h4><div><p>Callback for when an item is selected. This is called with the following parameters:
|
||||
<span class="token operator"><</span><span class="token operator">/</span>Picker<span class="token operator">></span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/picker.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/picker.html#viewproptypes">#</a></h4></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/picker.html#onvaluechange">#</a></h4><div><p>Callback for when an item is selected. This is called with the following parameters:
|
||||
- <code>itemValue</code>: the <code>value</code> prop of the item that was selected
|
||||
- <code>itemPosition</code>: the index of the selected item in this picker</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedvalue"></a>selectedValue?: <span class="propType">any</span> <a class="hash-link" href="docs/picker.html#selectedvalue">#</a></h4><div><p>Value matching value of one of the items. Can be a string or an integer.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/picker.html#style">#</a></h4></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/picker.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="enabled"></a><span class="platform">android</span>enabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/picker.html#enabled">#</a></h4><div><p>If set to false, the picker will be disabled, i.e. the user will not be able to make a
|
||||
selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode?: <span class="propType"><span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/picker.html#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>'dialog': Show a modal dialog. This is the default.</li><li>'dropdown': Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt?: <span class="propType">string</span> <a class="hash-link" href="docs/picker.html#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/picker.html#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Picker/Picker.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/navigatorios.html#content">← Prev</a><a class="docs-next" href="docs/pickerios.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
- <code>itemPosition</code>: the index of the selected item in this picker</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedvalue"></a>selectedValue?: <span class="propType">any</span> <a class="hash-link" href="docs/picker.html#selectedvalue">#</a></h4><div><p>Value matching value of one of the items. Can be a string or an integer.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">pickerStyleType</span> <a class="hash-link" href="docs/picker.html#style">#</a></h4></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/picker.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="enabled"></a><span class="platform">android</span>enabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/picker.html#enabled">#</a></h4><div><p>If set to false, the picker will be disabled, i.e. the user will not be able to make a
|
||||
selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode?: <span class="propType">enum('dialog', 'dropdown')</span> <a class="hash-link" href="docs/picker.html#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>'dialog': Show a modal dialog. This is the default.</li><li>'dropdown': Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt?: <span class="propType">string</span> <a class="hash-link" href="docs/picker.html#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle?: <span class="propType">itemStylePropType</span> <a class="hash-link" href="docs/picker.html#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Picker/Picker.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/navigatorios.html#content">← Prev</a><a class="docs-next" href="docs/pickerios.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -25,48 +25,7 @@ changes. This includes the <code>data</code> prop and parent component state.</l
|
||||
offscreen. This means it's possible to scroll faster than the fill rate and momentarily see
|
||||
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
|
||||
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
|
||||
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/sectionlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass<any></span></span> <a class="hash-link" href="docs/sectionlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code>,
|
||||
<code>section</code>, and <code>[leading/trailing][Item/Separator]</code> props are provided. <code>renderItem</code> provides
|
||||
<code>separators.highlight</code>/<code>unhighlight</code> which will update the <code>highlighted</code> prop, but you can also
|
||||
add custom props with <code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listemptycomponent"></a>ListEmptyComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/sectionlist.html#listemptycomponent">#</a></h4><div><p>Rendered when the list is empty. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/sectionlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the very end of the list. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/sectionlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the very beginning of the list. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sectionseparatorcomponent"></a>SectionSeparatorComponent?: <span class="propType"><span>?ReactClass<any></span></span> <a class="hash-link" href="docs/sectionlist.html#sectionseparatorcomponent">#</a></h4><div><p>Rendered at the top and bottom of each section (note this is different from
|
||||
<code>ItemSeparatorComponent</code> which is only rendered between items). These are intended to separate
|
||||
sections from the headers above and below and typically have the same highlight response as
|
||||
<code>ItemSeparatorComponent</code>. Also receives <code>highlighted</code>, <code>[leading/trailing][Item/Separator]</code>,
|
||||
and any custom props from <code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/sectionlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
|
||||
any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
|
||||
<code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender: <span class="propType">number</span> <a class="hash-link" href="docs/sectionlist.html#initialnumtorender">#</a></h4><div><p>How many items to render in the initial batch. This should be enough to fill the screen but not
|
||||
much more. Note these items will never be unmounted as part of the windowed rendering in order
|
||||
to improve perceived performance of scroll-to-top actions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inverted"></a>inverted?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#inverted">#</a></h4><div><p>Reverses the direction of scroll. Uses scale transforms of -1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: Item, index: number) => string</span> <a class="hash-link" href="docs/sectionlist.html#keyextractor">#</a></h4><div><p>Used to extract a unique key for a given item at the specified index. Key is used for caching
|
||||
and as the react key to track item re-ordering. The default extractor checks item.key, then
|
||||
falls back to using the index, like react does. Note that this sets keys for each item, but
|
||||
each overall section still needs its own key.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="legacyimplementation"></a>legacyImplementation?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#legacyimplementation">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType"><span>?(info: {distanceFromEnd: number}) => void</span></span> <a class="hash-link" href="docs/sectionlist.html#onendreached">#</a></h4><div><p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered
|
||||
content.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/sectionlist.html#onendreachedthreshold">#</a></h4><div><p>How far from the end (in units of visible length of the list) the bottom edge of the
|
||||
list must be from the end of the content to trigger the <code>onEndReached</code> callback.
|
||||
Thus a value of 0.5 will trigger <code>onEndReached</code> when the end of the content is
|
||||
within half the visible length of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType"><span>?() => void</span></span> <a class="hash-link" href="docs/sectionlist.html#onrefresh">#</a></h4><div><p>If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
|
||||
sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onviewableitemschanged"></a>onViewableItemsChanged?: <span class="propType"><span>?(info: {
|
||||
viewableItems: Array<ViewToken>,
|
||||
changed: Array<ViewToken>,
|
||||
}) => void</span></span> <a class="hash-link" href="docs/sectionlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the
|
||||
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/sectionlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {
|
||||
item: Item,
|
||||
index: number,
|
||||
section: SectionT,
|
||||
separators: {
|
||||
highlight: () => void,
|
||||
unhighlight: () => void,
|
||||
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
|
||||
},
|
||||
}) => ?React.Element<any></span> <a class="hash-link" href="docs/sectionlist.html#renderitem">#</a></h4><div><p>Default renderer for every item in every section. Can be over-ridden on a per-section basis.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionfooter"></a>renderSectionFooter?: <span class="propType"><span>?(info: {section: SectionT}) => ?React.Element<any></span></span> <a class="hash-link" href="docs/sectionlist.html#rendersectionfooter">#</a></h4><div><p>Rendered at the bottom of each section.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader?: <span class="propType"><span>?(info: {section: SectionT}) => ?React.Element<any></span></span> <a class="hash-link" href="docs/sectionlist.html#rendersectionheader">#</a></h4><div><p>Rendered at the top of each section. These stick to the top of the <code>ScrollView</code> by default on
|
||||
iOS. See <code>stickySectionHeadersEnabled</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sections"></a>sections: <span class="propType">$ReadOnlyArray<SectionT></span> <a class="hash-link" href="docs/sectionlist.html#sections">#</a></h4><div><p>The actual data to render, akin to the <code>data</code> prop in <a href="/react-native/docs/flatlist.html" target=""><code><FlatList></code></a>.</p><p>General shape:</p><div class="prism language-javascript">sections<span class="token punctuation">:</span> $ReadOnlyArray<span class="token operator"><</span><span class="token punctuation">{</span>
|
||||
data<span class="token punctuation">:</span> $ReadOnlyArray<span class="token operator"><</span>SectionItem<span class="token operator">></span><span class="token punctuation">,</span>
|
||||
renderItem<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">:</span> SectionItem<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">?</span>React<span class="token punctuation">.</span>Element<span class="token operator"><</span><span class="token operator">*</span><span class="token operator">></span><span class="token punctuation">,</span>
|
||||
ItemSeparatorComponent<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token operator">?</span>ReactClass<span class="token operator"><</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">:</span> boolean<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token operator">></span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/sectionlist.html#stickysectionheadersenabled">#</a></h4><div><p>Makes section headers stick to the top of the screen until the next one pushes it off. Only
|
||||
enabled by default on iOS because that is the platform standard there.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/sectionlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltolocation"></a>scrollToLocation<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/sectionlist.html#scrolltolocation">#</a></h4><div><p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section)
|
||||
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/sectionlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <a class="hash-link" href="docs/sectionlist.html#stickysectionheadersenabled">#</a></h4></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/sectionlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltolocation"></a>scrollToLocation<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/sectionlist.html#scrolltolocation">#</a></h4><div><p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section)
|
||||
positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top (and may be
|
||||
covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a
|
||||
fixed number of pixels to offset the final target position, e.g. to compensate for sticky
|
||||
|
||||
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
@@ -26,25 +26,25 @@ child.</p><p>Example:</p><div class="prism language-javascript">render<span clas
|
||||
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="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/viewpagerandroid.html#viewproptypes">#</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"><span><span>literal | </span>literal</span></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.
|
||||
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('none', 'on-drag')</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.
|
||||
- 'none' (the default), drags do not dismiss the keyboard.
|
||||
- 'on-drag', 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
|
||||
- 'on-drag', 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
|
||||
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 "position" 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">function</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'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'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
|
||||
(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="peekenabled"></a>peekEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/viewpagerandroid.html#peekenabled">#</a></h4><div><p>Whether enable showing peekFraction or not. If this is true, the preview of
|
||||
last and next page will show in current screen. Defaults to false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/viewpagerandroid.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
|
||||
edge-to-edge.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="peekenabled"></a>peekEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewpagerandroid.html#peekenabled">#</a></h4><div><p>Whether enable showing peekFraction or not. If this is true, the preview of
|
||||
last and next page will show in current screen. Defaults to false.</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.
|
||||
The default value is true.</p></div></div></div><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><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ViewPager/ViewPagerAndroid.android.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/view.html#content">← Prev</a><a class="docs-next" href="docs/virtualizedlist.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -13,37 +13,7 @@ changes. This includes the <code>data</code> prop and parent component state.</l
|
||||
offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
|
||||
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
|
||||
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
|
||||
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="cellrenderercomponent"></a>CellRendererComponent?: <span class="propType"><span>?ReactClass<any></span></span> <a class="hash-link" href="docs/virtualizedlist.html#cellrenderercomponent">#</a></h4><div><p>Each cell is rendered using this element. Can be a React Component Class,
|
||||
or a render function. Defaults to using View.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listemptycomponent"></a>ListEmptyComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/virtualizedlist.html#listemptycomponent">#</a></h4><div><p>Rendered when the list is empty. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/virtualizedlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass<any> | </span>React.Element<any></span></span></span> <a class="hash-link" href="docs/virtualizedlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items. Can be a React Component Class, a render function, or
|
||||
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array<{key: string}> but you can override
|
||||
getItem, getItemCount, and keyExtractor to handle any type of index-based data.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="debug"></a>debug?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#debug">#</a></h4><div><p><code>debug</code> will turn on extra logging and visual overlays to aid with debugging both usage and
|
||||
implementation, but with a significant perf hit.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablevirtualization"></a>disableVirtualization: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#disablevirtualization">#</a></h4><div><p>DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
|
||||
unmounts react instances that are outside of the render window. You should only need to disable
|
||||
this for debugging purposes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
|
||||
any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
|
||||
<code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitem"></a>getItem: <span class="propType">(data: any, index: number) => ?Item</span> <a class="hash-link" href="docs/virtualizedlist.html#getitem">#</a></h4><div><p>A generic accessor for extracting an item from any sort of data blob.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemcount"></a>getItemCount: <span class="propType">(data: any) => number</span> <a class="hash-link" href="docs/virtualizedlist.html#getitemcount">#</a></h4><div><p>Determines how many items are in the data blob.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemlayout"></a>getItemLayout?: <span class="propType">(
|
||||
data: any,
|
||||
index: number,
|
||||
) => {length: number, offset: number, index: number}</span> <a class="hash-link" href="docs/virtualizedlist.html#getitemlayout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#horizontal">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#initialnumtorender">#</a></h4><div><p>How many items to render in the initial batch. This should be enough to fill the screen but not
|
||||
much more. Note these items will never be unmounted as part of the windowed rendering in order
|
||||
to improve perceived performance of scroll-to-top actions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialscrollindex"></a>initialScrollIndex?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/virtualizedlist.html#initialscrollindex">#</a></h4><div><p>Instead of starting at the top with the first item, start at <code>initialScrollIndex</code>. This
|
||||
disables the "scroll to top" optimization that keeps the first <code>initialNumToRender</code> items
|
||||
always rendered and immediately renders the items starting at this initial index. Requires
|
||||
<code>getItemLayout</code> to be implemented.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inverted"></a>inverted?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#inverted">#</a></h4><div><p>Reverses the direction of scroll. Uses scale transforms of -1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: Item, index: number) => string</span> <a class="hash-link" href="docs/virtualizedlist.html#keyextractor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxtorenderperbatch"></a>maxToRenderPerBatch: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#maxtorenderperbatch">#</a></h4><div><p>The maximum number of items to render in each incremental render batch. The more rendered at
|
||||
once, the better the fill rate, but responsiveness my suffer because rendering content may
|
||||
interfere with responding to button taps or other interactions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType"><span>?(info: {distanceFromEnd: number}) => void</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onendreached">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onendreachedthreshold">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType"><span>?Function</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onlayout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType"><span>?Function</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onrefresh">#</a></h4><div><p>If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
|
||||
sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onviewableitemschanged"></a>onViewableItemsChanged?: <span class="propType"><span>?(info: {
|
||||
viewableItems: Array<ViewToken>,
|
||||
changed: Array<ViewToken>,
|
||||
}) => void</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the
|
||||
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: any) => ?React.Element<any></span> <a class="hash-link" href="docs/virtualizedlist.html#renderitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent?: <span class="propType">(props: Object) => React.Element<any></span> <a class="hash-link" href="docs/virtualizedlist.html#renderscrollcomponent">#</a></h4><div><p>Render a custom scroll component, e.g. with a differently styled <code>RefreshControl</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a>scrollEventThrottle?: <a class="hash-link" href="docs/virtualizedlist.html#scrolleventthrottle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="updatecellsbatchingperiod"></a>updateCellsBatchingPeriod: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#updatecellsbatchingperiod">#</a></h4><div><p>Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
|
||||
screen. Similar fill rate/responsiveness tradeoff as <code>maxToRenderPerBatch</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/virtualizedlist.html#viewabilityconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="windowsize"></a>windowSize: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#windowsize">#</a></h4><div><p>Determines the maximum number of items rendered outside of the visible area, in units of
|
||||
visible lengths. So if your list fills the screen, then <code>windowSize={21}</code> (the default) will
|
||||
render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
|
||||
this number will reduce memory consumption and may improve performance, but will increase the
|
||||
chance that fast scrolling may reveal momentary blank areas of unrendered content.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewoffset"></a><span class="platform">android</span>progressViewOffset?: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#progressviewoffset">#</a></h4><div><p>Set this when offset is needed for the loading indicator to show correctly.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/virtualizedlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoend">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoindex">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoitem">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltooffset"></a>scrollToOffset<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltooffset">#</a></h4><div><p>Scroll to a specific content pixel offset in the list.</p><p>Param <code>offset</code> expects the offset to scroll to.
|
||||
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablevirtualization"></a>disableVirtualization?: <a class="hash-link" href="docs/virtualizedlist.html#disablevirtualization">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="first"></a>first: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#first">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <a class="hash-link" href="docs/virtualizedlist.html#horizontal">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender?: <a class="hash-link" href="docs/virtualizedlist.html#initialnumtorender">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor?: <a class="hash-link" href="docs/virtualizedlist.html#keyextractor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="last"></a>last: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#last">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxtorenderperbatch"></a>maxToRenderPerBatch?: <a class="hash-link" href="docs/virtualizedlist.html#maxtorenderperbatch">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <a class="hash-link" href="docs/virtualizedlist.html#onendreachedthreshold">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a>scrollEventThrottle?: <a class="hash-link" href="docs/virtualizedlist.html#scrolleventthrottle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="updatecellsbatchingperiod"></a>updateCellsBatchingPeriod?: <a class="hash-link" href="docs/virtualizedlist.html#updatecellsbatchingperiod">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="windowsize"></a>windowSize?: <a class="hash-link" href="docs/virtualizedlist.html#windowsize">#</a></h4></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/virtualizedlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoend">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoindex">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoitem">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltooffset"></a>scrollToOffset<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltooffset">#</a></h4><div><p>Scroll to a specific content pixel offset in the list.</p><p>Param <code>offset</code> expects the offset to scroll to.
|
||||
In case of <code>horizontal</code> is true, the offset is the x-value,
|
||||
in any other case the offset is the y-value.</p><p>Param <code>animated</code> (<code>true</code> by default) defines whether the list
|
||||
should do an animation while scrolling.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/virtualizedlist.html#recordinteraction">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/virtualizedlist.html#flashscrollindicators">#</a></h4></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/virtualizedlist.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h4><strong>Type:</strong><br>IntersectionTypeAnnotation</div></div></span></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Lists/VirtualizedList.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/viewpagerandroid.html#content">← Prev</a><a class="docs-next" href="docs/webview.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
Reference in New Issue
Block a user