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

94

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

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

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

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

Damusnet
источник
4
Что касается оперативности ... вывод чего-либо в console.log значительно замедляет переходы между сценами. Я только начинаю работать с React Native и меня немного не впечатлила скорость разработки моих первых компонентов. Я удалил все команды console.log (включая отключение регистратора redux) и построил для цели выпуска, и скорость поразила меня. Это связано с разработкой приложений Cordova.
Трэвис Уайт

Ответы:

115

источник: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , Ник Виндж

TouchableHighlight

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

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

TouchableOpacity

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

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

TouchableNativeFeedback

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

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

Эдан Четрит
источник
Спасибо! С тех пор я прочитал эту статью, но больше не мог найти ее, чтобы ответить на свой вопрос. Это именно то, что я искал.
damusnet
1
при использовании TouchableNativeFeedback он имеет квадратный фон (я не имею в виду рябь). Как мы можем это настроить (например, увеличить его размер, сделать его круглым или, может быть, удалить его и оставить только рябь)?
Ясир
8

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

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

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

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 Обертка, позволяющая представлениям правильно реагировать на прикосновения. При нажатии уменьшается непрозрачность обернутого вида, что позволяет просвечивать цвет подложки, затемняя или окрашивая вид.

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

TouchableOpacity

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

Мохамед Салех
источник
-3

Если хочешь

  • кнопка выделения при нажатии - используйте TouchableHighlight
  • изменить прозрачность кнопки при нажатии - используйте TouchableOpacity
стереоденис
источник
3
Я думаю, что автор знает об этом, он просит более сложный ответ.
Радек Чемерис
1
Более того, вы даже можете использовать <TouchableHighlight underlayColor="transparent" />... и Facebook смешивает все это в своем приложении F8 github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js
damusnet