Nút đổi màu ngay khi ngón tay chạm xuống là phản hồi hữu ích. Nhưng nếu cũng gửi hành động tại onPressIn rồi gửi lại trong onPress, một cử chỉ có thể kích hoạt logic hai lần. Tách hai trách nhiệm giúp nút dễ kiểm tra hơn.
Bài đối chiếu tài liệu React Native 0.88 ngày 31/10/2026. Mẫu dùng component core và state local, không gọi dịch vụ bên ngoài. Chưa build ứng dụng native hoặc chạy thử cử chỉ trên Android/iOS; checklist cuối bài nêu cách xác nhận trên thiết bị.
1. Nhận diện các giai đoạn
Theo tài liệu Pressable, onPressIn báo bắt đầu kích hoạt nhấn; onPressOut báo cử chỉ bị vô hiệu hóa. Với thao tác nhấn thông thường hoàn tất, onPress đến sau onPressOut. Khi giữ đủ lâu, onLongPress có vai trò riêng.
Điểm cần dùng trong thiết kế là ngón tay chạm xuống chưa đồng nghĩa người dùng hoàn tất thao tác. Cử chỉ có thể di chuyển, bị hủy hoặc chuyển sang nhấn giữ. Không dùng onPressOut như một callback “đã xác nhận” cho thao tác gửi dữ liệu.
2. Cho style nhận trạng thái pressed
Đặt component sau trong màn hình của ứng dụng React Native có sẵn. Parent cần bố trí vùng màn hình và safe area phù hợp. Mẫu chỉ tăng số lần nhấn và hiển thị lần tương tác gần nhất để quan sát.
import React, {useState} from 'react';
import {Pressable, StyleSheet, Text, View} from 'react-native';
export default function PressDemo() {
const [count, setCount] = useState(0);
const [lastAction, setLastAction] = useState('Chưa thao tác');
return (
<View style={styles.screen}>
<Text>Số lần nhấn thường: {count}</Text>
<Text>{lastAction}</Text>
<View style={styles.touchArea}>
<Pressable
accessibilityRole="button"
accessibilityLabel="Thêm một lần đếm"
accessibilityHint="Nhấn giữ để xem gợi ý; có nút gợi ý riêng bên dưới"
hitSlop={8}
delayLongPress={600}
onPress={() => {
setCount(value => value + 1);
setLastAction('Đã nhấn thường');
}}
onLongPress={() => setLastAction('Gợi ý: nút này tăng bộ đếm')}
style={({pressed}) => [
styles.button,
pressed && styles.pressed,
]}>
<Text style={styles.label}>Thêm một lần đếm</Text>
</Pressable>
</View>
<Pressable
accessibilityRole="button"
onPress={() => setLastAction('Gợi ý: nút này tăng bộ đếm')}
style={styles.help}>
<Text>Xem gợi ý</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
screen: {flex: 1, padding: 24, justifyContent: 'center', gap: 12},
touchArea: {padding: 12, alignItems: 'flex-start'},
button: {minHeight: 48, padding: 12, backgroundColor: '#075985'},
pressed: {opacity: 0.65},
label: {color: '#fff'},
help: {minHeight: 48, padding: 12, alignSelf: 'flex-start'},
});Style callback nhận pressed để đổi độ mờ, nên không cần thêm state isPressed chỉ để sao chép trạng thái tương tác. Hành động tăng bộ đếm chỉ đặt trong onPress. Nút gợi ý riêng giúp thông tin vẫn tiếp cận được khi người dùng không dùng thao tác giữ.
3. Dùng nhấn giữ có chủ đích
Mẫu đặt delayLongPress là 600 ms, khác giá trị mặc định 500 ms trong tài liệu đang dẫn. Đây là tham số demo, không phải con số đã được nghiên cứu UX cho sản phẩm của bạn.
Đừng gắn một hành động quan trọng chỉ vào nhấn giữ mà không có đường truy cập khác. Với nghiệp vụ như gửi đơn hoặc xóa, còn cần quản lý trạng thái đang xử lý và chống gửi lặp ở lớp phù hợp. Pressable không tự bảo đảm một thao tác dữ liệu chỉ được thực hiện một lần.
Không lấy việc gọi thủ công handler trong JavaScript làm bằng chứng thứ tự sự kiện native. Mẫu đã được rà theo tài liệu callback, nhưng nhấn giữ và nhấn thường cần được thử bằng các thao tác thật trong ứng dụng.
4. HitSlop có giới hạn hình học
hitSlop={8} nới vùng bắt đầu chạm quanh nút theo đơn vị layout React Native, không làm kích thước hiển thị lớn thêm. Parent của nút trong ví dụ có padding để tạo chỗ quanh vùng hiển thị.
Tài liệu nêu vùng chạm không vượt bounds của parent; sibling chồng lấp cũng ảnh hưởng nơi nhận chạm. Nếu nút sát mép parent hẹp, tăng hitSlop rất lớn không thể biến phần nằm ngoài parent thành vùng thao tác hợp lệ.
Kiểm tra kết quả và lỗi thường gặp
Thử nhấn nhanh một lần: bộ đếm tăng một. Thử giữ để xem gợi ý và quan sát bộ đếm. Thử kéo ra khỏi vùng kích hoạt rồi thả, cũng như tương tác bên trong ScrollView nếu màn hình thật có cuộn. Ghi lại cử chỉ và kết quả thay vì chỉ xem log onPressIn.
Kiểm tra font lớn, screen reader và vùng chạm sát cạnh. Nếu cùng một hành động bị chạy hai lần, tìm các handler đang gọi chung logic trước khi thêm debounce. Nếu màu pressed không phản ánh thao tác, kiểm tra style có bị ghi đè hoặc component đang disabled không.
Bài chỉ xây mẫu quan sát tương tác local. Kiểm thử native và kiểm tra nghiệp vụ cần được làm riêng trước khi đưa mẫu vào màn hình thật.
