Kiedy używać TouchableNativeFeedback, TouchableHighlight lub TouchableOpacity?

97

W React Native, istnieją co najmniej trzy sposoby, aby jeden przycisk TouchableNativeFeedback, TouchableHighlighta TouchableOpacity. Jest też taki TouchableWithoutFeedback, którego dokumentacja wyraźnie stwierdza, że ​​nie należy go używać, ponieważ „wszystkie elementy reagujące na prasę powinny mieć wizualną informację zwrotną po dotknięciu”.

Czy są jakieś inne znaczące różnice między tymi trzema? Czy jeden z nich jest komponentem goto? W jakim przypadku należy użyć TouchableHighlightOver TouchableOpacity? Czy są jakieś konsekwencje dla wydajności?

Piszę teraz aplikację i stwierdzam, że wszystkie trzy mają znaczne opóźnienie między dotknięciem a akcją (w tym przypadku zmiana nawigacji). Czy jest jakiś sposób, aby uczynić to szybszym?

react-native 
— damusnet
źródło
4
Jeśli chodzi o zwinność ... wysłanie czegokolwiek do console.log znacznie spowalnia przejścia scen. Dopiero zaczynam od reagowania natywnego i nie byłem pod wrażeniem szybkości podczas opracowywania moich pierwszych komponentów. Usunąłem wszystkie polecenia console.log (w tym wyłączenie rejestratora redux) i zbudowałem dla celu wydania, a prędkość mnie powaliła. Wynika to z tworzenia aplikacji Cordova.
— Travis White,

Odpowiedzi:

118

źródło: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , Nick Wientge

TouchableHighlight

• Co robi: przyciemnia lub rozjaśnia tło elementu po naciśnięciu.

• Kiedy go używać: w systemie iOS dla elementów dotykowych lub przycisków, które mają jednolity kształt lub tło, oraz dla elementów ListView.

TouchableOpacity

• Co to robi: po naciśnięciu rozjaśnia krycie całego elementu.

• Kiedy go używać: W systemie iOS dla elementów dotykowych, które są samodzielnym tekstem lub ikonami bez koloru tła.

TouchableNativeFeedback

• Działanie: Po naciśnięciu dodaje efekt falowania do tła.

• Kiedy go używać: w systemie Android dla prawie wszystkich elementów dotykowych.

— Edan Chetrit
źródło
Dziękuję Ci! Czytałem ten artykuł od tamtej pory, ale nie mogłem go już znaleźć, aby odpowiedzieć na moje własne pytanie. To jest dokładnie to, czego szukałem.
— damusnet,
1
kiedy używasz TouchableNativeFeedback, ma to kwadratowe tło (nie mam na myśli falowania). Jak możemy to dostosować (np. zwiększyć jego rozmiar, uczynić go okrągłym, a może usunąć i po prostu mieć tętnienie)?
— Jasir
8

Cóż, tak zazwyczaj decyduję, czego użyć:

  • Jeśli tworzę tylko dla Androida, a komponent jest na tyle duży, że natywna informacja zwrotna będzie widocznie inna niż w przypadku innych, używam TouchableNativeFeedback
  • Jeśli chcę kontrolować krycie komponentu lub chcę, aby przycisk miał kolor po dotknięciu i nie chcę kontrolować stanu skupienia jakiegoś elementu wewnątrz Touchable, używam TouchableHighlight. ( TouchableOpacityma kilka dziwnych części, gdy sam kontrolujesz krycie).
  • We wszystkich innych przypadkach używam, TouchableOpacityponieważ jest bardziej „nagi” niżTouchableHighlight
— mienaikoe
źródło
1
Ta odpowiedź jest pomocnym początkiem… ale miałem nadzieję znaleźć solidniejsze techniczne i / lub związane z projektowaniem powody, dla których warto używać jednego przeciwnika.
— Beau Smith
2

Myślę, że główna istotna różnica, jak stwierdzono w Dokumentach:

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

TouchableHighlight

TouchableHighlight Opakowanie umożliwiające poprawne reagowanie widoków na dotyk. Po naciśnięciu zmniejsza się nieprzezroczystość zawiniętego widoku, co pozwala na prześwitywanie koloru podkładu, przyciemnienie lub zabarwienie widoku.

Podkład pochodzi z zawijania elementu podrzędnego w nowym widoku, co może wpływać na układ, a czasami powodować niepożądane artefakty wizualne, jeśli nie jest używane prawidłowo, na przykład jeśli backgroundColor opakowanego widoku nie jest jawnie ustawiony na nieprzezroczysty kolor.

TouchableOpacity

TouchableOpacity # Opakowanie umożliwiające poprawne reagowanie widoków na dotyk. Po naciśnięciu w dół krycie zawiniętego widoku zmniejsza się, przyciemniając go.

— Mohamed Saleh
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.