66 lines
3.1 KiB
Markdown
66 lines
3.1 KiB
Markdown
---
|
|
id: using-a-scrollview
|
|
title: Using a ScrollView
|
|
layout: docs
|
|
category: The Basics
|
|
permalink: docs/using-a-scrollview.html
|
|
next: using-a-listview
|
|
previous: handling-text-input
|
|
---
|
|
|
|
The [`ScrollView`](/react-native/docs/scrollview.html) 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 `horizontal` property).
|
|
|
|
This example creates a vertical `ScrollView` with both images and text mixed together.
|
|
|
|
```ReactNativeWebPlayer
|
|
import React, { Component } from 'react';
|
|
import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native'
|
|
|
|
class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
|
|
render() {
|
|
return(
|
|
<ScrollView>
|
|
<Text style={{fontSize:96}}>Scroll me plz</Text>
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Text style={{fontSize:96}}>If you like</Text>
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Text style={{fontSize:96}}>Scrolling down</Text>
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Text style={{fontSize:96}}>What's the best</Text>
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Text style={{fontSize:96}}>Framework around?</Text>
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Image source={require('./img/favicon.png')} />
|
|
<Text style={{fontSize:80}}>React Native</Text>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
AppRegistry.registerComponent(
|
|
'IScrolledDownAndWhatHappenedNextShockedMe',
|
|
() => IScrolledDownAndWhatHappenedNextShockedMe);
|
|
```
|
|
|
|
`ScrollView` works best to present a small amount of things of a limited size. All the elements and views of a `ScrollView` 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 `ListView` instead. So let's [learn about the ListView](/react-native/docs/using-a-listview.html) next.
|