mirror of
https://github.com/status-im/react-native.git
synced 2025-01-16 04:24:15 +00:00
8378f0f9f7
Summary: Explain the **motivation** for making this change. What existing problem does the pull request solve? I had tried fixing a broken link in a previous commit (#11453). My commit was merged, but it did not resolve the underlying problem. I have looked into how links should be formed for the docs and have fixed the original problem as well as updated all other links to be consistent. Previous link formats: - /docs/sample.html <-- broken link - sample.html <-- broken link - https://facebook.github.io/react-native/docs/sample.html <-- works - /react-native/docs/sample.html <-- works - docs/sample.html <-- works (permalink format) This PR updates all links to the permalink format. **Test plan (required)** I ran the website locally and manually tested half of the links in each category. They all worked. ``` $ cd website $ npm install && npm start ``` Closes https://github.com/facebook/react-native/pull/12064 Differential Revision: D4489153 Pulled By: mkonicek fbshipit-source-id: bf0231d941ba147317595c3b3466dc579a887169
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'
|
|
|
|
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>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
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.
|