mirror of
https://github.com/status-im/react-native.git
synced 2025-01-27 01:40:08 +00:00
c419ae8c8d
Summary: The new list views, FlatList and SectionList, are recommended over ListView. Built website on localhost and verified the guide is rendered correctly.  Closes https://github.com/facebook/react-native/pull/14210 Differential Revision: D5149151 Pulled By: hramos fbshipit-source-id: f28f02ee8893c4723c73d610b96ccda51cc31410
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`](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 } from 'react-native';
|
|
|
|
export default 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>
|
|
);
|
|
}
|
|
}
|
|
|
|
// skip these lines if using Create React Native App
|
|
AppRegistry.registerComponent(
|
|
'AwesomeProject',
|
|
() => 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 `FlatList` instead. So let's [learn about list views](docs/using-a-listview.html) next.
|