Jadi kita dapat menambahkan elemen kita
di sini, yang tidak dapat kita lakukan adalah menghapusnya dan itu adalah langkah selanjutnya yang ingin
saya ambil, hal berikutnya yang ingin saya terapkan di sini.
Kami mendapat FlatList kami dengan semua item sasaran ini dan alangkah baiknya jika kami dapat mengetuk item
tujuan tersebut, jadi item
daftar tersebut dan ketika kami mengetuknya, kami cukup menghapusnya dari daftar.
Sekarang hal baiknya adalah kita dapat secara unik mengidentifikasi setiap item karena setiap item di sini memiliki ID, jadi kita
dapat menggunakan ID itu untuk itu dan menyingkirkan item tersebut,
hal yang hilang adalah kita dapat mengetuknya. Sekarang pada komponen kita
sendiri, kita tidak bisa hanya menambahkan onPress atau
semacamnya, ini tidak akan berfungsi, jika saya konsol log yang bekerja di
sini, kita tidak akan melihat
log itu segera setelah saya menekan item.
Jadi izinkan saya menunjukkan ini kepada Anda, jika Anda membiarkan ini memuat ulang di sini dan kemudian kita lagi belajar Bereaksi Asli dan
saya menambahkan ini dan saya ketuk ini beberapa kali di sini, saya mengetuk ini, Anda tidak melihat output di sini dan
itu membuat masuk akal, ini adalah komponen khusus dan onPress sekarang hanya akan menjadi penyangga yang kami lewati untuk komponen
ini, penyangga ini akan terhubung ke fungsi ini tetapi tidak ada yang memicu penyangga itu dari dalam komponen.
Jadi kita harus masuk ke komponen itu dan memastikan bahwa tampilan ini dapat ditekan.
Sekarang sebenarnya, sebuah tampilan memiliki berbagai alat peraga yang membantu kami mendengarkan acara, jika
Anda mengetik di sini, IDE Anda, jika Anda menggunakan Visual Studio Code akan memberi Anda beberapa
pelengkapan otomatis dan Anda melihat ada cukup banyak acara
yang dapat Anda lakukan. mendengarkan, misalnya onTouchEnd sebenarnya membantu kita mendengarkan ketika pengguna pada dasarnya menyentuh ini dan
selesai menyentuh ini.
Masalahnya adalah bahwa onTouchEnd dan beberapa pendengar lain yang kami dapatkan di sini berada pada level yang
terlalu rendah.
Kami dapat mengatur pendengar yang sangat rinci untuk berbagai acara di sini, tetapi misalnya onTouchEnd tidak memberi tahu
kami berapa lama pengguna
menekan ini dan jika Anda perlu mencari tahu apakah itu pers lama atau tekan singkat,
Anda harus secara manual atur timer ketika pengguna mulai menyentuhnya dengan onTouchStart, tunggu onTouchEnd dan kemudian putuskan secara
manual apakah itu cukup lama atau tidak.
Ini biasanya bukan apa yang ingin Anda lakukan, tentu saja hebat bahwa
Anda memiliki fleksibilitas penuh untuk melakukan itu, tetapi jika Anda ingin acara sentuhan standar seperti pers lama, maka ini tidak ideal
karena Anda harus melakukan semua yang berat
Mengangkat sendiri, Anda harus menulis banyak kode untuk mengetahui jenis sentuhan itu sendiri.
Hal yang baik adalah, React Native telah Anda liput.
Ada komponen yang dapat disentuh bawaan yang dapat Anda impor dan yang dapat disentuh adalah komponen yang dapat
Anda bungkus komponen apa pun
yang Anda miliki, jadi di sekitar tampilan apa pun atau teks apa pun yang Anda miliki dan tidak terlihat,
itu tidak membuat apa pun yang Anda dapat melihat pada layar tetapi itu akan membungkus ini dan mendaftarkan
acara sentuh pada anak yang Anda bungkus menyentuh dan menyentuh kemudian memberi Anda acara sentuhan selesai, jadi acara sentuh yang
lebih rinci yang telah diatur sebelumnya untuk Anda. Sekarang tepatnya, dapat disentuh seperti ini tidak dapat digunakan
sebagai komponen, ia bertindak lebih sebagai kelas induk untuk React Native karena ada beberapa versi spesifik
yang dapat disentuh
yang kemudian harus Anda gunakan, misalnya ada opacity yang dapat disentuh. Mari kita gunakan opacity terjamah alih-alih terjamah karena sekarang
benar-benar merupakan komponen yang dapat
Anda gunakan dan sekarang di sini, Anda akan melihat bahwa jika Anda mengetik, Anda mendapatkan beberapa acara sentuh
tingkat tinggi yang dapat Anda dengarkan, seperti onPress atau
onLongPress dan itu tentu saja jauh lebih bermanfaat.
Sekarang di sini, saya dapat mendengarkan onPress yang berarti ini adalah acara pers normal karena kita dapat mendengarkan pada
tombol dan ketika ini dipicu, apa yang dapat kita lakukan tentu saja kita dapat mengeksekusi kode apa pun yang kita inginkan dan
misalnya, kita dapat meneruskan ini katakanlah alat peraga. onDelete.
Jadi kami memanggil fungsi yang diteruskan ke komponen ini pada prop onDelete, kami tidak mengatur
prop ini sekarang, tetapi kami sekarang memanggil sesuatu pada prop ini dan sekarang kami
bisa pergi ke tempat itu, ke app. js di mana kita menggunakan item sasaran dan menambahkan
prop onDelete alih-alih onPress dan onDelete sekarang harus menunjuk ke suatu fungsi karena kita mengharapkan fungsi di sini di
item sasaran kita karena onPress mengharapkan suatu fungsi dan kita hanya meneruskan apa yang pada poin-poin dihapus ke onPress.
Jadi onDelete harus menunjuk pada suatu fungsi dan itu hanyalah fungsi yang mencetak berfungsi. Meskipun demikian, itu setidaknya baik untuk pengujian, jadi
mari kita lihat
apakah saya belajar Bereaksi Asli dan saya tambahkan ini dan saya ketuk ini di sini beberapa kali, Anda lihat saya mendapatkan umpan
balik ini, ini sedikit efek opacity di sini setelah menekan dan jika saya melakukan ini, Anda
lihat di sini di log, sehingga berhasil. Dan Anda juga melihat efek opacity yang dapat
disentuh, ini benar-benar memberi kami umpan balik visual tentang sentuhan kami dengan mengubah opacity dari elemen yang
kami sentuh.
Anda juga dapat mengontrol opacity ini dengan mengatur prop opacity aktif di sini, pada opacity yang dapat disentuh dan mengatur ini ke
angka, misalnya ke. 8 dan
sekarang ini akan menjadi kurang transparan misalnya jika Anda menekannya.
Jadi sekarang jika saya belajar Bereaksi Asli di sini dan saya tekan ini, efek opacity
jauh lebih kuat seperti yang Anda lihat. Jadi Anda dapat mengonfigurasikan ini untuk kebutuhan Anda dan dengan itu, Anda
tidak hanya dapat menambahkan efek yang bagus tetapi tentu saja juga mendengarkan efek pers. Sekarang opacity yang dapat disentuh bukan satu-satunya komponen yang
dapat Anda gunakan, selain opacity yang dapat disentuh, Anda juga memiliki highlight yang dapat disentuh, jadi mari kita gunakan highlight yang dapat disentuh
sekarang alih-alih untuk melihat bagaimana perilakunya dan ide umumnya sama dengan highlight yang dapat disentuh,
Anda juga dapat mendengarkan untuk menekan acara, jadi untuk acara tingkat tinggi ini, acara yang sudah dikonfigurasikan ini tetapi umpan
balik visual akan berbeda.
Di sini, kita tidak akan mengubah opacity dari elemen yang dibungkus tetapi warna latar belakang.
Jadi sekarang jika saya mempelajari React Native dan saya mengetuk ini, Anda
lihat sekarang warna latar berubah menjadi hitam dan tentu saja, ini dalam kasus ini
bukan efek visual yang kita inginkan. Sekarang Anda juga dapat mengkonfigurasi opacity aktif di
sana jika Anda mau, Anda dapat mengkonfigurasi penundaan mana yang diasumsikan untuk pers lama, Anda bisa
melakukan itu pada opacity terjamah juga, sehingga Anda dapat mengkonfigurasi efek itu dan Anda bisa bermain-main dengan itu untuk dapatkan
perasaan bagaimana menggunakannya.
Selain opacity yang dapat disentuh dan highlight yang dapat disentuh, Anda juga memiliki umpan balik asli yang dapat disentuh dan hanya berfungsi di Android dan untuk saat ini, Anda tidak tahu bagaimana cara
mengetahui apakah ini berjalan di Android atau tidak, saya akan menunjukkan kepada Anda bagaimana menentukan platform
mana yang Anda menjalankan nanti, untuk sekarang mari kita gunakan itu
dan Anda tidak akan dapat menguji ini pada iPhone simulator tetapi di sini di Android, jika saya sekarang menambahkan
ini, Anda akan melihat bahwa Anda mendapatkan efek riak ini sekarang jika Anda menguji
ini di sini dan tentu saja, Anda juga dapat mengkonfigurasi efek ini di sini dengan alat peraga yang dapat Anda atur dan seperti
biasa, dokumen resmi juga merupakan tempat yang tepat untuk dikunjungi jika Anda ingin mempelajari lebih lanjut tentang cara
mengonfigurasi ini,
sehingga memiliki efek riak dapat bersikap baik pada Android juga.
Dan last but not least, ada juga yang dapat disentuh tanpa umpan balik dan ini melakukan apa
yang namanya, memungkinkan Anda untuk mendaftar acara ini tetapi tidak memberikan umpan balik visual karena kadang-kadang Anda hanya
ingin memiliki sesuatu yang dapat Anda ketuk tetapi di mana Anda memang tidak tidak ingin memberikan umpan balik kepada pengguna.
Jadi di sini, saya dapat mengetuk ini
sebanyak yang saya inginkan, keran terdaftar dan karenanya saya
melihat hasilnya di sini tetapi kami tidak mendapatkan umpan balik visual. Jadi komponen yang dapat disentuh ini sangat penting dalam React
Native karena memungkinkan Anda untuk memasang pendengar sentuh tingkat tinggi normal, seperti onPress, onLongPress, dan seterusnya ke komponen apa pun di
React Native dan dengan itu Anda dapat membangun komponen yang dapat Anda sentuh sendiri, tombol Anda sendiri. ,
tautan Anda sendiri, apa pun yang Anda butuhkan.
Sekarang di sini, saya akan kembali ke opacity yang dapat disentuh karena saya suka efek opacity ini tetapi sungguh, jangan ragu untuk menghentikan video di sini dan
bermain-main dengan berbagai efek yang dapat disentuh ini dan bermain-main dengan berbagai konfigurasi yang dapat Anda terapkan
di sana, jelas kami ' Saya
akan banyak menggunakan sentuhan selama seluruh kursus ini, jadi kami
akan melihat mereka di sana banyak kali tetapi ini juga merupakan tempat yang tepat bagi Anda untuk memulai dengan
komponen-komponen ini. Seperti yang saya
katakan, saya akan pergi dengan opacity terjamah di sini dan sekarang langkah selanjutnya adalah memastikan bahwa kita tidak
hanya mencatat sesuatu ke konsol tetapi bahwa kita benar-benar menghapus item yang ditekan.