ScrollView Component ใน React Native คืออะไร และวิธีใช้งาน

ScrollView เป็นคอนเทนเนอร์เลื่อน (scrolling container) ที่สามารถรองรับคอมโพเนนท์และวิวหลายตัว เป็นหนึ่งในคอมโพเนนท์หลัก (core components) ของ React Native และสามารถเลื่อนได้ทั้งแนวตั้งและแนวนอน

ScrollView จะแมปไปยัง native equivalent ตามแพลตฟอร์มที่รันอยู่ ดังนั้นบน Android จะแมปเป็น <ScrollView>, บน iOS เป็น <UIScrollView> และบนเว็บเป็น <div>

ตัวอย่าง 1: การเลื่อนแนวตั้งด้วย ScrollView

ในตัวอย่างนี้ ScrollView มี View พร้อม Text component และถูกล็อคไว้ใน View

เพื่อใช้งาน ScrollView ให้นำเข้าคอมโพเนนท์ก่อน:

import { Text, View, StyleSheet, ScrollView } from 'react-native';

ข้อมูลที่จะแสดงใน ScrollView เก็บไว้ใน names ใน state object ดังนี้:

state = {
    names: [
        {'name': 'Ben', 'id': 1},
        {'name': 'Susan', 'id': 2},
        {'name': 'Robert', 'id': 3},
        {'name': 'Mary', 'id': 4},
        {'name': 'Daniel', 'id': 5},
        {'name': 'Laura', 'id': 6},
        {'name': 'John', 'id': 7},
        {'name': 'Debra', 'id': 8},
        {'name': 'Aron', 'id': 9},
        {'name': 'Ann', 'id': 10},
        {'name': 'Steve', 'id': 11},
        {'name': 'Olivia', 'id': 12}
    ]
}

ข้อมูล this.state.names เป็นอาร์เรย์ ใช้เมธอด map() บนอาร์เรย์ และแสดงชื่อภายใน View -> Text Component:

    {this.state.names.map((item, index) => ({item.name})) }

ScrollView เหมาะสำหรับข้อมูลคงที่ (static data) ขนาดเล็ก แต่หากต้องการทำงานกับข้อมูลไดนามิกที่อาจเป็นรายการใหญ่ ควรใช้ FlatList แทน

โค้ดเต็มสำหรับ ScrollView:

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from 'react-native';
class ScrollViewExample extends Component {
    state = {
        names: [
            {'name': 'Ben', 'id': 1},
            {'name': 'Susan', 'id': 2},
            {'name': 'Robert', 'id': 3},
            {'name': 'Mary', 'id': 4},
            {'name': 'Daniel', 'id': 5},
            {'name': 'Laura', 'id': 6},
            {'name': 'John', 'id': 7},
            {'name': 'Debra', 'id': 8},
            {'name': 'Aron', 'id': 9},
            {'name': 'Ann', 'id': 10},
            {'name': 'Steve', 'id': 11},
            {'name': 'Olivia', 'id': 12}
        ]
    }
    render(props) {
        return (
            
                
                    {this.state.names.map((item, index) => ({item.name})) }
                
            
        );
    }
}
export default ScrollViewExample;
const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        backgroundColor: '#d2f7f1'
    }
})

ผลลัพธ์

ตัวอย่าง 2: การเลื่อนแนวนอนด้วย ScrollView

โดยค่าเริ่มต้น ScrollView แสดงข้อมูลแนวตั้ง เพื่อแสดงแนวนอน ใช้ props horizontal={true} ดังนี้:

    {this.state.names.map((item, index) => ({item.name})) }

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from 'react-native';
class ScrollViewExample extends Component {
    state = {
        names: [
            {'name': 'Ben', 'id': 1},
            {'name': 'Susan', 'id': 2},
            {'name': 'Robert', 'id': 3},
            {'name': 'Mary', 'id': 4},
            {'name': 'Daniel', 'id': 5},
            {'name': 'Laura', 'id': 6},
            {'name': 'John', 'id': 7},
            {'name': 'Debra', 'id': 8},
            {'name': 'Aron', 'id': 9},
            {'name': 'Ann', 'id': 10},
            {'name': 'Steve', 'id': 11},
            {'name': 'Olivia', 'id': 12}
        ]
    }
    render(props) {
        return (
            
                
                    {this.state.names.map((item, index) => ({item.name})) }
                
            
        );
    }
}
export default ScrollViewExample;
const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        height: 100,
        backgroundColor: '#d2f7f1'
    }
})

ผลลัพธ์