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
2.5 KiB
| id | title | layout | category | permalink | next |
|---|---|---|---|---|---|
| basics-component-scrollview | ScrollView | docs | The Basics | docs/basics-component-scrollview.html | 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 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.
TextViewandListVieware specialized scrollable containers.
This contrived example creates a horizontal ScrollView with a static amount of heterogenous elements (images and text).
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);