ScrollView — nó là gì, vùng chứa cuộn và React Native

ScrollView trong React Native là gì

ScrollView là một thành phần React Native bao bọc nội dung của nó trong một vùng chứa có thể cuộn. Nếu nội dung vượt quá giới hạn màn hình, người dùng có thể cuộn theo chiều dọc hoặc ngang. ScrollView hiển thị tất cả các phần tử con khi gắn kết, bất kể chúng có hiển thị trên màn hình hay không.

Không giống như FlatList, chỉ hiển thị các phần tử hiển thị (hiển thị lười biếng), ScrollView tạo tất cả các khung nhìn gốc ngay lập tức. Điều này làm cho ScrollView thuận tiện cho các biểu mẫu, trang cài đặt, thẻ sản phẩm trên một màn hình — bất cứ nơi nào số lượng phần tử con nhỏ (tối đa 20-30) hoặc số lượng chính xác của chúng chưa được biết trước.

Theo React Native Using ScrollView, 2024, ScrollView hỗ trợ cuộn lồng nhau (ví dụ: ScrollView bên trong ScrollView), hiệu ứng nảy khi chạm đến cạnh, chỉ báo cuộn, định vị snap và xử lý cử chỉ. Trên iOS, ScrollView tự động thêm khoảng đệm SafeArea thông qua contentInsetAdjustmentBehavior.

Thuộc tính và API của thành phần ScrollView

ScrollView cung cấp một bộ thuộc tính phong phú để điều khiển hành vi cuộn, giao diện và tương tác. Hãy xem các nhóm chính: điều khiển cuộn, cài đặt trực quan, sự kiện và tính năng dành riêng cho nền tảng.

Điều khiển hướng và cuộn

horizontal — chuyển hướng cuộn từ dọc (mặc định) sang ngang. scrollEnabled — vô hiệu hóa cuộn khi cần. showsVerticalScrollIndicator và showsHorizontalScrollIndicator kiểm soát việc hiển thị chỉ báo cuộn. bounces (iOS) bật/tắt hiệu ứng nảy khi chạm đến cạnh nội dung.

Sự kiện ScrollView

Sự kiện chính là onScroll, được kích hoạt mỗi lần cuộn và truyền một đối tượng với nativeEvent chứa contentOffset (vị trí hiện tại), contentSize (kích thước nội dung), layoutMeasurement (kích thước vùng hiển thị). onMomentumScrollEnd được kích hoạt sau khi cuộn quán tính hoàn tất. onScrollEndDrag — khi người dùng nhấc ngón tay khỏi màn hình. Những sự kiện này được sử dụng để triển khai cuộn vô hạn, hiệu ứng parallax và tải lười.

Điều khiển theo chương trình qua ref

ScrollView cung cấp các phương thức để điều khiển theo chương trình qua ref: scrollTo({x, y, animated}) cuộn đến tọa độ chỉ định, scrollToEnd({animated}) — cuộn đến cuối nội dung, flashScrollIndicators() — tạm thời hiển thị các chỉ báo cuộn.

const scrollRef = useRef(null);

// Cuộn lên đầu
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Cuộn đến cuối
scrollRef.current.scrollToEnd({ animated: true });

Điều khiển cuộn theo chương trình thường được sử dụng trong trò chuyện (tự động cuộn đến tin nhắn mới nhất), biểu mẫu (cuộn đến trường có lỗi) và băng chuyền (vuốt theo chương trình).

Sự khác biệt giữa ScrollView và FlatList

Việc chọn giữa ScrollView và FlatList là một trong những quyết định kiến trúc chính trong React Native. Cả hai thành phần đều cung cấp cuộn, nhưng sử dụng các chiến lược hiển thị khác nhau về cơ bản. ScrollView hiển thị mọi thứ cùng một lúc, FlatList — chỉ các phần tử hiển thị.

Quy tắc chọn: ScrollView — cho màn hình có số lượng phần tử con đã biết và không vượt quá 20-30 (hồ sơ người dùng, biểu mẫu cài đặt, trang sản phẩm). FlatList — cho danh sách có khả năng nhiều phần tử (nguồn cấp tin tức, danh mục sản phẩm, tin nhắn trò chuyện). Nếu nội dung không đồng nhất (tiêu đề, biểu mẫu, thẻ, chân trang) — ScrollList được ưu tiên hơn vì FlatList mong đợi các phần tử đồng nhất.

Cuộn ngang và phân trang

ScrollView hỗ trợ cuộn ngang qua prop horizontal, làm cho nó lý tưởng cho băng chuyền, thư viện ảnh, tab và danh sách ngang. Khi kết hợp với prop pagingEnabled (iOS) hoặc snapToInterval, ScrollView trở thành thành phần cho điều hướng theo trang.

Băng chuyền ngang

Thuộc tính horizontal thay đổi hướng cuộn. pagingEnabled (iOS) kích hoạt cuộn theo trang, nơi cuộn chỉ dừng ở ranh giới phần tử. snapToInterval đặt bước snap bằng pixel cho cả hai nền tảng.

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

Trong băng chuyền này, pagingEnabled tự động căn chỉnh cuộn theo ranh giới của mỗi hình ảnh. onMomentumScrollEnd cho phép cập nhật chỉ báo trang hiện tại. Băng chuyền như vậy chạy gốc và hỗ trợ cuộn quán tính.

Định vị Snap

Đối với các bước snap không chuẩn, hãy sử dụng snapToInterval (kích thước bước bằng pixel) và snapToAlignment (start, center, end). Với snapToOffsets, bạn có thể chỉ định một mảng các vị trí cụ thể để snap. Điều này hữu ích cho danh sách ngang với các thẻ có kích thước khác nhau.

Ví dụ thực tế với ScrollView

Hãy xem xét hai kịch bản điển hình: màn hình có biểu mẫu (cuộn dọc) và danh sách danh mục ngang. Cả hai đều sử dụng ScrollView với các prop khác nhau để có hành vi tối ưu.

Ví dụ 1: Màn hình hồ sơ với biểu mẫu

Trang chỉnh sửa hồ sơ chứa các phần tử không đồng nhất: hình đại diện, nhiều trường nhập liệu, công tắc và nút lưu. ScrollView cho phép cuộn toàn bộ trang cùng một lúc, thay vì từng khối riêng biệt.

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

Prop keyboardShouldPersistTaps: 'handled' cho phép cuộn và tương tác với biểu mẫu khi bàn phím đang mở. contentContainerStyle áp dụng khoảng đệm cho tất cả nội dung. Mẫu này được sử dụng trong tất cả các màn hình biểu mẫu trong React Native.

Ví dụ 2: Danh sách danh mục ngang

Để điều hướng qua các danh mục (trò chuyện, bộ lọc, tab), một ScrollView ngang với các chip được sử dụng. Thành phần này thường thấy trong các ứng dụng thị trường và mạng xã hội.

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

ScrollView ngang với chỉ báo bị tắt là tiêu chuẩn cho các dải danh mục. Mỗi chip là một thành phần riêng biệt với trạng thái lựa chọn. Prop showsHorizontalScrollIndicator: false loại bỏ thanh cuộn, phù hợp với mong đợi của người dùng ứng dụng di động.