Using a ScrollView

ScrollView是一个通用的滚动容器，可容纳多个组件和视图。可滚动的项目不必是同质的，并且您可以垂直和水平滚动（通过设置horizontal属性）。

本示例创建一个垂直ScrollView图像和文字混合在一起。

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可以配置为允许使用滑动手势通过使用pagingEnabled道具来浏览视图。使用ViewPagerAndroid组件也可以在Android上实现视图之间水平滑动。

带有单个项目的ScrollView可用于允许用户缩放内容。设置maximumZoomScale和minimumZoomScale道具和你的用户将能够使用捏和扩大手势放大和缩小。

ScrollView最适合呈现少量有限尺寸的东西。ScrollView即使当前没有显示在屏幕上，也会呈现a的所有元素和视图。如果你有更多可以放在屏幕上的物品的列表，你应该使用一个FlatList。所以让我们接下来了解一下列表视图。