Một màn hình chi tiết hiển thị mã tra cứu, nhưng người dùng không chọn được chữ để đưa sang ứng dụng khác. Bạn không nhất thiết phải đổi vùng hiển thị thành một ô nhập liệu. Với yêu cầu cho chọn văn bản bằng cơ chế native, Text có prop selectable cần được bật rõ ràng.
Bài đối chiếu tài liệu React Native 0.88 ngày 10/11/2026. Demo JSX được rà theo API, chưa chạy Metro, Hermes, build native, simulator hoặc thao tác chọn chữ trên thiết bị. Những bước kiểm tra dưới đây cần thực hiện trên iOS và Android của dự án, không phải kết quả thử native đã có.
Bật khả năng chọn, không tự ghi clipboard
Text.selectable cho phép người dùng chọn text để dùng chức năng copy/paste native; mặc định là false. Prop này không phải một callback “copy toàn bộ” và không tự ghi mã vào clipboard khi component mount.
Sự khác biệt có ích khi thiết kế trải nghiệm. Nếu cần người dùng tự chọn một phần nội dung, selectable phục vụ cách tương tác ấy. Nếu cần một nút bấm sao chép toàn bộ, đó là một yêu cầu hành động riêng cần triển khai theo API hoặc thư viện phù hợp, không được snippet này thực hiện ngầm.
Demo chuyển giữa cho chọn và không cho chọn
Đặt component dưới vào ứng dụng React Native đã cấu hình. Mã là dữ liệu giả, không có kết nối đến một đơn hàng thật:
import React, {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
export default function SelectableCodeDemo() {
const [canSelect, setCanSelect] = useState(true);
const referenceCode = 'AEDEV-DEMO-2048';
return (
<View style={styles.screen}>
<Text style={styles.heading}>Mã tra cứu minh họa</Text>
<Text selectable={canSelect} style={styles.code}>
{referenceCode}
</Text>
<Text style={styles.help}>
Khi bật chọn chữ, hãy dùng thao tác chọn văn bản của thiết bị.
</Text>
<Button
title={canSelect ? 'Tắt chọn chữ' : 'Bật chọn chữ'}
onPress={() => setCanSelect(value => !value)}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {flex: 1, justifyContent: 'center', padding: 24},
heading: {fontSize: 22, marginBottom: 16},
code: {fontSize: 20, padding: 16, backgroundColor: '#eef2f7'},
help: {fontSize: 16, marginVertical: 16},
});Vùng code dùng Text và nhận boolean trực tiếp từ state. Nút điều khiển chỉ đổi khả năng chọn chữ, không đổi referenceCode. Không có TextInput, onPress cho vùng mã hoặc handler tự sao chép, giúp bài thử tập trung vào đúng prop.
Kiểm tra theo luồng người dùng thực sự cần
Khi canSelect bằng true, thực hiện thao tác chọn văn bản trên thiết bị, chọn một phần rồi thử chọn toàn bộ nếu menu native hỗ trợ. Sao chép phần đã chọn, chuyển sang nơi nhập thử và dán để đối chiếu nội dung. Sau đó tắt chọn chữ và kiểm tra lại vùng Text.
Đừng coi việc menu xuất hiện là bằng chứng đủ rằng người dùng đã sao chép đúng mã. Bước dán kiểm tra giúp phát hiện việc chỉ chọn một phần hoặc lấy thêm ký tự ngoài mong muốn. Với mã thật có chiều dài khác, thử cả trường hợp xuống dòng và tăng cỡ chữ hệ thống.
Các menu, cách chọn và điểm điều khiển vùng chọn có thể khác giữa nền tảng. Bài không khẳng định một chuỗi gesture duy nhất luôn hoạt động giống nhau trên mọi thiết bị. Khi viết hướng dẫn trong ứng dụng, dùng mô tả phù hợp với hành vi đã kiểm tra ở nền tảng mục tiêu.
Đừng để tương tác khác làm mờ mục tiêu kiểm tra
Nếu đặt vùng text bên trong một thành phần nhận chạm hoặc một màn hình có gesture riêng, hãy kiểm tra lại việc chọn chữ trong chính cấu trúc đó. Việc snippet độc lập chỉ dùng một View không chứng minh mọi wrapper, thư viện navigation hoặc gesture đều có cùng hành vi.
Với nội dung nhiều đoạn, xác định người dùng cần chọn từng đoạn hay cả khối. Không mặc định nhiều Text tách biệt sẽ tạo một vùng chọn liên tục như một tài liệu duy nhất. Bắt đầu từ dữ liệu và cấu trúc hiển thị thực tế, rồi kiểm tra điều cần sao chép.
Phạm vi và bước tiếp theo
Prop selectable không xác thực nội dung mã, không quyết định quyền xem dữ liệu và không cung cấp phản hồi “đã sao chép” từ một nút riêng. Demo cũng không kiểm thử trình đọc màn hình hoặc focus bàn phím; nếu ứng dụng hỗ trợ các cách tương tác ấy, thêm chúng vào kế hoạch kiểm tra.
Một bước tiếp theo hợp lý là chạy màn hình với dữ liệu giả gần giống độ dài mã của sản phẩm, kiểm tra chọn/dán trên cả hai nền tảng và xác nhận text vẫn đọc được khi cỡ chữ lớn. Khi nhu cầu là chọn chữ để sao chép, bắt đầu bằng selectable giữ component đúng vai trò hiển thị và làm yêu cầu tương tác dễ nhìn thấy trong code.
