Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2017-03-04 00:41:29 +00:00
parent 9b0a99f1b3
commit 7ee120310b
4 changed files with 74 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/flatlist.html
+25 -9
View File
@@ -89,7 +89,9 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
</span> <span class="token punctuation">}</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
const filterRegex <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token function">String<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>filterText<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&#x27;i&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const filter <span class="token operator">=</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>text<span class="token punctuation">)</span> <span class="token operator">||</span> filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const filter <span class="token operator">=</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>text<span class="token punctuation">)</span> <span class="token operator">||</span> filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>title<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
const filteredData <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">filter<span class="token punctuation">(</span></span>filter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;UIExplorerPage
@@ -124,9 +126,14 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
data<span class="token operator">=</span><span class="token punctuation">{</span>filteredData<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>
disableVirtualization<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>virtualized<span class="token punctuation">}</span>
getItemLayout<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>fixedHeight <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_getItemLayout <span class="token punctuation">:</span> undefined<span class="token punctuation">}</span>
getItemLayout<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>fixedHeight <span class="token operator">?</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_getItemLayout <span class="token punctuation">:</span>
undefined
<span class="token punctuation">}</span>
horizontal<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>horizontal<span class="token punctuation">}</span>
key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal <span class="token operator">?</span> <span class="token string">&#x27;h&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;v&#x27;</span><span class="token punctuation">)</span> <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>fixedHeight <span class="token operator">?</span> <span class="token string">&#x27;f&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;d&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal <span class="token operator">?</span> <span class="token string">&#x27;h&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;v&#x27;</span><span class="token punctuation">)</span> <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>fixedHeight <span class="token operator">?</span> <span class="token string">&#x27;f&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;d&#x27;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
legacyImplementation<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
numColumns<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>
onRefresh<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onRefresh<span class="token punctuation">}</span>
@@ -157,22 +164,31 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">_shouldItemUpdate<span class="token punctuation">(</span></span>prev<span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/**
* Note that this does not check state.horizontal or state.fixedheight because we blow away the
* whole list by changing the key in those cases. Make sure that you do the same in your code,
* or incorporate all relevant data into the item data, or skip this optimization entirely.
* Note that this does not check state.horizontal or state.fixedheight
* because we blow away the whole list by changing the key in those cases.
* Make sure that you do the same in your code, or incorporate all relevant
* data into the item data, or skip this optimization entirely.
*/</span>
<span class="token keyword">return</span> prev<span class="token punctuation">.</span>item <span class="token operator">!</span><span class="token operator">==</span> next<span class="token punctuation">.</span>item<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true"> // This is called when items change viewability by scrolling into or out of the viewable area.
<span class="token comment" spellcheck="true"> // This is called when items change viewability by scrolling into or out of
</span> <span class="token comment" spellcheck="true"> // the viewable area.
</span> _onViewableItemsChanged <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
changed<span class="token punctuation">:</span> Array&lt;<span class="token punctuation">{</span>
key<span class="token punctuation">:</span> string<span class="token punctuation">,</span> isViewable<span class="token punctuation">:</span> boolean<span class="token punctuation">,</span> item<span class="token punctuation">:</span> any<span class="token punctuation">,</span> index<span class="token punctuation">:</span> <span class="token operator">?</span>number<span class="token punctuation">,</span> section<span class="token operator">?</span><span class="token punctuation">:</span> any
key<span class="token punctuation">:</span> string<span class="token punctuation">,</span>
isViewable<span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>
item<span class="token punctuation">:</span> any<span class="token punctuation">,</span>
index<span class="token punctuation">:</span> <span class="token operator">?</span>number<span class="token punctuation">,</span>
section<span class="token operator">?</span><span class="token punctuation">:</span> any<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Impressions can be logged here
</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>logViewable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">infoLog<span class="token punctuation">(</span></span><span class="token string">&#x27;onViewableItemsChanged: &#x27;</span><span class="token punctuation">,</span> info<span class="token punctuation">.</span>changed<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>v<span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token string">&#x27;...&#x27;</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 function">infoLog<span class="token punctuation">(</span></span>
<span class="token string">&#x27;onViewableItemsChanged: &#x27;</span><span class="token punctuation">,</span>
info<span class="token punctuation">.</span>changed<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>v<span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token string">&#x27;...&#x27;</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>
_pressItem <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
releases/next/docs/scrollview.html
+10 -11
View File
@@ -6,17 +6,16 @@ set the height of the view directly (discouraged) or make sure all parent
views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the
view stack can lead to errors here, which the element inspector makes
easy to debug.</p><p>Doesn&#x27;t yet support other contained responders from blocking this scroll
view from becoming the responder.</p><p><code>&lt;ScrollView&gt;</code> vs <code>&lt;ListView&gt;</code> - which one to use?
ScrollView simply renders all its react child components at once. That
makes it very easy to understand and use.
On the other hand, this has a performance downside. Imagine you have a very
long list of items you want to display, worth of couple of your ScrollView&#x27;s
heights. Creating JS components and native views upfront for all its items,
which may not even be shown, will contribute to slow rendering of your
screen and increased memory usage.</p><p>This is where ListView comes into play. ListView renders items lazily,
just when they are about to appear. This laziness comes at cost of a more
complicated API, which is worth it unless you are rendering a small fixed
set of items.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/scrollview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/scrollview.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle?: <span class="propType"><code>StyleSheetPropType(ViewStylePropTypes)</code></span> <a class="hash-link" href="docs/scrollview.html#contentcontainerstyle">#</a></h4><div><p>These styles will be applied to the scroll view content container which
view from becoming the responder.</p><p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/flatlist.html" target=""><code>&lt;FlatList&gt;</code></a> - which one to use?</p><p><code>ScrollView</code> simply renders all its react child components at once. That
makes it very easy to understand and use.</p><p>On the other hand, this has a performance downside. Imagine you have a very
long list of items you want to display, maybe several screens worth of
content. Creating JS components and native views for everythign all at once,
much of which may not even be shown, will contribute to slow rendering and
increased memory usage.</p><p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily,
just when they are about to appear, and removes items that scroll way off
screen to save memory and processing time.</p><p><code>FlatList</code> is also handy if you want to render separators between your items,
multiple columns, infinite scroll loading, or any number of other features it
supports out of the box.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/scrollview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/scrollview.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle?: <span class="propType"><code>StyleSheetPropType(ViewStylePropTypes)</code></span> <a class="hash-link" href="docs/scrollview.html#contentcontainerstyle">#</a></h4><div><p>These styles will be applied to the scroll view content container which
wraps all of the child views. Example:</p><p> return (
&lt;ScrollView contentContainerStyle={styles.contentContainer}&gt;
&lt;/ScrollView&gt;
releases/next/docs/sectionlist.html
+21 -8
View File
@@ -87,7 +87,9 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
const filterRegex <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token function">String<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>filterText<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&#x27;i&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const filter <span class="token operator">=</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>text<span class="token punctuation">)</span> <span class="token operator">||</span> filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const filter <span class="token operator">=</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>text<span class="token punctuation">)</span> <span class="token operator">||</span> filterRegex<span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>item<span class="token punctuation">.</span>title<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
const filteredData <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">filter<span class="token punctuation">(</span></span>filter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;UIExplorerPage
@@ -110,8 +112,12 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
&lt;SectionList
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> <span class="token operator">=</span><span class="token operator">&gt;</span> &lt;CustomSeparatorComponent text<span class="token operator">=</span><span class="token string">&quot;SECTION SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</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> <span class="token operator">=</span><span class="token operator">&gt;</span> &lt;CustomSeparatorComponent text<span class="token operator">=</span><span class="token string">&quot;ITEM SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span><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> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;CustomSeparatorComponent text<span class="token operator">=</span><span class="token string">&quot;SECTION SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</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> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;CustomSeparatorComponent text<span class="token operator">=</span><span class="token string">&quot;ITEM SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<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>
onRefresh<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 operator">&gt;</span> <span class="token function">alert<span class="token punctuation">(</span></span><span class="token string">&#x27;onRefresh: nothing to refresh :P&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
onViewableItemsChanged<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onViewableItemsChanged<span class="token punctuation">}</span>
@@ -123,8 +129,8 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
<span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Item In Header Section&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s1&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;0&#x27;</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">&#x27;s2&#x27;</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">&#x27;First item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;0&#x27;</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">&#x27;Second item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;1&#x27;</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">&#x27;1st item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;0&#x27;</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">&#x27;2nd item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;1&#x27;</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">&#x27;Filtered Items&#x27;</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> filteredData<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
@@ -133,11 +139,18 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
&lt;<span class="token operator">/</span>UIExplorerPage<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
_renderItemComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> &lt;ItemComponent item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_pressItem<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true"> // This is called when items change viewability by scrolling into our out of the viewable area.
_renderItemComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;ItemComponent item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_pressItem<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true"> // This is called when items change viewability by scrolling into our out of
</span> <span class="token comment" spellcheck="true"> // the viewable area.
</span> _onViewableItemsChanged <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
changed<span class="token punctuation">:</span> Array&lt;<span class="token punctuation">{</span>
key<span class="token punctuation">:</span> string<span class="token punctuation">,</span> isViewable<span class="token punctuation">:</span> boolean<span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span>columns<span class="token punctuation">:</span> Array&lt;<span class="token operator">*</span><span class="token operator">&gt;</span><span class="token punctuation">}</span><span class="token punctuation">,</span> index<span class="token punctuation">:</span> <span class="token operator">?</span>number<span class="token punctuation">,</span> section<span class="token operator">?</span><span class="token punctuation">:</span> any
key<span class="token punctuation">:</span> string<span class="token punctuation">,</span>
isViewable<span class="token punctuation">:</span> boolean<span class="token punctuation">,</span>
item<span class="token punctuation">:</span> <span class="token punctuation">{</span>columns<span class="token punctuation">:</span> Array&lt;<span class="token operator">*</span><span class="token operator">&gt;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
index<span class="token punctuation">:</span> <span class="token operator">?</span>number<span class="token punctuation">,</span>
section<span class="token operator">?</span><span class="token punctuation">:</span> any
<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Impressions can be logged here
releases/next/docs/virtualizedlist.html
+18 -6
View File
File diff suppressed because one or more lines are too long