mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 09:35:48 +00:00
f42f2dff37
Summary: Finally, a place where `Button` is properly introduced. This is based on the old Handling Touches guide, which has been simplified (with some content moved over to the scroll views tutorial). I've also updated the ordering of the guides into something that makes more sense to someone just getting started with React Native. Closes https://github.com/facebook/react-native/pull/14371 Differential Revision: D5201127 Pulled By: hramos fbshipit-source-id: 819192e2db9febb8a315f51693dae557752b6002
70 lines
3.6 KiB
Markdown
70 lines
3.6 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-touches
|
|
---
|
|
|
|
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);
|
|
```
|
|
|
|
ScrollViews can be configured to allow paging through views using swiping gestures by using the `pagingEnabled` props. Swiping horizontally between views can also be implemented on Android using the [ViewPagerAndroid](docs/viewpagerandroid.html) component.
|
|
|
|
A ScrollView with a single item can be used to allow the user to zoom content. Set up the `maximumZoomScale` and `minimumZoomScale` props and your user will be able to use pinch and expand gestures to zoom in and out.
|
|
|
|
The 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.
|