mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-03 22:48:25 +08:00
daf3bd1b88
Summary: should be consistent with semicolons... Thanks for submitting a PR! Please read these instructions carefully: - [x] Explain the **motivation** for making this change. - [x] Provide a **test plan** demonstrating that the code is solid. - [x] Match the **code formatting** of the rest of the codebase. - [x] Target the `master` branch, NOT a "stable" branch. I think it's good to stay consistent when using semicolons and when not using semicolons. What existing problem does the pull request solve? Consistency, I guess? None really - it's a document (markdown) change. Not much to test. Closes https://github.com/facebook/react-native/pull/13993 Differential Revision: D5144814 Pulled By: shergin fbshipit-source-id: 8bf345897738458183047a229a3d327bec4b64ae
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(
|
|
'IScrolledDownAndWhatHappenedNextShockedMe',
|
|
() => 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 `ListView` instead. So let's [learn about the ListView](docs/using-a-listview.html) next.
|