Когда использовать TouchableNativeFeedback, TouchableHighlight или TouchableOpacity?

В React Native существует как минимум три способа сделать кнопку: TouchableNativeFeedback, TouchableHighlight и TouchableOpacity. Существует также TouchableWithoutFeedback, в документации в котором четко указано, что вы не должны использовать, потому что "все элементы, которые реагируют на печать, должны иметь визуальную обратную связь при касании".

  • TouchableNativeFeedback - только Android и "заменяет вид другим экземпляром RCTView"
  • TouchableHighlight "добавляет представление в иерархию представлений"
  • TouchableOpacity работает "без изменения иерархии представлений"

Существуют ли другие существенные различия между этими тремя? Является ли один из них компонентом goto? В каком случае следует использовать TouchableHighlight над TouchableOpacity? Существуют ли какие-либо последствия для производительности?

Я пишу приложение прямо сейчас и обнаруживаю, что все три имеют значительную задержку между нажатием и действием (в данном случае изменение навигации). Есть ли способ сделать это более быстрым?

ОТВЕТЫ

Ответ 1

источник: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472, Nick Wientge

TouchableHighlight

• Что он делает: затемняет или осветляет фон элемента при нажатии.

• Когда его использовать: на iOS для сенсорных элементов или кнопок с твердой формой или фоном, а также в элементах ListView.

TouchableOpacity

• Что он делает: уменьшает непрозрачность всего элемента при нажатии.

• Когда использовать его: на iOS для сенсорных элементов, которые являются автономным текстом или значками без цвета фона.

TouchableNativeFeedback

• Что он делает: добавляет эффект пульсации к фону при нажатии.

• Когда его использовать: на Android почти для всех сенсорных элементов.

Ответ 2

Ну, вот как я обычно решаю, что использовать:

  • Если я создаю только для Android, и компонент достаточно велик, чтобы нативная обратная связь была заметно иной, чем использование других, тогда я использую TouchableNativeFeedback
  • Если я хочу контролировать непрозрачность компонента или хочу, чтобы кнопка имела цвет при касании, и я не хочу контролировать сфокусированное состояние какого-либо элемента внутри Touchable, тогда я использую TouchableHighlight. (TouchableOpacity имеет некоторые странные части, когда вы сами управляете непрозрачностью).
  • Во всех остальных случаях я использую TouchableOpacity, потому что он более "голый", чем TouchableHighlight

Ответ 3

Я думаю, что основное существенное различие, как указано в Документах:

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

TouchableHighlight

TouchableHighlight Обертка для создания представлений правильно реагирует на прикасается. При нажатии вниз непрозрачность обернутого вида уменьшается, который позволяет отображать цвет подкладки, затемнение или затемнение вид.

Подложка происходит от обертывания ребенка в новом представлении, который может влиять на макет, а иногда и создавать нежелательные визуальные артефакты, если не правильно используется, например, если backgroundColor обернутого вида явно не задан непрозрачным цветом.

TouchableOpacity

TouchableOpacity # Обертка для создания представлений правильно реагирует на прикасается. При нажатии вниз непрозрачность обернутого вида уменьшается, затемняя его.

Ответ 4

Если вы хотите

  • кнопка выделения при нажатии - используйте TouchableHighlight
  • непрозрачность кнопки изменения при нажатии - используйте TouchableOpacity