Switch có thể phản ứng khi bấm nhưng rồi trở lại giá trị cũ nếu prop value không được cập nhật. Đây là một component có điều khiển: trạng thái bạn truyền vào vẫn là nguồn dữ liệu quyết định giao diện.
Bài dành cho dự án React Native TypeScript đã chạy được màn hình cơ bản. Tài liệu Switch hiện chọn phiên bản 0.88 và API React được đối chiếu ngày 28/10/2026. Ví dụ được rà theo tài liệu, chưa build hoặc thử native trên Android/iOS trong lượt biên tập.
1. Tách giá trị cài đặt khỏi khả năng chỉnh sửa
Ví dụ có hai boolean: compact là giá trị cài đặt “Chế độ gọn”, còn editing cho biết màn hình có cho chỉnh sửa hay không. Khóa chỉnh sửa không có nghĩa phải tự đổi compact thành false.
Việc tách hai ý nghĩa giúp giao diện giữ đúng giá trị khi bị khóa. Trong sản phẩm thật, editing có thể phụ thuộc trạng thái lưu hoặc quyền ứng dụng; ở đây nó chỉ là một nút mô phỏng local, không phải cơ chế phân quyền backend.
2. Component minh họa đầy đủ
Đặt component vào màn hình đã xử lý vùng an toàn của ứng dụng. Ví dụ không gọi mạng và không lưu cài đặt xuống thiết bị:
import React, {useState} from 'react';
import {Button, StyleSheet, Switch, Text, View} from 'react-native';
export default function CompactSettingScreen() {
const [compact, setCompact] = useState(false);
const [editing, setEditing] = useState(true);
return (
<View style={styles.screen}>
<View style={styles.row}>
<Text style={styles.label}>Chế độ gọn</Text>
<Switch
accessibilityLabel="Chế độ gọn"
value={compact}
onValueChange={next => setCompact(next)}
disabled={!editing}
/>
</View>
<Text style={styles.status}>
Giá trị: {compact ? 'Bật' : 'Tắt'}
</Text>
<Text style={styles.status}>
{editing ? 'Có thể chỉnh sửa.' : 'Đang khóa chỉnh sửa.'}
</Text>
<Button
title={editing ? 'Khóa chỉnh sửa' : 'Cho phép chỉnh sửa'}
onPress={() => setEditing(previous => !previous)}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {flex: 1, padding: 24},
row: {flexDirection: 'row', alignItems: 'center'},
label: {flex: 1, fontSize: 18},
status: {fontSize: 16, marginVertical: 12},
});Callback nhận giá trị boolean mới và chuyển nó vào state. Sau khi render lại, value nhận đúng state đó. Dòng text bên dưới là một điểm quan sát cùng nguồn dữ liệu, giúp bạn kiểm tra rằng phần trình bày và công tắc đang thống nhất.
3. Vì sao Switch có thể bật rồi quay về?
Một trường hợp thường gặp là truyền value={false} cố định nhưng trong callback chỉ ghi log. Native control có thể phản hồi thao tác, nhưng khi giao diện tiếp tục nhận value cũ, nó vẫn phải thể hiện giá trị đó.
Trường hợp khác là callback sửa một biến thường thay vì gọi setter hoặc cập nhật store mà component đang đọc. Hãy lần theo đường dữ liệu: callback đổi ở đâu, màn hình subscribe vào đâu và prop value có thực sự nhận giá trị mới không.
Với callback onValueChange, giá trị đích đã được cung cấp. Dùng next trực tiếp giúp ý định rõ ràng hơn việc luôn đảo một state có thể cũ. Nếu chỉ cần một nút “đảo trạng thái” không có giá trị đích, functional updater như nút editing trong ví dụ lại phù hợp.
4. Disabled là một trạng thái tương tác riêng
Bật compact, sau đó bấm Khóa chỉnh sửa. Giá trị vẫn cần hiện là Bật, nhưng người dùng không còn đổi Switch bằng thao tác bình thường. Mở khóa và kiểm tra có thể đổi lại mà không bị reset ngoài ý muốn.
Không chỉ giảm opacity rồi coi như đã khóa; hình thức mờ không tự thay thế prop disabled. Ngược lại, disabled của UI cũng không thay thế kiểm tra quyền ở nơi thực thi nghiệp vụ. Hai tầng có trách nhiệm khác nhau.
Đối với một cài đặt cần gửi server, bạn phải chọn rõ lưu sau khi xác nhận hay cập nhật giao diện trước rồi phục hồi khi lỗi. Ví dụ này chưa triển khai một trong hai chính sách đó, nên không được dùng output local để khẳng định lưu đã thành công.
Kiểm tra giao diện
Thử trạng thái ban đầu, bật, tắt, khóa khi đang bật và mở khóa. Sau mỗi thao tác, đối chiếu Switch với dòng Giá trị. Thử cỡ chữ lớn để nhãn không ép mất công tắc và dùng TalkBack/VoiceOver để xác nhận nhãn, trạng thái được nhận biết phù hợp.
Đừng gán kết quả pixel của iOS làm chuẩn cho Android. Control native có cách hiển thị riêng; nếu tùy biến màu, đọc từng prop và kiểm tra cả hai nền tảng thay vì giả định màu của track và thumb luôn giống nhau.
Giới hạn và bước tiếp theo
Khi component bị tạo lại, state local có thể trở về giá trị khởi tạo. Muốn giữ cài đặt qua lần mở ứng dụng tiếp theo, cần một nguồn lưu bền vững và bước đọc dữ liệu ban đầu riêng. Bài chưa triển khai storage, đồng bộ server hoặc kiểm thử thiết bị.
Bắt đầu với một nguồn boolean rõ ràng và một callback cập nhật đúng nguồn đó. Sau khi vòng điều khiển đã đúng, thêm trạng thái lưu và xử lý lỗi theo yêu cầu sản phẩm sẽ dễ kiểm tra hơn.
