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
@@ -81,7 +81,10 @@ use if you have fixed height items, for example:</p><div class="prism language-j
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span></div><p>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="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
|
||||
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="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
|
||||
|
||||
@@ -25,11 +25,14 @@ 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/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> 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="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.</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.</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 in between each section. Also receives <code>highlighted</code>, <code>leadingItem</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
|
||||
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="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.</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.</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
|
||||
@@ -47,12 +50,13 @@ sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div
|
||||
<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="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
|
||||
}) => ?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">Array<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> Array<<span class="token punctuation">{</span>
|
||||
data<span class="token punctuation">:</span> Array<SectionItem<span class="token operator">></span><span class="token punctuation">,</span>
|
||||
key<span class="token punctuation">:</span> string<span class="token punctuation">,</span>
|
||||
@@ -110,7 +114,14 @@ const renderSectionHeader <span class="token operator">=</span> <span class="tok
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
const CustomSeparatorComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>text<span class="token punctuation">,</span> highlighted<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>
|
||||
const renderSectionFooter <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>section<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>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>header<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>headerText<span class="token punctuation">}</span><span class="token operator">></span>SECTION FOOTER<span class="token punctuation">:</span> <span class="token punctuation">{</span>section<span class="token punctuation">.</span>key<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<SeparatorComponent <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
const CustomSeparatorComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">,</span> text<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>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>customSeparator<span class="token punctuation">,</span> highlighted && <span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'rgb(217, 217, 217)'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>separatorText<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
@@ -173,11 +184,11 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
|
||||
<AnimatedSectionList
|
||||
ListHeaderComponent<span class="token operator">=</span><span class="token punctuation">{</span>HeaderComponent<span class="token punctuation">}</span>
|
||||
ListFooterComponent<span class="token operator">=</span><span class="token punctuation">{</span>FooterComponent<span class="token punctuation">}</span>
|
||||
SectionSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</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 operator">></span>
|
||||
<CustomSeparatorComponent highlighted<span class="token operator">=</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span> text<span class="token operator">=</span><span class="token string">"SECTION SEPARATOR"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
SectionSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span>
|
||||
<CustomSeparatorComponent <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>info<span class="token punctuation">}</span> text<span class="token operator">=</span><span class="token string">"SECTION SEPARATOR"</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 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 operator">></span>
|
||||
<CustomSeparatorComponent highlighted<span class="token operator">=</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span> text<span class="token operator">=</span><span class="token string">"ITEM SEPARATOR"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span>
|
||||
<CustomSeparatorComponent <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>info<span class="token punctuation">}</span> text<span class="token operator">=</span><span class="token string">"ITEM SEPARATOR"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">}</span>
|
||||
debug<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>debug<span class="token punctuation">}</span>
|
||||
enableVirtualization<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>virtualized<span class="token punctuation">}</span>
|
||||
@@ -187,15 +198,23 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
|
||||
refreshing<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItemComponent<span class="token punctuation">}</span>
|
||||
renderSectionHeader<span class="token operator">=</span><span class="token punctuation">{</span>renderSectionHeader<span class="token punctuation">}</span>
|
||||
renderSectionFooter<span class="token operator">=</span><span class="token punctuation">{</span>renderSectionFooter<span class="token punctuation">}</span>
|
||||
stickySectionHeadersEnabled
|
||||
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>renderItem<span class="token punctuation">:</span> renderStackedItem<span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'s1'</span><span class="token punctuation">,</span> data<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">'Item In Header Section'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">'Section s1'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'header item'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'s2'</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">'1st item'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">'Section s2'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'noimage0'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">'2nd item'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">'Section s2'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'noimage1'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
renderItem<span class="token punctuation">:</span> renderStackedItem<span class="token punctuation">,</span>
|
||||
key<span class="token punctuation">:</span> <span class="token string">'s1'</span><span class="token punctuation">,</span>
|
||||
data<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">'Item In Header Section'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">'Section s1'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'header item'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
key<span class="token punctuation">:</span> <span class="token string">'s2'</span><span class="token punctuation">,</span>
|
||||
data<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">'1st item'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">'Section s2'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'noimage0'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">'2nd item'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">'Section s2'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'noimage1'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>filteredSectionData<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span>
|
||||
|
||||
@@ -22,22 +22,17 @@ any of your <code>renderItem</code>, Header, Footer, etc. functions depend on an
|
||||
<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="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
|
||||
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="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: {
|
||||
item: Item,
|
||||
index: number,
|
||||
separators: {
|
||||
highlight: () => void,
|
||||
unhighlight: () => void,
|
||||
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
|
||||
},
|
||||
}) => ?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
|
||||
<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
|
||||
|
||||
Reference in New Issue
Block a user