Component ScrollView trong React Native là gì và cách sử dụng

ScrollView là container cuộn có thể chứa nhiều component và view. Là một core component của React Native, cho phép cuộn cả dọc và ngang. ScrollView sẽ map đến native component tương ứng: <ScrollView> trên Android, <UIScrollView> trên iOS, <div> trên web.

Ví dụ 1: Cuộn dọc (Vertical)

Import component:

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

Dữ liệu trong state.names:

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}
    ]
}

Dùng map() để render từng item trong View > Text:

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

Lưu ý: ScrollView phù hợp dữ liệu tĩnh, kích thước nhỏ. Danh sách lớn, động nên dùng FlatList.

Mã hoàn chỉnh:

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'
    }
})

Kết quả

Ví dụ 2: Cuộn ngang (Horizontal)

Thêm horizontal={true}:

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

Mã hoàn chỉnh:

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'
    }
})

Kết quả