mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-05-10 09:29:39 +08:00
072ef0a0d4
Summary: TLDR even more docs changes So I created a More Resources doc that aggregates the high-quality-but-off-site stuff. Let's try to put more outlinks there. Also I removed the stuff on Support that was not support, and some misc changes to clean stuff up. Closes https://github.com/facebook/react-native/pull/8329 Differential Revision: D3471669 Pulled By: JoelMarcey fbshipit-source-id: 54edd543ced1b3a8f3d0baca5475ac96bae6e487
71 lines
2.5 KiB
Markdown
71 lines
2.5 KiB
Markdown
---
|
|
id: basics-component-scrollview
|
|
title: ScrollView
|
|
layout: docs
|
|
category: The 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);
|
|
```
|