Em Reagir Native, há pelo menos três maneiras de fazer um botão: TouchableNativeFeedback
, TouchableHighlight
e TouchableOpacity
. Há também TouchableWithoutFeedback
, que a documentação afirma claramente que você não deve usar porque "todos os elementos que respondem à imprensa devem ter um feedback visual quando tocados".
- TouchableNativeFeedback é apenas para Android e "substitui o View por outra instância de RCTView"
- TouchableHighlight "adiciona uma visualização à hierarquia de visualizações"
- TouchableOpacity funciona "sem alterar a hierarquia de visualização"
Existem outras diferenças significativas entre os três? Um deles é o componente goto? Em que caso você deve usar TouchableHighlight
over TouchableOpacity
? Existem implicações de desempenho?
Estou escrevendo um aplicativo agora e descobri que todos os três têm um atraso significativo entre o toque e a ação (neste caso, uma mudança de navegação). Existe alguma maneira de torná-lo mais rápido?
react-native
Damusnet
fonte
fonte
Respostas:
fonte: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , por Nick Wientge
TouchableHighlight
• O que faz: escurece ou clareia o fundo do elemento quando pressionado.
• Quando usar: No iOS para elementos tocáveis ou botões que têm uma forma ou fundo sólido, e em itens ListView.
TouchableOpacity
• O que faz: clareia a opacidade de todo o elemento quando pressionado.
• Quando usar: No iOS para elementos tocáveis que são texto autônomo ou ícones sem cor de fundo.
TouchableNativeFeedback
• O que faz: adiciona um efeito de ondulação ao fundo quando pressionado.
• Quando usar: no Android para quase todos os elementos tocáveis.
fonte
Bem, é assim que eu normalmente decido o que usar:
TouchableNativeFeedback
TouchableHighlight
. (TouchableOpacity
tem algumas partes estranhas quando você mesmo controla a opacidade).TouchableOpacity
porque é mais "simples" do queTouchableHighlight
fonte
Acho que a principal diferença essencial conforme declarado no Documentos:
TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
ligaçãoTouchableHighlight
TouchableOpacity
fonte
Se você quiser
TouchableHighlight
TouchableOpacity
fonte
<TouchableHighlight underlayColor="transparent" />
... e o Facebook mistura tudo isso em seu aplicativo F8 github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js