Quando usar TouchableNativeFeedback, TouchableHighlight ou TouchableOpacity?

97

Em Reagir Native, há pelo menos três maneiras de fazer um botão: TouchableNativeFeedback, TouchableHighlighte 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".

Existem outras diferenças significativas entre os três? Um deles é o componente goto? Em que caso você deve usar TouchableHighlightover 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?

Damusnet
fonte
4
No que diz respeito à rapidez ... enviar qualquer coisa para console.log diminui consideravelmente as transições de cena. Estou apenas começando no react native e não fiquei impressionado com a velocidade ao desenvolver meus primeiros componentes. Eu removi todos os comandos console.log (incluindo a desativação do redux logger) e construí para o release target e a velocidade me surpreendeu. Isso está vindo do desenvolvimento de aplicativos Cordova.
Travis White

Respostas:

118

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.

Edan Chetrit
fonte
Obrigado! Eu tinha lido este artigo desde então, mas não conseguia encontrá-lo mais para responder à minha própria pergunta. É exatamente o que eu estava procurando.
damusnet
1
ao usar o TouchableNativeFeedback, ele tem um fundo quadrado (não quero dizer ondulação). Como podemos personalizar isso (por exemplo, aumentar seu tamanho, torná-lo redondo ou talvez removê-lo e apenas ter ondulação)?
Yasir
8

Bem, é assim que eu normalmente decido o que usar:

  • Se estou construindo apenas para Android e o componente é grande o suficiente para que o feedback nativo seja visivelmente diferente do que usar os outros que eu uso TouchableNativeFeedback
  • Se eu quiser controlar a opacidade no componente ou quiser que o botão tenha cor ao ser tocado e não quiser controlar o estado de foco de algum elemento dentro do Tocável, então eu uso TouchableHighlight. ( TouchableOpacitytem algumas partes estranhas quando você mesmo controla a opacidade).
  • Em todos os outros casos, eu uso TouchableOpacityporque é mais "simples" do queTouchableHighlight
Mienaikoe
fonte
1
Esta resposta é um começo útil ... mas eu esperava encontrar razões técnicas e / ou de design mais sólidas para usar um em vez de outro.
Beau Smith
2

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ção

TouchableHighlight

TouchableHighlight Um wrapper para fazer as visualizações responderem adequadamente aos toques. Ao pressionar para baixo, a opacidade da visualização agrupada é diminuída, o que permite que a cor subjacente apareça, escurecendo ou matizando a visualização.

O underlay vem do envolvimento do filho em uma nova visualização, o que pode afetar o layout e, às vezes, causar artefatos visuais indesejados se não for usado corretamente, por exemplo, se backgroundColor da visualização agrupada não estiver explicitamente definido como uma cor opaca.

TouchableOpacity

TouchableOpacity # Um wrapper para fazer as visualizações responderem adequadamente aos toques. Ao pressionar para baixo, a opacidade da visualização agrupada diminui, escurecendo-a.

Mohamed Saleh
fonte
-3

Se você quiser

  • botão de destaque ao pressionar - usar TouchableHighlight
  • alterar a opacidade do botão ao pressionar - usar TouchableOpacity
estereodeno
fonte
3
Acho que o autor está ciente disso e está pedindo uma resposta mais complexa.
Radek Czemerys
1
Além disso, você pode até usar <TouchableHighlight underlayColor="transparent" />... e o Facebook mistura tudo isso em seu aplicativo F8 github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js
damusnet