mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
52 lines
20 KiB
Markdown
52 lines
20 KiB
Markdown
---
|
|
id: version-0.30-using-a-scrollview
|
|
title: using-a-scrollview
|
|
original_id: using-a-scrollview
|
|
---
|
|
<a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="using-a-scrollview"></a>Using a ScrollView <a class="hash-link" href="docs/using-a-scrollview.html#using-a-scrollview">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/0.30-stable/docs/UsingAScrollView.md">Edit on GitHub</a></td></tr></tbody></table><div><p>The <a href="/react-native/docs/scrollview.html" target=""><code>ScrollView</code></a> is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the <code>horizontal</code> property).</p><p>This example creates a vertical <code>ScrollView</code> with both images and text mixed together.</p><div class="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
import<span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> ScrollView<span class="token punctuation">,</span> Image<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span>
|
|
|
|
class <span class="token class-name">IScrolledDownAndWhatHappenedNextShockedMe</span> extends <span class="token class-name">Component</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>
|
|
<span class="token keyword">return</span><span class="token punctuation">(</span>
|
|
<ScrollView<span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span><span class="token number">96</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>Scroll me plz<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span><span class="token number">96</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>If you like<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span><span class="token number">96</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>Scrolling down<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span><span class="token number">96</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>What's the best<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span><span class="token number">96</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>Framework around<span class="token operator">?</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span><span class="token number">80</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>React Native<<span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<<span class="token operator">/</span>ScrollView<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
|
|
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span>
|
|
<span class="token string">'IScrolledDownAndWhatHappenedNextShockedMe'</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> IScrolledDownAndWhatHappenedNextShockedMe<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%2C%20View%20%7D%20from%20'react-native'%0A%0Aclass%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%0AAppRegistry.registerComponent(%0A%20%20'IScrolledDownAndWhatHappenedNextShockedMe'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B" frameborder="0"></iframe></div><p><code>ScrollView</code> works best to present a small amount of things of a limited size. All the elements and views of a <code>ScrollView</code> are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a <code>ListView</code> instead. So let's <a href="/react-native/docs/using-a-listview.html" target="">learn about the ListView</a> next.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/using-a-listview.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></div> |