React Native - 09 - 滚动视图

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

这个例子创建了一个垂直的ScrollView，图像和文字混合在一起。

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
            
                Scroll me plz
                
                
                
                
                
                If you like
                
                
                
                
                
                Scrolling down
                
                
                
                
                
                What's the best
                
                
                
                
                
                Framework around?
                
                
                
                
                
                React Native
            
        );
    }
}

image.png

可以将ScrollViews配置为允许使用滑动手势通过使用pagingEnabled道具来分页浏览。在视图之间水平滑动也可以使用ViewPagerAndroid组件在Android上实现。

带有单个项目的滚动视图可用于允许用户缩放内容。设置maximumZoomScale和minimumZoomScale道具，您的用户将能够使用捏和展开手势来放大和缩小。