Text: nó là gì, hiển thị văn bản và React Native

Text trong React Native là gì

Text là một thành phần React Native để hiển thị nội dung văn bản. Không giống như phát triển web, nơi có nhiều thẻ ngữ nghĩa cho văn bản, trong React Native tất cả các phần tử văn bản được tạo thông qua Text. Thành phần này có thể hiển thị cả văn bản đơn giản và cấu trúc phức tạp với Text lồng nhau và các đoạn được tạo kiểu.

Text tự động xử lý ngắt dòng, quản lý họ phông chữ, kích thước, màu sắc và căn chỉnh. Thành phần này hỗ trợ các sự kiện chạm (onPress), cho phép tạo các liên kết có thể nhấp mà không cần trình bao bọc bổ sung. Một hạn chế quan trọng: Text không thể được lồng trực tiếp trong View — chỉ bên trong các thành phần Text khác hoặc dưới dạng con trực tiếp.

Theo React Native Nested Text, 2024, các thành phần Text lồng nhau kế thừa kiểu từ cha. Điều này cho phép đặt kiểu cơ bản ở cấp cao nhất và ghi đè các thuộc tính riêng lẻ cho các đoạn cụ thể — tương tự như cách span hoạt động với CSS trên web.

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

Thành phần Text cung cấp một tập hợp các props để kiểm soát hiển thị, hành vi và khả năng truy cập. Các danh mục chính: props kiểu (phông chữ, kích thước, màu sắc, căn chỉnh), props hiển thị (numberOfLines, lineBreakMode) và props tương tác (onPress, onLongPress).

Props hiển thị văn bản

numberOfLines giới hạn số dòng hiển thị, thêm dấu ba chấm ở cuối. ellipsizeMode kiểm soát vị trí dấu ba chấm (head, middle, tail, clip). adjustsFontSizeToFit tự động giảm kích thước phông chữ để văn bản vừa với giới hạn đã đặt. lineBreakMode xác định cách văn bản bị cắt bớt vượt quá numberOfLines.

Props tương tác

Text hỗ trợ onPress và onLongPress để xử lý chạm. Điều này cho phép tạo liên kết văn bản mà không cần sử dụng TouchableOpacity. onTextLayout trả về thông tin về bố cục văn bản sau khi hiển thị — hữu ích cho hoạt ảnh và định vị.

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

Trên iOS, có sẵn disabled (vô hiệu hóa văn bản), selectable (bật chọn), dataDetectorTypes (tự động phát hiện liên kết, số điện thoại, địa chỉ). Trên Android, có sẵn selectable (qua textSelectable) và includeFontPadding (loại bỏ khoảng đệm thừa).

Sự khác biệt giữa Text và các phần tử p, span trong HTML

Mặc dù Text trông giống với các thẻ HTML p và span, nhưng sự khác biệt về kiến trúc là đáng kể. React Native không có mô hình DOM với các phần tử văn bản ngữ nghĩa — tất cả các nút văn bản được xử lý thông qua một thành phần Text duy nhất với các props khác nhau.

Sự khác biệt chính là kế thừa kiểu thông qua lồng ghép Text. Nếu Text bên ngoài có fontSize: 18 và color: blue, tất cả các thành phần Text lồng nhau đều kế thừa các kiểu này. Bất kỳ prop nào cũng có thể được ghi đè trong Text bên trong bằng cách đặt một giá trị cụ thể. Điều này tiết kiệm mã và giữ cấu trúc sạch hơn.

Tạo kiểu văn bản và phông chữ

Text hỗ trợ hầu hết các thuộc tính CSS cho kiểu chữ: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. Trong React Native, phông chữ được kết nối ở cấp nền tảng, không phải qua @font-face.

Sử dụng phông chữ tùy chỉnh

Để sử dụng phông chữ tùy chỉnh, chúng phải được thêm vào thư mục assets/fonts và chỉ định trong react-native.config.js. Sau khi xây dựng lại ứng dụng, phông chữ có sẵn qua fontFamily. React Native không hỗ trợ trực tiếp phông chữ web (Google Fonts) — cần tải xuống tệp .ttf hoặc .otf.

Kế thừa và tầng kiểu

Cơ chế kế thừa trong Text khác với CSS. Kiểu chỉ được truyền từ Text sang Text lồng nhau, nhưng không từ View sang Text. Để đặt phông chữ cho toàn bộ ứng dụng, hãy sử dụng defaultProps của thành phần Text hoặc thành phần bao bọc tùy chỉnh.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

Trong ví dụ này, Text bên ngoài đặt fontSize: 18 và color: #333. Text bên trong kế thừa fontSize (18), nhưng ghi đè fontWeight thành bold và color thành #007AFF. Text bên ngoài chỉ kế thừa các kiểu của riêng nó. Đây là sự tương đồng chính xác với cách span lồng nhau hoạt động trong HTML.

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

Hãy xem xét hai trường hợp sử dụng điển hình của Text trong React Native: định dạng văn bản với lồng ghép và tạo thành phần có thể nhấp với giới hạn dòng.

Ví dụ 1: thẻ tin tức với định dạng

Trong ví dụ này, Text được sử dụng để hiển thị văn bản nhiều dòng với các phần tử được đánh dấu: tiêu đề, ngày tháng và nội dung có liên kết.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

Cấu trúc này có ba thành phần Text độc lập (tiêu đề, ngày tháng, nội dung), mỗi thành phần có kiểu riêng. Bên trong Text nội dung, một Text khác với onPress được lồng vào cho liên kết. Mẫu này được sử dụng cho bảng tin, blog và bình luận.

Ví dụ 2: văn bản với giới hạn dòng

Để hiển thị bản xem trước văn bản với dấu ba chấm, numberOfLines được sử dụng. Đây là mẫu tiêu chuẩn cho thẻ sản phẩm và danh sách bài viết.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

Thuộc tính numberOfLines = 2 giới hạn văn bản ở hai dòng. Nếu văn bản dài hơn, React Native tự động thêm dấu ba chấm ở cuối dòng thứ hai. Tham số ellipsizeMode: 'tail' chỉ định rằng dấu ba chấm phải ở cuối (head, middle và clip cũng có sẵn).