Kapan menggunakan TouchableNativeFeedback, TouchableHighlight, atau TouchableOpacity?

94

Dalam Bereaksi asli, setidaknya ada tiga cara untuk membuat tombol: TouchableNativeFeedback, TouchableHighlightdan TouchableOpacity. Ada juga TouchableWithoutFeedback, yang dalam dokumentasinya dengan jelas menyatakan Anda tidak boleh menggunakan karena "semua elemen yang merespons pers harus memiliki umpan balik visual saat disentuh".

Apakah ada perbedaan signifikan lainnya di antara ketiganya? Apakah salah satunya adalah komponen goto? Dalam hal apa yang harus Anda gunakan TouchableHighlightlebih TouchableOpacity? Apakah ada implikasi kinerja?

Saya sedang menulis aplikasi sekarang, dan menemukan bahwa ketiganya memiliki penundaan yang signifikan antara ketuk dan tindakan (dalam hal ini perubahan navigasi). Apakah ada cara untuk membuatnya lebih cepat?

react-native damusnet
sumber
4
Sejauh menyangkut snappiness ... mengeluarkan apa pun ke console.log sangat memperlambat transisi adegan. Saya baru saja mulai bereaksi asli dan agak tidak terkesan dengan kecepatan saat mengembangkan komponen pertama saya. Saya menghapus semua perintah console.log (termasuk menonaktifkan redux logger) dan membangun untuk target rilis dan kecepatannya mengejutkan saya. Ini berasal dari pengembangan aplikasi Cordova.
Travis White

Jawaban:

115

sumber: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , oleh Nick Wientge

TouchableHighlight

• Kegunaan: Menggelapkan atau mencerahkan latar belakang elemen saat ditekan.

• Kapan menggunakannya: Di iOS untuk elemen atau tombol yang dapat disentuh yang memiliki bentuk atau latar belakang yang solid, dan pada item ListView.

TouchableOpacity

• Fungsi: Meringankan opasitas seluruh elemen saat ditekan.

• Kapan menggunakannya: Di iOS untuk elemen yang dapat disentuh yang berupa teks mandiri atau ikon tanpa warna latar belakang.

TouchableNativeFeedback

• Kegunaan: Menambahkan efek riak ke latar belakang saat ditekan.

• Kapan menggunakannya: Di Android untuk hampir semua elemen yang dapat disentuh.

Edan Chetrit
sumber
Terima kasih! Saya telah membaca artikel ini sejak itu, tetapi tidak dapat menemukannya lagi untuk menjawab pertanyaan saya sendiri. Persis seperti yang saya cari.
damusnet
1
saat menggunakan TouchableNativeFeedback, ia memiliki latar belakang persegi ini (saya tidak bermaksud riak) Bagaimana kita menyesuaikannya (misalnya meningkatkan ukurannya, memutarnya, atau mungkin menghapusnya dan hanya memiliki riak saja)?
Yasir
8

Nah, beginilah biasanya saya memutuskan apa yang akan digunakan:

  • Jika saya membuat untuk Android saja, dan komponennya cukup besar sehingga umpan balik asli akan terlihat berbeda dari menggunakan yang lain maka saya menggunakan TouchableNativeFeedback
  • Jika saya ingin mengontrol opasitas pada komponen atau saya ingin tombol memiliki warna saat disentuh, dan saya tidak ingin mengontrol status fokus beberapa elemen di dalam Touchable, maka saya gunakan TouchableHighlight. ( TouchableOpacitymemiliki beberapa bagian aneh saat Anda mengontrol opasitas sendiri).
  • Dalam semua kasus lain, saya menggunakan TouchableOpacitykarena lebih "telanjang" daripadaTouchableHighlight
mienaikoe
sumber
1
Jawaban ini adalah permulaan yang membantu… tapi saya berharap untuk menemukan alasan teknis dan / atau desain yang lebih solid untuk mengapa menggunakan satu vs yang lain.
Beau Smith
2

Saya pikir perbedaan esensial utama seperti yang dinyatakan dalam Dokumen:

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

TouchableHighlight

TouchableHighlight Sebuah pembungkus untuk membuat tampilan merespon sentuhan dengan benar. Saat ditekan, opasitas tampilan yang dibungkus akan dikurangi, yang memungkinkan warna lapisan bawah terlihat, menggelapkan atau mewarnai tampilan.

Lapisan bawah berasal dari membungkus anak dalam Tampilan baru, yang dapat memengaruhi tata letak, dan terkadang menyebabkan artefak visual yang tidak diinginkan jika tidak digunakan dengan benar, misalnya jika backgroundColor dari tampilan yang dibungkus tidak secara eksplisit disetel ke warna buram.

TouchableOpacity

TouchableOpacity # Sebuah pembungkus untuk membuat tampilan merespon sentuhan dengan benar. Saat ditekan, opasitas tampilan yang dibungkus berkurang, meredupkannya.

Mohamed Saleh
sumber
-3

Jika Anda menghendaki

  • sorot tombol pada pers - gunakan TouchableHighlight
  • ubah opasitas tombol saat ditekan - gunakan TouchableOpacity
stereodenis
sumber
3
Saya pikir penulis menyadari hal ini dan menanyakan jawaban yang lebih kompleks.
Radek Czemerys
1
Selain itu, Anda bahkan dapat menggunakan <TouchableHighlight underlayColor="transparent" />... dan Facebook menggabungkan semua itu di Aplikasi F8 mereka github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js
damusnet