TouchableNativeFeedback, TouchableHighlight veya TouchableOpacity ne zaman kullanılır?

94

Doğalöğesini Tepki olarak, orada bir düğme yapmak için en az üç yolu vardır: TouchableNativeFeedback, TouchableHighlightve TouchableOpacity. Ayrıca, TouchableWithoutFeedbackdokümantasyonda açıkça kullanmamanız gerektiğini ifade ettiği, çünkü "basına yanıt veren tüm unsurların dokunulduğunda görsel bir geri bildirim alması gerektiği" de vardır.

Üçü arasında başka önemli farklar var mı? Bunlardan biri goto bileşeni mi? Hangi durumda TouchableHighlightaşırı kullanmalısınız TouchableOpacity? Herhangi bir performans etkisi var mı?

Şu anda bir uygulama yazıyorum ve üçünün de dokunma ile eylem arasında önemli bir gecikme olduğunu görüyorum (bu durumda bir gezinme değişikliği). Daha hızlı yapmanın bir yolu var mı?

react-native 
— Damusnet
kaynak
4
Hızlılık söz konusu olduğunda ... console.log'a herhangi bir şey çıktı vermek, sahne geçişlerini önemli ölçüde yavaşlatır. Yerel tepki vermeye yeni başladım ve ilk bileşenlerimi geliştirirken hızdan bir şekilde etkilenmedim. Tüm console.log komutlarını kaldırdım (redux logger'ı devre dışı bırakmak dahil) ve sürüm hedefi için oluşturdum ve hız beni uçurdu. Bu, Cordova uygulamalarının geliştirilmesinden geliyor.
— Travis White

Yanıtlar:

115

kaynak: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , Nick Wientge tarafından

TouchableHighlight

• Ne yapar: Basıldığında elemanın arka planını koyulaştırır veya aydınlatır.

• Ne zaman kullanılmalı: iOS'ta, düz bir şekle veya arka plana sahip dokunulabilir öğeler veya düğmeler için ve ListView öğelerinde.

TouchableOpacity

• Ne yapar: Basıldığında tüm elemanın opaklığını hafifletir.

• Ne zaman kullanılmalı: iOS'ta bağımsız metin olan dokunulabilir öğeler veya arka plan rengi olmayan simgeler için.

TouchableNativeFeedback

• Ne işe yarar: Basıldığında arka plana bir dalgalanma efekti ekler.

• Ne zaman kullanılmalı: Neredeyse tüm dokunulabilir öğeler için Android'de.

— Edan Chetrit
kaynak
Teşekkür ederim! O zamandan beri bu makaleyi okumuştum ama artık kendi soruma cevap bulamadım. Tam olarak aradığım şey buydu.
— damusnet
1
TouchableNativeFeedback'i kullanırken, bu kare arka plana sahiptir (dalgalanmayı kastetmiyorum) Bunu nasıl özelleştirebiliriz (örneğin boyutunu artırabilir, yuvarlak hale getirebilir veya belki kaldırıp yalnızca dalgalanmaya sahip olabiliriz)?
— Yasir
8

Ben genellikle neyi kullanacağıma böyle karar veririm:

  • Yalnızca Android için geliştiriyorsam ve bileşen, yerel geri bildirimlerin diğerlerini kullanmaktan gözle görülür şekilde farklı olacağı kadar büyükse, o zaman kullanırım TouchableNativeFeedback
  • Bileşendeki opaklığı kontrol etmek istiyorsam veya dokunulduğunda düğmenin renkli olmasını istiyorsam ve Dokunulabilir öğenin içindeki bazı öğelerin odaklanmış durumunu kontrol etmek istemiyorsam, kullanırım TouchableHighlight. ( TouchableOpacityopaklığı kendiniz kontrol ettiğinizde bazı garip kısımlar vardır).
  • Diğer tüm durumlarda, kullanıyorum TouchableOpacityçünkü daha "çıplak"TouchableHighlight
— Mienaikoe
kaynak
1
Bu cevap yararlı bir başlangıç ​​... ancak neden birbirinin yerine kullanılacağına dair daha sağlam teknik ve / veya tasarımla ilgili nedenler bulmayı umuyordum.
— Beau Smith
2

Dokümanlar'da belirtildiği gibi temel temel farkın şu olduğunu düşünüyorum:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.bağlantı

Dokunulabilir

TouchableHighlight Görünümlerin dokunuşlara doğru yanıt vermesini sağlayan bir sarıcı. Aşağıya bastırıldığında, sarılmış görünümün opaklığı azalır, bu da alt tabaka renginin görünümü göstermesine, koyulaştırmasına veya tonlamasına izin verir.

Altlık, çocuğu yeni bir Görünüme sarmadan gelir ve bu durum düzeni etkileyebilir ve bazen, örneğin sarılmış görünümün backgroundColor değeri açık bir şekilde opak bir renge ayarlanmadıysa, doğru kullanılmazsa istenmeyen görsel yapılara neden olabilir.

TouchableOpacity

TouchableOpacity # Görünümlerin dokunuşlara düzgün yanıt vermesini sağlayan bir sarmalayıcı. Aşağıya bastırıldığında, sarılmış görünümün opaklığı azaltılarak karartılır.

— Mohamed Saleh
kaynak
-3

Eğer istersen

  • baskıda vurgulama düğmesi - kullanım TouchableHighlight
  • basıldığında düğmenin opaklığını değiştirin - kullanın TouchableOpacity
— stereodenis
kaynak
3
Yazarın bunun farkında olduğunu ve daha karmaşık bir yanıt istediğini düşünüyorum.
— Radek Czemerys
1
Dahası, kullanabilirsiniz <TouchableHighlight underlayColor="transparent" />... ve Facebook tüm bunları F8 Uygulamasında karıştırır github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js
— damusnet
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.