mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 17:45:59 +00:00
b1e49832ef
Summary: We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs. **For guides**: `previous` is manually inserted into the metadata of the actual markdown file. **For APIs/Components**: `previous` is established via code within `extractDocs.js` > This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close. Closes https://github.com/facebook/react-native/pull/8754 Differential Revision: D3557972 Pulled By: hramos fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a
3.1 KiB
3.1 KiB
| id | title | layout | category | permalink | next | previous |
|---|---|---|---|---|---|---|
| using-a-scrollview | Using a ScrollView | docs | The Basics | docs/using-a-scrollview.html | using-a-listview | handling-text-input |
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).
This example creates a vertical ScrollView with both images and text mixed together.
import React, { Component } from 'react';
import{ AppRegistry, ScrollView, Image, Text, View } 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 next.