mirror of
https://github.com/status-im/react-native.git
synced 2025-02-02 12:43:54 +00:00
6668cd2129
Summary: Add basic information about the generic `ScrollView` -- talk a bit about how it renders elements and a quick compare against something like a `ListView`. Provide a simple example. Fixes #8261 Closes https://github.com/facebook/react-native/pull/8266 Differential Revision: D3465105 Pulled By: JoelMarcey fbshipit-source-id: 3a2e1eac6e877669763fc6b8bb0fc78ebe870ab1
71 lines
2.5 KiB
Markdown
71 lines
2.5 KiB
Markdown
---
|
|
id: basics-component-scrollview
|
|
title: ScrollView
|
|
layout: docs
|
|
category: Basics
|
|
permalink: docs/basics-component-scrollview.html
|
|
next: basics-component-listview
|
|
---
|
|
|
|
Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
|
|
|
|
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).
|
|
|
|
`ScrollView` works best to present a list of short, static items of a known quantity. All the elements and views of a `ScrollView` are rendered a priori, even if they are not currently shown on the screen. Contrast this with a `ListView`, which render only those views that are on the screen and remove views that go off-screen.
|
|
|
|
> [`TextView`](/react-native/docs/basics-component-textview.html) and [`ListView`](/react-native/docs/basics-component-listview.html) are specialized scrollable containers.
|
|
|
|
This contrived example creates a horizontal `ScrollView` with a static amount of heterogenous elements (images and text).
|
|
|
|
```JavaScript
|
|
import React, { AppRegistry, ScrollView, Image, Text, View } from 'react-native'
|
|
|
|
var SimpleScrollView = React.createClass({
|
|
render(){
|
|
return(
|
|
<ScrollView horizontal={true}>
|
|
<View>
|
|
<Image source={require('./img/check.png')} />
|
|
</View>
|
|
<View>
|
|
<Image source={require('./img/check.png')} />
|
|
</View>
|
|
<View>
|
|
<Image source={require('./img/check.png')} />
|
|
</View>
|
|
<View>
|
|
<Text style={{fontSize:96}}>Text1</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{fontSize:96}}>Text2</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{fontSize:96}}>Text3</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{fontSize:96}}>Text4</Text>
|
|
</View>
|
|
<View>
|
|
<Image source={require('./img/check.png')} />
|
|
</View>
|
|
<View>
|
|
<Image source={require('./img/check.png')} />
|
|
</View>
|
|
<View>
|
|
<Image source={require('./img/check.png')} />
|
|
</View>
|
|
<View>
|
|
<Text style={{fontSize:96}}>Text5</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{fontSize:96}}>Text6</Text>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
});
|
|
|
|
|
|
AppRegistry.registerComponent('MyApp', () => SimpleScrollView);
|
|
```
|