mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
52 lines
22 KiB
Markdown
52 lines
22 KiB
Markdown
---
|
|
id: version-0.50-using-a-scrollview
|
|
title: using-a-scrollview
|
|
original_id: using-a-scrollview
|
|
---
|
|
<a id="content"></a><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><div><p>The <a href="docs/scrollview.html" target="_blank">ScrollView</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"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <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> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">IScrolledDownAndWhatHappenedNextShockedMe</span> <span class="token keyword">extends</span> <span class="token class-name">Component</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>ScrollView<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>Scroll me plz<span class="token operator"><</span><span class="token operator">/</span>Text<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><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<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><span class="token operator">/</span>Text<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><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<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><span class="token operator">/</span>Text<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><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<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><span class="token operator">/</span>Text<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><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<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><span class="token operator">/</span>Text<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><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<span class="token operator"><</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</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>
|
|
<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><span class="token operator">/</span>Text<span class="token operator">></span>
|
|
<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>
|
|
<span class="token comment" spellcheck="true">
|
|
// skip these lines if using Create React Native App
|
|
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>
|
|
<span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">(</span><span class="token punctuation">)</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="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%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%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B" frameborder="0"></iframe></div><p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="docs/viewpagerandroid.html" target="_blank">ViewPagerAndroid</a> component.</p><p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p><p>The ScrollView 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>FlatList</code> instead. So let's <a href="docs/using-a-listview.html" target="_blank">learn about list views</a> next.</p></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/handling-touches.html#content">← Previous</a><a class="docs-next btn" href="docs/using-a-listview.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/UsingAScrollView.md">Improve this page</a> by sending a pull request!</p> |