一、介紹

ScrollView是一個通用的可滾動的容器，其中放入多個元件和檢視，而且這些元件並不需要是同類型的。

ScrollView不僅可以垂直滾動，還能水平滾動（通過horizontal屬性來設定）。  

ScrollView適合用來顯示數量不多的滾動元素。放置在ScollView中的所有元件都會被渲染，即使在螢幕外。

ListView元件如適合用來顯示較長的滾動列表

二、舉例

下面的示例程式碼建立了一個垂直滾動的ScrollView，其中還混雜了圖片和文字元件。

1.在工程根目錄下新建檔案下img，並放入四張圖片

2.匯入元件

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

3.核心程式碼

裡面放了四組相同風格的元件

export default class myprojectname extends Component{
    render() {
        // ScrollView適合用來顯示數量不多的滾動元素。放置在ScollView中的所有元件都會被渲染，即使在螢幕外。
        // ListView元件如適合用來顯示較長的滾動列表
        return(
            <ScrollView>
                <Text style={{fontSize:43}}>滾動檢視 ScrollView</Text>
                <Image source={require('./img/fruit1.jpg')} />
                <Image source={require('./img/fruit2.jpg')} />
                <Image source={require('./img/fruit3.jpg')} />
                <Image source={require('./img/fruit4.android.jpg')} />

                <Text style={{fontSize:42}}>If you like</Text>
                <Image source={require('./img/fruit1.jpg')} />
                <Image source={require('./img/fruit2.jpg')} />
                <Image source={require('./img/fruit3.jpg')} />
                <Image source={require('./img/fruit4.android.jpg')} />

                <Text style={{fontSize:42}}>Scrolling down</Text>
                <Image source={require('./img/fruit1.jpg')} />
                <Image source={require('./img/fruit2.jpg')} />
                <Image source={require('./img/fruit3.jpg')} />
                <Image source={require('./img/fruit4.android.jpg')} />

                <Text style={{fontSize:42}}>What's the best</Text>
                <Image source={require('./img/fruit1.jpg')} />
                <Image source={require('./img/fruit2.jpg')} />
                <Image source={require('./img/fruit3.jpg')} />
                <Image source={require('./img/fruit4.android.jpg')} />

                <Text style={{fontSize:42}}>Framework around?</Text>
                <Image source={require('./img/fruit1.jpg')} />
                <Image source={require('./img/fruit2.jpg')} />
                <Image source={require('./img/fruit3.jpg')} />
                <Image source={require('./img/fruit4.android.jpg')} />

                <Text style={{fontSize:42}}>React Native</Text>
            </ScrollView>
        );
    }
}
 

4.效果