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-10-10 22:26:47 +00:00
parent fc087cd32c
commit baebd76dca
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2017/03/13/better-list-views.html
+1 -1
View File
@@ -4,7 +4,7 @@
<span class="token operator">/</span><span class="token operator">&gt;</span></div><h3><a class="anchor" name="sectionlist-https-facebook-github-io-react-native-releases-next-docs-sectionlist-html"></a><a href="https://facebook.github.io/react-native/releases/next/docs/sectionlist.html" target="_blank"><code>&lt;SectionList&gt;</code></a> <a class="hash-link" href="#sectionlist-https-facebook-github-io-react-native-releases-next-docs-sectionlist-html">#</a></h3><p>If you want to render a set of data broken into logical sections, maybe with section headers (e.g. in an alphabetical address book), and potentially with heterogeneous data and rendering (such as a profile view with some buttons followed by a composer, then a photo grid, then a friend grid, and finally a list of stories), this is the way to go.</p><div class="prism language-javascript"><span class="token operator">&lt;</span>SectionList
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><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>ListItem title<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">&gt;</span><span class="token punctuation">}</span>
renderSectionHeader<span class="token operator">=</span><span class="token punctuation">{</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">=&gt;</span> <span class="token operator">&lt;</span>H1 title<span class="token operator">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>key<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">}</span>
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token comment" spellcheck="true"> // homogenous rendering between sections
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token comment" spellcheck="true"> // homogeneous rendering between sections
</span> <span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>