1 00:00:02,330 --> 00:00:03,970 Jadi kita dapat menambahkan elemen kita 2 00:00:03,970 --> 00:00:08,150 di sini, yang tidak dapat kita lakukan adalah menghapusnya dan itu adalah langkah selanjutnya yang ingin 3 00:00:08,190 --> 00:00:10,880 saya ambil, hal berikutnya yang ingin saya terapkan di sini. 4 00:00:10,960 --> 00:00:16,420 Kami mendapat FlatList kami dengan semua item sasaran ini dan alangkah baiknya jika kami dapat mengetuk item 5 00:00:16,450 --> 00:00:18,010 tujuan tersebut, jadi item 6 00:00:18,130 --> 00:00:21,960 daftar tersebut dan ketika kami mengetuknya, kami cukup menghapusnya dari daftar. 7 00:00:21,970 --> 00:00:27,550 Sekarang hal baiknya adalah kita dapat secara unik mengidentifikasi setiap item karena setiap item di sini memiliki ID, jadi kita 8 00:00:27,550 --> 00:00:30,590 dapat menggunakan ID itu untuk itu dan menyingkirkan item tersebut, 9 00:00:30,760 --> 00:00:35,240 hal yang hilang adalah kita dapat mengetuknya. Sekarang pada komponen kita 10 00:00:35,260 --> 00:00:38,730 sendiri, kita tidak bisa hanya menambahkan onPress atau 11 00:00:38,740 --> 00:00:44,040 semacamnya, ini tidak akan berfungsi, jika saya konsol log yang bekerja di 12 00:00:44,050 --> 00:00:46,300 sini, kita tidak akan melihat 13 00:00:46,300 --> 00:00:49,570 log itu segera setelah saya menekan item. 14 00:00:49,570 --> 00:00:55,990 Jadi izinkan saya menunjukkan ini kepada Anda, jika Anda membiarkan ini memuat ulang di sini dan kemudian kita lagi belajar Bereaksi Asli dan 15 00:00:55,990 --> 00:01:02,050 saya menambahkan ini dan saya ketuk ini beberapa kali di sini, saya mengetuk ini, Anda tidak melihat output di sini dan 16 00:01:02,050 --> 00:01:07,990 itu membuat masuk akal, ini adalah komponen khusus dan onPress sekarang hanya akan menjadi penyangga yang kami lewati untuk komponen 17 00:01:07,990 --> 00:01:13,420 ini, penyangga ini akan terhubung ke fungsi ini tetapi tidak ada yang memicu penyangga itu dari dalam komponen. 18 00:01:14,020 --> 00:01:18,850 Jadi kita harus masuk ke komponen itu dan memastikan bahwa tampilan ini dapat ditekan. 19 00:01:19,030 --> 00:01:24,200 Sekarang sebenarnya, sebuah tampilan memiliki berbagai alat peraga yang membantu kami mendengarkan acara, jika 20 00:01:24,280 --> 00:01:30,190 Anda mengetik di sini, IDE Anda, jika Anda menggunakan Visual Studio Code akan memberi Anda beberapa 21 00:01:30,570 --> 00:01:33,830 pelengkapan otomatis dan Anda melihat ada cukup banyak acara 22 00:01:33,940 --> 00:01:40,150 yang dapat Anda lakukan. mendengarkan, misalnya onTouchEnd sebenarnya membantu kita mendengarkan ketika pengguna pada dasarnya menyentuh ini dan 23 00:01:40,180 --> 00:01:41,450 selesai menyentuh ini. 24 00:01:41,620 --> 00:01:48,340 Masalahnya adalah bahwa onTouchEnd dan beberapa pendengar lain yang kami dapatkan di sini berada pada level yang 25 00:01:48,430 --> 00:01:49,300 terlalu rendah. 26 00:01:49,480 --> 00:01:56,020 Kami dapat mengatur pendengar yang sangat rinci untuk berbagai acara di sini, tetapi misalnya onTouchEnd tidak memberi tahu 27 00:01:56,020 --> 00:01:57,960 kami berapa lama pengguna 28 00:01:58,090 --> 00:02:03,640 menekan ini dan jika Anda perlu mencari tahu apakah itu pers lama atau tekan singkat, 29 00:02:03,640 --> 00:02:10,090 Anda harus secara manual atur timer ketika pengguna mulai menyentuhnya dengan onTouchStart, tunggu onTouchEnd dan kemudian putuskan secara 30 00:02:10,090 --> 00:02:12,480 manual apakah itu cukup lama atau tidak. 31 00:02:12,610 --> 00:02:16,870 Ini biasanya bukan apa yang ingin Anda lakukan, tentu saja hebat bahwa 32 00:02:16,870 --> 00:02:24,100 Anda memiliki fleksibilitas penuh untuk melakukan itu, tetapi jika Anda ingin acara sentuhan standar seperti pers lama, maka ini tidak ideal 33 00:02:24,100 --> 00:02:26,770 karena Anda harus melakukan semua yang berat 34 00:02:26,770 --> 00:02:31,390 Mengangkat sendiri, Anda harus menulis banyak kode untuk mengetahui jenis sentuhan itu sendiri. 35 00:02:31,390 --> 00:02:34,200 Hal yang baik adalah, React Native telah Anda liput. 36 00:02:34,240 --> 00:02:40,660 Ada komponen yang dapat disentuh bawaan yang dapat Anda impor dan yang dapat disentuh adalah komponen yang dapat 37 00:02:40,660 --> 00:02:42,670 Anda bungkus komponen apa pun 38 00:02:42,760 --> 00:02:49,660 yang Anda miliki, jadi di sekitar tampilan apa pun atau teks apa pun yang Anda miliki dan tidak terlihat, 39 00:02:49,660 --> 00:02:56,200 itu tidak membuat apa pun yang Anda dapat melihat pada layar tetapi itu akan membungkus ini dan mendaftarkan 40 00:02:56,200 --> 00:03:03,190 acara sentuh pada anak yang Anda bungkus menyentuh dan menyentuh kemudian memberi Anda acara sentuhan selesai, jadi acara sentuh yang 41 00:03:03,190 --> 00:03:09,070 lebih rinci yang telah diatur sebelumnya untuk Anda. Sekarang tepatnya, dapat disentuh seperti ini tidak dapat digunakan 42 00:03:09,070 --> 00:03:13,900 sebagai komponen, ia bertindak lebih sebagai kelas induk untuk React Native karena ada beberapa versi spesifik 43 00:03:13,900 --> 00:03:15,040 yang dapat disentuh 44 00:03:15,160 --> 00:03:21,730 yang kemudian harus Anda gunakan, misalnya ada opacity yang dapat disentuh. Mari kita gunakan opacity terjamah alih-alih terjamah karena sekarang 45 00:03:21,730 --> 00:03:23,980 benar-benar merupakan komponen yang dapat 46 00:03:23,980 --> 00:03:30,760 Anda gunakan dan sekarang di sini, Anda akan melihat bahwa jika Anda mengetik, Anda mendapatkan beberapa acara sentuh 47 00:03:30,760 --> 00:03:34,140 tingkat tinggi yang dapat Anda dengarkan, seperti onPress atau 48 00:03:34,210 --> 00:03:37,120 onLongPress dan itu tentu saja jauh lebih bermanfaat. 49 00:03:37,120 --> 00:03:42,910 Sekarang di sini, saya dapat mendengarkan onPress yang berarti ini adalah acara pers normal karena kita dapat mendengarkan pada 50 00:03:42,910 --> 00:03:49,290 tombol dan ketika ini dipicu, apa yang dapat kita lakukan tentu saja kita dapat mengeksekusi kode apa pun yang kita inginkan dan 51 00:03:49,360 --> 00:03:54,520 misalnya, kita dapat meneruskan ini katakanlah alat peraga. onDelete. 52 00:03:54,520 --> 00:04:00,400 Jadi kami memanggil fungsi yang diteruskan ke komponen ini pada prop onDelete, kami tidak mengatur 53 00:04:00,410 --> 00:04:05,980 prop ini sekarang, tetapi kami sekarang memanggil sesuatu pada prop ini dan sekarang kami 54 00:04:05,980 --> 00:04:12,610 bisa pergi ke tempat itu, ke app. js di mana kita menggunakan item sasaran dan menambahkan 55 00:04:12,610 --> 00:04:18,820 prop onDelete alih-alih onPress dan onDelete sekarang harus menunjuk ke suatu fungsi karena kita mengharapkan fungsi di sini di 56 00:04:18,820 --> 00:04:25,030 item sasaran kita karena onPress mengharapkan suatu fungsi dan kita hanya meneruskan apa yang pada poin-poin dihapus ke onPress. 57 00:04:25,840 --> 00:04:32,750 Jadi onDelete harus menunjuk pada suatu fungsi dan itu hanyalah fungsi yang mencetak berfungsi. Meskipun demikian, itu setidaknya baik untuk pengujian, jadi 58 00:04:32,980 --> 00:04:34,480 mari kita lihat 59 00:04:34,480 --> 00:04:43,310 apakah saya belajar Bereaksi Asli dan saya tambahkan ini dan saya ketuk ini di sini beberapa kali, Anda lihat saya mendapatkan umpan 60 00:04:43,310 --> 00:04:49,940 balik ini, ini sedikit efek opacity di sini setelah menekan dan jika saya melakukan ini, Anda 61 00:04:49,940 --> 00:04:56,070 lihat di sini di log, sehingga berhasil. Dan Anda juga melihat efek opacity yang dapat 62 00:04:56,110 --> 00:05:02,560 disentuh, ini benar-benar memberi kami umpan balik visual tentang sentuhan kami dengan mengubah opacity dari elemen yang 63 00:05:02,560 --> 00:05:03,600 kami sentuh. 64 00:05:03,610 --> 00:05:10,930 Anda juga dapat mengontrol opacity ini dengan mengatur prop opacity aktif di sini, pada opacity yang dapat disentuh dan mengatur ini ke 65 00:05:10,930 --> 00:05:13,620 angka, misalnya ke. 8 dan 66 00:05:13,750 --> 00:05:18,120 sekarang ini akan menjadi kurang transparan misalnya jika Anda menekannya. 67 00:05:18,130 --> 00:05:23,980 Jadi sekarang jika saya belajar Bereaksi Asli di sini dan saya tekan ini, efek opacity 68 00:05:23,980 --> 00:05:29,860 jauh lebih kuat seperti yang Anda lihat. Jadi Anda dapat mengonfigurasikan ini untuk kebutuhan Anda dan dengan itu, Anda 69 00:05:29,860 --> 00:05:35,980 tidak hanya dapat menambahkan efek yang bagus tetapi tentu saja juga mendengarkan efek pers. Sekarang opacity yang dapat disentuh bukan satu-satunya komponen yang 70 00:05:35,980 --> 00:05:43,720 dapat Anda gunakan, selain opacity yang dapat disentuh, Anda juga memiliki highlight yang dapat disentuh, jadi mari kita gunakan highlight yang dapat disentuh 71 00:05:43,750 --> 00:05:48,850 sekarang alih-alih untuk melihat bagaimana perilakunya dan ide umumnya sama dengan highlight yang dapat disentuh, 72 00:05:48,880 --> 00:05:55,570 Anda juga dapat mendengarkan untuk menekan acara, jadi untuk acara tingkat tinggi ini, acara yang sudah dikonfigurasikan ini tetapi umpan 73 00:05:55,570 --> 00:05:57,370 balik visual akan berbeda. 74 00:05:57,460 --> 00:06:01,980 Di sini, kita tidak akan mengubah opacity dari elemen yang dibungkus tetapi warna latar belakang. 75 00:06:02,020 --> 00:06:06,520 Jadi sekarang jika saya mempelajari React Native dan saya mengetuk ini, Anda 76 00:06:06,520 --> 00:06:11,830 lihat sekarang warna latar berubah menjadi hitam dan tentu saja, ini dalam kasus ini 77 00:06:11,830 --> 00:06:17,260 bukan efek visual yang kita inginkan. Sekarang Anda juga dapat mengkonfigurasi opacity aktif di 78 00:06:17,260 --> 00:06:22,660 sana jika Anda mau, Anda dapat mengkonfigurasi penundaan mana yang diasumsikan untuk pers lama, Anda bisa 79 00:06:22,660 --> 00:06:29,080 melakukan itu pada opacity terjamah juga, sehingga Anda dapat mengkonfigurasi efek itu dan Anda bisa bermain-main dengan itu untuk dapatkan 80 00:06:29,080 --> 00:06:30,360 perasaan bagaimana menggunakannya. 81 00:06:30,700 --> 00:06:40,240 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 82 00:06:40,240 --> 00:06:45,150 mengetahui apakah ini berjalan di Android atau tidak, saya akan menunjukkan kepada Anda bagaimana menentukan platform 83 00:06:45,190 --> 00:06:48,550 mana yang Anda menjalankan nanti, untuk sekarang mari kita gunakan itu 84 00:06:48,550 --> 00:06:53,980 dan Anda tidak akan dapat menguji ini pada iPhone simulator tetapi di sini di Android, jika saya sekarang menambahkan 85 00:06:53,980 --> 00:06:58,140 ini, Anda akan melihat bahwa Anda mendapatkan efek riak ini sekarang jika Anda menguji 86 00:06:58,140 --> 00:07:04,930 ini di sini dan tentu saja, Anda juga dapat mengkonfigurasi efek ini di sini dengan alat peraga yang dapat Anda atur dan seperti 87 00:07:05,090 --> 00:07:10,400 biasa, dokumen resmi juga merupakan tempat yang tepat untuk dikunjungi jika Anda ingin mempelajari lebih lanjut tentang cara 88 00:07:10,400 --> 00:07:11,080 mengonfigurasi ini, 89 00:07:11,090 --> 00:07:14,360 sehingga memiliki efek riak dapat bersikap baik pada Android juga. 90 00:07:14,420 --> 00:07:19,940 Dan last but not least, ada juga yang dapat disentuh tanpa umpan balik dan ini melakukan apa 91 00:07:20,000 --> 00:07:25,700 yang namanya, memungkinkan Anda untuk mendaftar acara ini tetapi tidak memberikan umpan balik visual karena kadang-kadang Anda hanya 92 00:07:25,700 --> 00:07:31,970 ingin memiliki sesuatu yang dapat Anda ketuk tetapi di mana Anda memang tidak tidak ingin memberikan umpan balik kepada pengguna. 93 00:07:32,240 --> 00:07:34,740 Jadi di sini, saya dapat mengetuk ini 94 00:07:34,820 --> 00:07:37,760 sebanyak yang saya inginkan, keran terdaftar dan karenanya saya 95 00:07:37,760 --> 00:07:44,210 melihat hasilnya di sini tetapi kami tidak mendapatkan umpan balik visual. Jadi komponen yang dapat disentuh ini sangat penting dalam React 96 00:07:44,240 --> 00:07:51,140 Native karena memungkinkan Anda untuk memasang pendengar sentuh tingkat tinggi normal, seperti onPress, onLongPress, dan seterusnya ke komponen apa pun di 97 00:07:51,230 --> 00:07:57,080 React Native dan dengan itu Anda dapat membangun komponen yang dapat Anda sentuh sendiri, tombol Anda sendiri. , 98 00:07:57,080 --> 00:07:59,980 tautan Anda sendiri, apa pun yang Anda butuhkan. 99 00:07:59,980 --> 00:08:08,800 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 100 00:08:08,800 --> 00:08:14,410 bermain-main dengan berbagai efek yang dapat disentuh ini dan bermain-main dengan berbagai konfigurasi yang dapat Anda terapkan 101 00:08:14,410 --> 00:08:16,490 di sana, jelas kami ' Saya 102 00:08:16,570 --> 00:08:19,990 akan banyak menggunakan sentuhan selama seluruh kursus ini, jadi kami 103 00:08:19,990 --> 00:08:26,020 akan melihat mereka di sana banyak kali tetapi ini juga merupakan tempat yang tepat bagi Anda untuk memulai dengan 104 00:08:26,140 --> 00:08:27,940 komponen-komponen ini. Seperti yang saya 105 00:08:27,940 --> 00:08:33,040 katakan, saya akan pergi dengan opacity terjamah di sini dan sekarang langkah selanjutnya adalah memastikan bahwa kita tidak 106 00:08:33,040 --> 00:08:36,700 hanya mencatat sesuatu ke konsol tetapi bahwa kita benar-benar menghapus item yang ditekan.