mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
41 lines
8.5 KiB
Markdown
41 lines
8.5 KiB
Markdown
---
|
|
id: refreshcontrol
|
|
title: RefreshControl
|
|
category: Components
|
|
permalink: docs/refreshcontrol.html
|
|
---
|
|
<div><div><p>This component is used inside a ScrollView or ListView to add pull to refresh
|
|
functionality. When the ScrollView is at <code>scrollY: 0</code>, swiping down
|
|
triggers an <code>onRefresh</code> event.</p><h3><a class="anchor" name="usage-example"></a>Usage example <a class="hash-link" href="docs/refreshcontrol.html#usage-example">#</a></h3><div class="prism language-js"><span class="token keyword">class</span> <span class="token class-name">RefreshableList</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">super</span><span class="token punctuation">(</span>props<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 operator">=</span> <span class="token punctuation">{</span>
|
|
refreshing<span class="token punctuation">:</span> <span class="token boolean">false</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">_onRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</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>refreshing<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token function">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</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><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>refreshing<span class="token punctuation">:</span> <span class="token boolean">false</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 function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>ListView
|
|
refreshControl<span class="token operator">=</span><span class="token punctuation">{</span>
|
|
<span class="token operator"><</span>RefreshControl
|
|
refreshing<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>refreshing<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><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</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 operator">...</span>
|
|
<span class="token operator">></span>
|
|
<span class="token operator">...</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>ListView<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 punctuation">}</span></div><p><strong>Note:</strong> <code>refreshing</code> is a controlled prop, this is why it needs to be set to true
|
|
in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediately.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/refreshcontrol.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/refreshcontrol.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType">function</span> <a class="hash-link" href="docs/refreshcontrol.html#onrefresh">#</a></h4><div><p>Called when the view starts refreshing.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing: <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#refreshing">#</a></h4><div><p>Whether the view should be indicating an active refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="colors"></a><span class="platform">android</span>colors?: <span class="propType"><span>[<a href="docs/colors.html">color</a>]</span></span> <a class="hash-link" href="docs/refreshcontrol.html#colors">#</a></h4><div><p>The colors (at least one) that will be used to draw the refresh indicator.</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/refreshcontrol.html#enabled">#</a></h4><div><p>Whether the pull to refresh functionality is enabled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressbackgroundcolor"></a><span class="platform">android</span>progressBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#progressbackgroundcolor">#</a></h4><div><p>The background color of the refresh indicator.</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/refreshcontrol.html#progressviewoffset">#</a></h4><div><p>Progress view top offset</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="size"></a><span class="platform">android</span>size?: <span class="propType">enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)</span> <a class="hash-link" href="docs/refreshcontrol.html#size">#</a></h4><div><p>Size of the refresh indicator, see RefreshControl.SIZE.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#tintcolor">#</a></h4><div><p>The color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a><span class="platform">ios</span>title?: <span class="propType">string</span> <a class="hash-link" href="docs/refreshcontrol.html#title">#</a></h4><div><p>The title displayed under the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a><span class="platform">ios</span>titleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#titlecolor">#</a></h4><div><p>Title color.</p></div></div></div></div> |