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

94

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

  • TouchableNativeFeedback chỉ dành cho Android và "thay thế Chế độ xem bằng một phiên bản RCTView khác"
  • TouchableHighlight "thêm chế độ xem vào hệ thống phân cấp chế độ xem"
  • TouchableOpacity hoạt động "mà không thay đổi phân cấp chế độ xem"

Có sự khác biệt đáng kể nào khác giữa ba không? Một trong số chúng có phải là thành phần goto không? Trong trường hợp nào bạn nên sử dụng TouchableHighlighthơn TouchableOpacity? Có bất kỳ tác động nào về hiệu suất 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ó độ trễ đáng kể giữa thao tác chạm và thao tác (trong trường hợp này là thay đổi điều hướng). Có cách nào để làm cho nó nhanh hơn không?

react-native 
— damusnet
nguồn
4
Liên quan đến vấn đề khó khăn ... việc xuất bất kỳ thứ gì ra console.log sẽ làm chậm quá trình chuyển cảnh đáng kể. Tôi chỉ mới bắt đầu với ứng dụng gốc và hơi không ấn tượng về tốc độ trong khi phát triển các thành phần đầu tiên của mình. Tôi đã loại bỏ tất cả các lệnh console.log (bao gồm cả việc tắt trình ghi nhật ký redux) và xây dựng cho mục tiêu phát hành và tốc độ đã thổi bay tôi. Điều này đến từ việc phát triển các ứng dụng Cordova.
— Travis White

Câu trả lời:

115

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

TouchableHighlight

• Chức năng: Làm tối hoặc làm sáng nền của phần tử khi được nhấn.

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

TouchableOpacity

• Chức năng: Làm sáng độ mờ của toàn bộ phần tử khi được nhấn.

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

TouchableNativeFeedback

• Chức năng: Thêm hiệu ứng gợn sóng vào nền khi được nhấn.

• Khi nào thì sử dụng: Trên Android cho hầu hết các yếu tố có thể cảm ứng được.

— Edan Chetrit
nguồn
Cảm ơn bạn! Tôi đã đọc bài báo này kể từ đó, nhưng không thể tìm thấy nó nữa để trả lời câu hỏi của riêng tôi. Nó chính xác là những gì tôi đang tìm kiếm.
— damusnet
1
Khi sử dụng TouchableNativeFeedback, nó có nền hình vuông này (ý tôi không phải là gợn sóng) Làm thế nào để chúng tôi tùy chỉnh điều đó (ví dụ: tăng kích thước của nó, làm cho nó tròn hoặc có thể loại bỏ nó và chỉ có gợn sóng một mình)?
— Yasir
8

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

  • Nếu tôi đang xây dựng chỉ dành cho Android và thành phần đủ lớn để phản hồi gốc sẽ khác rõ ràng so với việc sử dụng các thành phần khác thì tôi sử dụng TouchableNativeFeedback
  • Nếu tôi muốn kiểm soát độ mờ trên 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 lấy nét của một số phần tử bên trong Có thể chạm được, thì tôi sử dụng TouchableHighlight. (TouchableOpacity có một số phần kỳ lạ khi bạn tự kiểm soát độ mờ).
  • Trong tất cả các trường hợp khác, tôi sử dụng TouchableOpacityvì nó "trần" hơnTouchableHighlight
— mienaikoe
nguồn
1
Câu trả lời này là một khởi đầu hữu ích… nhưng tôi đã hy vọng tìm ra những lý do liên quan đến kỹ thuật và / hoặc thiết kế vững chắc hơn cho lý do tại sao sử dụng cái này với cái khác.
— Beau Smith,
2

Tôi nghĩ sự khác biệt cơ bản chính như đã nêu trong Tài liệu:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.liên kết

TouchableHighlight

TouchableHighlight Một trình bao bọc để làm cho các lượt xem phản hồi chính xác với các lần chạm. Khi nhấn xuống, độ mờ của chế độ xem được bao bọc sẽ giảm, điều này cho phép màu lớp dưới hiển thị xuyên qua, làm tối hoặc pha màu chế độ xem.

Lớp phủ xuất phát từ việc bao bọc đứa trẻ trong một Chế độ xem mới, điều này có thể ảnh hưởng đến bố cục và đôi khi gây ra các hiện vật hình ảnh không mong muốn nếu không được sử dụng đúng cách, ví dụ: nếu Màu nền của chế độ xem được bao bọc không được đặt rõ ràng thành màu mờ đục.

TouchableOpacity

TouchableOpacity # Một trình bao bọc để làm cho các chế độ xem phản hồi chính xác với các lần chạm. Khi nhấn xuống, độ mờ của chế độ xem được bao bọc sẽ giảm, làm mờ nó.

— Mohamed Saleh
nguồn
-3

Nếu bạn muốn

  • nút đánh dấu khi nhấn - sử dụng TouchableHighlight
  • thay đổi độ mờ của nút khi nhấn - sử dụng TouchableOpacity
— âm thanh nổi
nguồn
3
Tôi nghĩ rằng tác giả nhận thức được điều này và đang yêu cầu một số câu trả lời phức tạp hơn.
— Radek Czemerys
1
Hơn nữa, bạn thậm chí có thể sử dụng <TouchableHighlight underlayColor="transparent" />... và Facebook trộn tất cả những người trong F8 App họ github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js
— damusnet
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.