Khi nào nên sử dụng TouchableNativeFeedback, TouchableHighlight hoặc TouchableOpacity?

Question

Trong React Native, có ít nhất ba cách để tạo nút: TouchableNativeFeedback, TouchableHighlight và TouchableOpacity. Ngoài ra còn có TouchableWithoutFeedback, trong đó tài liệu nêu rõ bạn không nên sử dụng vì "tất cả các yếu tố phản ứng với báo chí phải có phản hồi trực quan khi được chạm".

• TouchableNativeFeedback là Android chỉ và "thay thế View với một ví dụ của RCTView"
• TouchableHighlight "thêm một cái nhìn để quan điểm hệ thống phân cấp"
• TouchableOpacity công trình "mà không thay đổi hệ thống phân cấp view"

Có sự khác biệt đáng kể nào khác giữa ba loại này không? Là một trong số họ thành phần goto? Trong trường hợp nào bạn nên sử dụng TouchableHighlight trên TouchableOpacity? Có bất kỳ tác động hiệu suất nào không?

Tôi đang viết một ứng dụng ngay bây giờ và thấy rằng cả ba đều có sự chậm trễ đáng kể giữa thao tác nhấn và hành động (trong trường hợp này là thay đổi điều hướng). Có cách nào để làm cho nó dễ dàng hơn không?

Answer 1

nguồn: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472, bởi Nick Wientge

TouchableHighlight

• Những gì nó: Làm sáng hoặc làm nền của phần tử khi ép.

• Thời điểm sử dụng: Trên iOS cho các thành phần hoặc nút có thể chạm có hình dạng hoặc hình nền chắc chắn và trên các mục ListView.

TouchableOpacity

• Những gì nó: lightens độ trong suốt của toàn bộ phần tử khi ép.

• Thời điểm sử dụng: Trên iOS cho các thành phần có thể chạm được là văn bản độc lập hoặc biểu tượng không có màu nền.

TouchableNativeFeedback

• Những gì nó: Thêm một hiệu ứng gợn tới nền khi nhấn.

• Thời điểm sử dụng: Trên Android cho hầu như tất cả các yếu tố có thể chạm.

Answer 2

Nếu bạn muốn nút

• nổi bật trên báo chí - sử dụng opacity TouchableHighlight
• thay đổi nút trên báo chí - sử dụng TouchableOpacity

Answer 3

Vâng, Đây là cách tôi thường quyết định những gì để sử dụng:

• Nếu tôi xây dựng chỉ dành cho Android và thành phần là đủ lớn để phản hồi gốc sẽ khác rõ rệt so với sử dụng các thông tin khác sau đó tôi sử dụng TouchableNativeFeedback
• Nếu tôi muốn kiểm soát độ mờ của thành phần hoặc tôi muốn nút có màu khi chạm vào và tôi không muốn kiểm soát trạng thái tập trung của một số phần tử bên trong Touchable, sau đó tôi sử dụng TouchableHighlight. (TouchableOpacity có một số phần lạ khi bạn tự kiểm soát độ mờ).
• Trong mọi trường hợp khác, tôi sử dụng TouchableOpacity vì nó nhiều hơn "trần" hơn TouchableHighlight

Answer 4

Tôi nghĩ rằng sự khác biệt cần thiết chính như đã nêu trong Documents:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.link

TouchableHighlight

TouchableHighlight A w rapper để làm cho lượt xem phản hồi đúng cách với các chạm . Khi nhấn xuống, độ mờ của chế độ xem được bao phủ sẽ giảm, cho phép màu nền lót hiển thị qua, tối hoặc nhuộm màu chế độ xem.

Các underlay xuất phát từ gói đứa trẻ trong một Xem mới, có thể ảnh hưởng đến bố trí, và đôi khi gây ra hiện vật hình ảnh không mong muốn nếu không sử dụng một cách chính xác, ví dụ nếu backgroundColor của view bọc không rõ ràng thiết lập để một màu đục.

TouchableOpacity

TouchableOpacity # Một wrapper để làm điểm đáp ứng đúng cách để chạm. Khi ấn xuống, độ mờ của chế độ xem được đóng sẽ giảm, làm mờ nó.