1 00:00:02,180 --> 00:00:03,960 Jadi itulah aplikasi kami di sini. 2 00:00:04,190 --> 00:00:08,750 Sekarang di aplikasi ini, kami menambahkan banyak fungsi tetapi ada satu hal lagi yang ingin 3 00:00:08,750 --> 00:00:10,910 saya tambahkan dan itu menarik untuk menyegarkan. 4 00:00:10,910 --> 00:00:14,640 Katakanlah saya pergi untuk dapat mengambil semua produk dari dalam halaman ini, 5 00:00:14,720 --> 00:00:18,380 jadi tanpa meninggalkannya dan kembali yang akan mengambil produk-produk terbaru tetapi 6 00:00:18,470 --> 00:00:23,450 dari dalam halaman ini dengan hanya menggunakan tarikan ini untuk menyegarkan pola di mana Anda menyeret 7 00:00:23,450 --> 00:00:27,910 ke bawah dan kemudian memuat ulang. Untungnya itu sangat mudah dilakukan di Bereaksi Asli jika 8 00:00:27,920 --> 00:00:33,960 Anda menggunakan daftar datar atau tampilan gulir karena itu dibangun ke dalam komponen ini. Di sini, di layar ikhtisar produk pada daftar datar, 9 00:00:34,000 --> 00:00:40,430 Anda dapat menerapkannya hanya dengan menambahkan alat peraga ke daftar datar. Prop pertama pada refresh, Anda perlu menambahkan dan 10 00:00:40,430 --> 00:00:42,500 ini harus menunjuk pada 11 00:00:42,500 --> 00:00:48,860 fungsi yang dieksekusi ketika pengguna menarik ke bawah, jadi ketika pengguna memulai tarik ini untuk 12 00:00:48,860 --> 00:00:51,900 menyegarkan iklan tindakan di sini di layar 13 00:00:52,060 --> 00:00:57,290 ikhtisar produk, tentu saja kita dapat dengan mudah arahkan pada memuat produk karena 14 00:00:57,320 --> 00:00:59,510 pada akhirnya fungsi yang memuat 15 00:00:59,510 --> 00:01:01,610 produk kami, jadi ini sempurna. 16 00:01:01,610 --> 00:01:09,620 Jadi di sini kita bisa menunjuk ke produk beban. Sekarang dengan menambahkan ini, kita secara otomatis mendapatkan fungsi ini tetapi 17 00:01:09,770 --> 00:01:15,260 di sini kita juga mendapatkan kesalahan, bahwa penyegaran penyegaran harus diatur karena itulah hal lain 18 00:01:15,260 --> 00:01:21,980 yang selalu harus Anda atur saat Anda menambahkan penyegaran. Menyetel pada penyegaran secara otomatis membuka semua perilaku ini 19 00:01:22,010 --> 00:01:23,090 dan juga 20 00:01:23,090 --> 00:01:28,850 pemintal bagus yang Anda dapatkan secara default, React Native akan melakukan semua itu untuk Anda, 21 00:01:28,850 --> 00:01:36,700 tetapi itu hanya berlaku jika Anda juga menambahkan alat penyegaran. Penyegaran diperlukan untuk memberi tahu Bereaksi Asli ketika Anda selesai dan 22 00:01:36,700 --> 00:01:43,270 karena itu harus menunjuk pada variabel, pada variabel stateful, jadi pada beberapa keadaan yang menunjukkan apakah Anda sedang memuat 23 00:01:43,270 --> 00:01:45,280 atau tidak dan tentu saja 24 00:01:45,340 --> 00:01:49,530 itu hebat karena kami memiliki prop isLoading kami di sini, sehingga memberi 25 00:01:49,840 --> 00:01:54,720 tahu kami apakah kami memuat atau tidak. Kami hanya akan memiliki satu 26 00:01:55,030 --> 00:01:59,680 masalah, jika kami memuat, saya mengganti seluruh konten layar dan itu 27 00:01:59,680 --> 00:02:08,260 tentu saja bukan yang ingin saya lakukan untuk memuat ulang. Jadi kita akan memperbaikinya dan perbaikan sederhana bisa jadi kita menghapus set isLoading 28 00:02:08,260 --> 00:02:14,800 bagian di sini dari memuat produk, baik mengaturnya ke true dan ke false dan sebaliknya melakukan itu hanya untuk beban awal di 29 00:02:14,800 --> 00:02:20,530 sini dalam efek penggunaan di mana kita memicu produk beban ketika komponen dimuat dan kemudian di sini, menggunakan sintaks 30 00:02:20,590 --> 00:02:26,530 ini lalu, atur ini ke false setelah kita selesai. Kita dapat melakukan itu karena memuat produk akan memberikan 31 00:02:26,530 --> 00:02:32,720 janji karena memiliki kata kunci async ini, oleh karena itu ia mengembalikan janji dan dengan itu, kita mendapatkan pemintal pemuatan 32 00:02:32,720 --> 00:02:36,050 saat ini awalnya dimuat tetapi tidak ketika dimuat ulang dan itu 33 00:02:36,050 --> 00:02:41,330 juga berarti bahwa ketika kita mengunjungi ini Halaman, kami tidak melihat pemintal tapi itu mungkin baik-baik saja. 34 00:02:41,340 --> 00:02:43,250 Kami memiliki beberapa konten di sana 35 00:02:43,290 --> 00:02:50,190 dan jika itu kemudian diperbarui setelah mengunjungi halaman ini, itu mungkin baik-baik saja. Jadi sekarang kita tidak sedang mengatur sedang memuat di sini 36 00:02:50,190 --> 00:02:53,480 tapi sekarang kita dapat mengatur keadaan yang berbeda di sini, 37 00:02:53,550 --> 00:02:59,030 sebut saja isRefreshing mungkin dan set isRefreshing. Di sini saya ingin 38 00:02:59,100 --> 00:03:04,200 mengelola keadaan yang awalnya salah, seperti isLoading dan 39 00:03:04,200 --> 00:03:05,210 sekarang 40 00:03:05,220 --> 00:03:17,370 yang ingin saya atur di sini, jadi set menyegarkan ke true di sini dan juga di sini setelah mencoba 41 00:03:17,380 --> 00:03:25,950 menangkap, setel ke false setelah Anda selesai. Jadi tentu saja, ini bekerja dengan cara yang sama seperti isLoading tapi sekarang 42 00:03:26,100 --> 00:03:32,760 saya tidak akan menggunakan isRefreshing untuk mengganti seluruh konten layar tetapi sebaliknyaRefreshing sekarang dapat dimasukkan kembali ke dalam daftar datar pada 43 00:03:32,760 --> 00:03:39,360 prop penyegaran ini dan karenanya pada beban awal, ini berfungsi seperti sebelumnya tetapi sekarang di sini, kami mendapatkan fungsi Tarik 44 00:03:39,360 --> 00:03:45,720 ke Segarkan yang menyenangkan ini, Anda melihatnya di sini. Saya dapat menarik ke bawah, mendapatkan pemintal itu dan ini akan secara otomatis dimuat ulang 45 00:03:45,780 --> 00:03:51,000 dan saya dapat membuktikan ini dengan mengedit ini di server ini. Jika saya menambahkan lapisan tambahan atau beberapa 46 00:03:51,000 --> 00:03:57,890 tanda seru tambahan di sana, kita bisa mendapatkan tanda seru itu dengan menarik dan menyegarkan, di sini Anda melihat hal itu 47 00:03:58,160 --> 00:04:03,530 dan hal yang sama tentu saja di Android. Di sana Anda juga mendapatkan fungsionalitas di 48 00:04:03,530 --> 00:04:10,280 luar kotak dan ini adalah betapa mudahnya Anda dapat menambahkan fungsionalitas Tarik ke Segarkan ke aplikasi Bereaksi Asli Anda.