View: nó là gì, thuộc tính container và React Native

View trong React Native là gì

View là một thành phần cơ bản của React Native, đóng vai trò là container cho các thành phần khác. Nó hỗ trợ tạo kiểu thông qua StyleSheet, bố cục thông qua Flexbox, xử lý chạm, hoạt ảnh và biến đổi. View là một lớp trừu tượng trên các phần tử container gốc: UIView trên iOS và android.view.View trên Android.

Trong React Native, không thể sử dụng các phần tử HTML — thay vào đó, tất cả các bố cục được xây dựng từ View. Ngay cả Text và Image cũng thường được bọc trong View để định vị. Thành phần có thể trống (chỉ là một container) hoặc chứa bất kỳ số lượng phần tử con nào ở bất kỳ độ sâu lồng nhau nào.

View hỗ trợ render trên cả hai nền tảng từ một cơ sở mã JavaScript duy nhất. Các thuộc tính Flexbox, lề, nền, bóng và đường viền hoạt động giống hệt nhau trên iOS và Android. Sự khác biệt giữa các nền tảng là tối thiểu — ví dụ: bóng trên iOS sử dụng shadowColor/shadowOffset, trong khi trên Android sử dụng elevation.

Theo React Native Layout Docs, 2024, View được tối ưu hóa cho thiết bị di động: nó không tạo các view gốc bổ sung trong quá trình tối ưu hóa flatten và xử lý chính xác các cập nhật xếp tầng khi kiểu của phần tử cha thay đổi.

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

Thành phần View có một bộ props phong phú để kiểm soát giao diện, bố cục và tính tương tác. Tất cả các props được chia thành nhiều loại: props kiểu, sự kiện chạm, khả năng tiếp cận và các tính năng dành riêng cho nền tảng. Hãy khám phá các nhóm chính.

Props kiểu của View

View hỗ trợ tất cả các thuộc tính CSS tiêu chuẩn cho các nền tảng di động. Các thuộc tính chính bao gồm: flexDirection, justifyContent, alignItems để định vị; margin, padding để tạo khoảng cách; backgroundColor, borderRadius cho giao diện; width, height, maxHeight cho kích thước.

Sự kiện chạm và cử chỉ

View có thể xử lý các sự kiện chạm thông qua các props onStartShouldSetResponder, onMoveShouldSetResponder và onResponderGrant. Các sự kiện này cho phép triển khai cử chỉ tùy chỉnh mà không cần thư viện. Đối với các thao tác chạm tiêu chuẩn, onTouchStart, onTouchEnd và onPress (thông qua Pressable hoặc TouchableOpacity) được sử dụng.

Props dành riêng cho nền tảng

Trên iOS, shadowColor, shadowOffset, shadowOpacity, shadowRadius có sẵn cho bóng. Trên Android, các thuộc tính này bị bỏ qua — thay vào đó, elevation được sử dụng (bóng kiểu thẻ). Callback onLayout được kích hoạt khi kích thước của View thay đổi, hữu ích cho các bố cục thích ứng.

Bố cục với View và Flexbox

Flexbox là cơ chế bố cục duy nhất trong React Native (không giống như web, nơi có Grid và Float). Tất cả việc định vị phần tử được thực hiện thông qua các thuộc tính Flexbox của thành phần View. Theo mặc định, View có flexDirection được đặt thành column, không phải row như trên web, phù hợp với hướng dọc của màn hình di động.

Các thuộc tính Flexbox chính trong View

flexDirection xác định hướng của trục chính: column (mặc định) hoặc row. justifyContent kiểm soát sự phân bố dọc theo trục chính (flex-start, center, space-between). alignItems — dọc theo trục chéo (stretch — giá trị mặc định). flex chỉ định tỷ lệ không gian khả dụng cho phần tử con.

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

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

Ví dụ cho thấy một cấu trúc điển hình: View bên ngoài — thẻ, row bên trong — một hàng với hình đại diện và khối văn bản, content — một cột với tên và vai trò. Cấu trúc View lồng nhau này là tiêu chuẩn cho bất kỳ màn hình React Native nào.

Sự khác biệt giữa View và div HTML

Mặc dù View về mặt khái niệm tương tự như div HTML, nhưng có những khác biệt chính cần hiểu khi chuyển mã từ web sang React Native. Những khác biệt này liên quan đến việc render, kiểu và hành vi mặc định.

Sự khác biệt quan trọng nhất là flexDirection: column theo mặc định. Điều này có nghĩa là nếu không có cấu hình rõ ràng, các phần tử con được sắp xếp theo chiều dọc, không phải chiều ngang. Sự khác biệt thứ hai: chiều rộng và chiều cao của View theo mặc định mở rộng để lấp đầy tất cả không gian khả dụng của cha (tương tự như width: 100% trong CSS).

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

Hãy xem hai ví dụ thực tế về việc sử dụng View trong các ứng dụng React Native: căn giữa nội dung trên toàn màn hình và tạo lưới thẻ phản hồi. Cả hai mẫu đều xuất hiện trong mọi dự án.

Ví dụ 1: Màn hình giữ chỗ với căn giữa

Để tạo trạng thái trống, một View với flex: 1 và căn giữa trên cả hai trục được sử dụng. Đây là mẫu tiêu chuẩn cho màn hình tải, trạng thái lỗi và danh sách trống.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

Sự kết hợp của justifyContent: center và alignItems: center trong View với flex: 1 căn giữa nội dung trên cả hai trục trên toàn màn hình. Đây là mẫu phổ biến nhất của việc sử dụng View trong React Native.

Ví dụ 2: Lưới thẻ với Flexbox

Để hiển thị hai cột sản phẩm hoặc bài viết, một View với flexDirection: row, flexWrap: wrap và các View con có chiều rộng cố định được sử dụng. Mẫu này thay thế CSS Grid trong React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

Trong ví dụ này, View bên ngoài với flexWrap: wrap hoạt động như một đối tượng tương tự của CSS Grid. Mỗi thẻ chiếm 48% chiều rộng, để lại khoảng trống giữa các cột. Đây là mẫu điển hình cho danh mục và nguồn cấp nội dung.