В React Native, есть по крайней мере три способа сделать кнопку: TouchableNativeFeedback
, TouchableHighlight
и TouchableOpacity
. Есть также TouchableWithoutFeedback
, что в документации четко указано, что вы не должны использовать, потому что «все элементы, которые реагируют на нажатие, должны иметь визуальную обратную связь при прикосновении».
- TouchableNativeFeedback предназначен только для Android и «заменяет View другим экземпляром RCTView».
- TouchableHighlight «добавляет представление в иерархию представлений»
- TouchableOpacity работает "без изменения иерархии представлений"
Есть ли еще какие-нибудь существенные различия между этими тремя? Один из них - компонент goto? В каком случае использовать TouchableHighlight
овер TouchableOpacity
? Есть ли какие-либо последствия для производительности?
Я пишу приложение прямо сейчас и обнаружил, что у всех трех есть значительная задержка между касанием и действием (в данном случае изменение навигации). Есть ли способ сделать его более быстрым?
источник
Ответы:
источник: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , Ник Виндж
TouchableHighlight
• Что он делает: затемняет или осветляет фон элемента при нажатии.
• Когда использовать: в iOS для сенсорных элементов или кнопок со сплошной формой или фоном, а также для элементов ListView.
TouchableOpacity
• Что он делает: уменьшает непрозрачность всего элемента при нажатии.
• Когда использовать: в iOS для сенсорных элементов, которые представляют собой отдельный текст или значки без цвета фона.
TouchableNativeFeedback
• Что он делает: при нажатии добавляет к фону эффект ряби.
• Когда использовать: на Android почти для всех сенсорных элементов.
источник
Ну, вот как я обычно решаю, что использовать:
TouchableNativeFeedback
TouchableHighlight
. (TouchableOpacity
есть некоторые странности, когда вы сами контролируете непрозрачность).TouchableOpacity
потому что он более «голый», чемTouchableHighlight
источник
Я думаю, что основное существенное различие, указанное в Документах:
TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
ссылка на сайтОсязаемый
TouchableOpacity
источник
Если хочешь
TouchableHighlight
TouchableOpacity
источник
<TouchableHighlight underlayColor="transparent" />
... и Facebook смешивает все это в своем приложении F8 github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js