1 00:00:02,280 --> 00:00:05,200 Mari kita mulai dengan menata laci di layar filter, 2 00:00:05,220 --> 00:00:06,560 itu tidak sulit, 3 00:00:06,570 --> 00:00:11,080 itu adalah sesuatu yang kami lakukan sebelumnya. Di navigator filter di sini, 4 00:00:11,100 --> 00:00:16,500 di navigator tumpukan, kami pada akhirnya hanya perlu mengatur opsi navigasi default yang kami 5 00:00:16,500 --> 00:00:24,090 juga gunakan untuk navigator favorit di navigator makanan kami. Jadi kita bisa menyalin objek konfigurasi kedua ini di sini 6 00:00:24,090 --> 00:00:29,270 dan menambahkan ini pada navigator filter kami di sini sebagai argumen kedua untuk membuat stack navigator. 7 00:00:29,350 --> 00:00:31,870 Tentu saja, kami dapat menghapus baris komentar 8 00:00:31,870 --> 00:00:39,220 itu tetapi dengan perubahan sederhana ini, kami memastikan kami menggunakan bilah navigasi atau gaya bilah tindakan yang sama 9 00:00:39,220 --> 00:00:40,450 di sini. 10 00:00:40,450 --> 00:00:45,580 Jadi itu perubahan yang sederhana namun bermanfaat, sekarang untuk laci itu sendiri, bagaimana dengan 11 00:00:45,580 --> 00:00:48,770 tampilan ini di sini dan gaya laci itu? 12 00:00:48,780 --> 00:00:55,690 Sekarang untuk satu, Anda dapat jika Anda ingin mengontrol seluruh laci dan mengubah bagaimana item diletakkan di sana dan tidak menggunakan default 13 00:00:55,990 --> 00:01:01,120 ini memiliki daftar dengan efek riak di sini di Android dan efek yang berbeda pada iOS tapi 14 00:01:01,120 --> 00:01:01,910 saya pikir 15 00:01:02,050 --> 00:01:05,680 itu adalah standar yang bagus yang sebenarnya saya tidak ingin berubah. 16 00:01:05,710 --> 00:01:10,930 Namun jika Anda mau, Anda dapat mengganti seluruh komponen ini yang dirender di sini dan dilampirkan, Anda 17 00:01:10,930 --> 00:01:15,850 menemukan tautan ke dokumen resmi tempat Anda dapat mempelajari lebih lanjut tentang ini jika Anda perlu 18 00:01:15,850 --> 00:01:16,510 menyesuaikan ini. 19 00:01:16,780 --> 00:01:25,050 Apa yang tentu saja ingin saya ubah adalah gaya barang-barang ini dan teks yang ditampilkan di sini. 20 00:01:25,060 --> 00:01:26,550 Nah, itu tidak 21 00:01:26,590 --> 00:01:32,500 terlalu sulit, mari kita mulai dengan teks. Sebagai teks, seperti yang Anda tahu, secara default mengambil 22 00:01:32,530 --> 00:01:34,550 pengidentifikasi ini di sini, penyaring makanan. 23 00:01:34,570 --> 00:01:39,020 Sekarang tentu saja, itu bisa dilakukan tetapi makan, itu bukan teks 24 00:01:39,040 --> 00:01:42,250 yang ingin kami tunjukkan kepada pengguna kami. 25 00:01:42,250 --> 00:01:47,540 Oleh karena itu, saya ingin menimpa ini dan kita dapat melakukan ini dengan opsi navigasi lama 26 00:01:47,560 --> 00:01:53,920 yang bagus yang sama seperti sebelumnya dengan tab di mana kita juga dapat mengontrol teks label, kita harus mengatur 27 00:01:54,160 --> 00:02:00,460 navigator tumpukan kita, baik ketika kita membuat stack navigator, ada di samping pengaturan opsi navigasi default untuk setiap layar 28 00:02:00,460 --> 00:02:05,690 di navigator itu, kita dapat mengatur opsi navigasi untuk keseluruhan navigator itu sendiri yang kemudian bukan 29 00:02:05,700 --> 00:02:10,510 untuk layar di navigator tetapi untuk navigator ketika digunakan sebagai layar yang merupakan apa 30 00:02:10,510 --> 00:02:11,500 yang kita 31 00:02:11,740 --> 00:02:19,570 Sedang dilakukan di sini dan kemudian di sini kita dapat menetapkan label laci dan dapat mengatur ini untuk menyaring dengan beberapa tanda seru hanya 32 00:02:19,570 --> 00:02:22,100 agar kita melihat bahwa ini memiliki efek, 33 00:02:22,150 --> 00:02:23,720 sekarang kita melihat itu di 34 00:02:23,770 --> 00:02:27,220 sini, sehingga di situlah kita dapat mengatur ini, satu opsi. 35 00:02:27,220 --> 00:02:32,800 Atau di sini saat membuat navigator laci, kita dapat menggunakan formulir yang lebih panjang di mana 36 00:02:32,800 --> 00:02:38,260 kita mengatur layar dan di mana kita kemudian mengatur opsi navigasi di sini dan ini 37 00:02:38,590 --> 00:02:40,230 hanyalah alternatif di mana keduanya 38 00:02:40,240 --> 00:02:41,830 tidak lebih baik 39 00:02:41,980 --> 00:02:47,840 atau lebih buruk, Anda dapat menggunakan salah satu dari mereka dan sekarang di sini, saya akan menetapkan 40 00:02:47,840 --> 00:02:52,760 label laci untuk makanan katakanlah, itu lebih masuk akal bagi saya daripada makanan favorit. 41 00:02:53,600 --> 00:02:58,670 Jadi dengan itu jika saya sekarang membuka laci, saya melihat makanan dan filter. Untuk filter, saya sekarang tidak mengganti judul 42 00:02:58,670 --> 00:03:02,100 karena saya baik-baik saja dengan default mengambil pengenal saya 43 00:03:02,240 --> 00:03:04,580 tetapi untuk makanan, saya menimpanya. 44 00:03:04,580 --> 00:03:08,420 Sekarang bagaimana dengan styling, warna dan sebagainya? 45 00:03:08,420 --> 00:03:15,020 Nah itu tentu saja bisa dikontrol juga. Nah seperti sebelumnya dengan misalnya tab di mana kita 46 00:03:15,020 --> 00:03:21,260 juga bisa memberikan argumen kedua untuk membuat navigator tab bawah untuk mengontrol tata letak dan gaya tab 47 00:03:21,260 --> 00:03:22,130 secara umum, 48 00:03:22,130 --> 00:03:28,190 kita dapat melakukan hal yang sama untuk laci. Untuk membuat drawer navigator, kita dapat memberikan argumen kedua yang 49 00:03:28,220 --> 00:03:31,320 merupakan objek yang dikonfigurasikan ke drawer navigator itu sendiri dan di 50 00:03:31,550 --> 00:03:33,290 sana, kita mendapatkan beberapa opsi. 51 00:03:33,320 --> 00:03:37,880 Sekali lagi, dokumen resmi memberi Anda daftar lengkap segala sesuatu yang dapat Anda konfigurasi, 52 00:03:37,880 --> 00:03:42,980 misalnya Anda punya opsi konten yang memungkinkan Anda untuk mengontrol konten di laci, sehingga item laci 53 00:03:42,980 --> 00:03:47,730 sampai akhir dan di sana, Anda punya banyak pengaturan yang dapat Anda atur, misalnya Anda 54 00:03:47,930 --> 00:03:53,960 dapat mengatur warna warna aktif yang pada dasarnya untuk warna item memiliki ketika itu aktif dan di sana, kita dapat 55 00:03:54,090 --> 00:03:59,870 mengatur ini untuk warna, aksen warna jika kita mau, daripada menggunakan standar biru itu dan oleh karena itu sekarang, 56 00:03:59,870 --> 00:04:00,320 ini 57 00:04:00,320 --> 00:04:05,170 berwarna oranye dan ini adalah betapa mudahnya untuk mengubah ini, ini yang perlu kita lakukan. 58 00:04:05,330 --> 00:04:08,980 Sekarang jika kita juga ingin mengubah font yang 59 00:04:09,080 --> 00:04:15,710 digunakan di sana, kita juga bisa melakukannya. Selain mengatur warna warna aktif di sini pada opsi konten, 60 00:04:15,710 --> 00:04:17,120 kita dapat mengatur 61 00:04:17,120 --> 00:04:22,010 gaya label di sini dan yang mengambil objek gaya yang akan diterapkan pada komponen teks 62 00:04:22,010 --> 00:04:24,810 yang mendasarinya di laci, sehingga kita dapat mengatur hal-hal 63 00:04:24,950 --> 00:04:32,870 seperti penyelarasan teks di sana jika kami ingin atau dalam kasus saya di sini, cukup mengatur keluarga font dan mengatur ini untuk membuka sans, mungkin 64 00:04:32,870 --> 00:04:36,550 seperti ini, bahkan bukan versi berani. Jika kita melakukan itu, kita jelas melihat perbedaannya. 65 00:04:36,550 --> 00:04:40,790 Sekarang saya akan mengaturnya kembali ke huruf tebal sebenarnya karena itu lebih baik tetapi untuk melihat perbedaan, 66 00:04:40,880 --> 00:04:42,890 saya pikir itu jelas tanpa huruf tebal. 67 00:04:42,920 --> 00:04:44,950 Jadi sekarang, kami menggunakan font 68 00:04:44,960 --> 00:04:47,570 kami sendiri di sini, versi yang berani 69 00:04:47,570 --> 00:04:48,530 dan warna 70 00:04:48,530 --> 00:04:54,130 kami sendiri dan itu cukup rapi menurut saya, hal yang sama juga berlaku di Android. 71 00:04:54,170 --> 00:04:58,460 Ini adalah bagaimana Anda dapat bekerja dengan laci Anda, bagaimana Anda 72 00:04:58,460 --> 00:05:01,700 juga dapat menata segalanya di sana dan dengan 73 00:05:01,940 --> 00:05:07,850 itu, Anda belajar tentang pola navigasi utama yang dapat Anda tambahkan ke aplikasi Anda dengan 74 00:05:07,850 --> 00:05:09,270 bantuan React navigation. 75 00:05:09,290 --> 00:05:15,770 Sekarang jelas ketika saya menekankan beberapa kali di seluruh modul ini, ada banyak yang harus dikonfigurasikan, semua navigator ini 76 00:05:15,770 --> 00:05:20,990 memiliki opsi dan pengaturan navigasi yang berbeda untuk navigator itu sendiri dan oleh karena itu pasti 77 00:05:20,990 --> 00:05:26,060 memeriksa dokumen resmi dan hanya bermain-main dengan pengaturan berbeda yang Anda lihat di sana untuk 78 00:05:26,060 --> 00:05:31,820 bereksperimenlah dengan apa yang dapat Anda lakukan. Hal-hal yang saya perlihatkan di sini dan hal-hal yang kami ubah di 79 00:05:31,820 --> 00:05:35,000 sini mungkin adalah hal-hal umum yang ingin Anda sesuaikan. Itulah mengapa saya menunjukkannya di 80 00:05:35,090 --> 00:05:36,580 sini, tetapi sekali lagi ada 81 00:05:36,590 --> 00:05:40,950 banyak hal yang harus dilakukan, pasti lihat dokumen resmi. Untuk aplikasi ini, bagian 82 00:05:40,970 --> 00:05:43,960 navigasi pada dasarnya sudah selesai, tidak ada 83 00:05:43,970 --> 00:05:46,410 terlalu banyak untuk ditambahkan, sekarang saatnya 84 00:05:46,430 --> 00:05:50,360 untuk meninjau kembali gaya umum, misalnya pastikan kita menggunakan font 85 00:05:50,360 --> 00:05:56,600 yang tepat di mana-mana, juga di tab dan di header dan untuk Sebagai contoh juga untuk 86 00:05:56,660 --> 00:06:00,590 teks di sini yang saat ini kita tidak dan kemudian 87 00:06:00,590 --> 00:06:06,050 mengisi sisa aplikasi dengan beberapa daging. Misalnya halaman detail di sini yang masih 88 00:06:06,050 --> 00:06:11,810 memiliki beberapa konten dummy saat ini dan juga halaman filter kami yang juga hanya memiliki konten dummy. 89 00:06:11,810 --> 00:06:14,290 Itulah yang akan saya lakukan di sisa 90 00:06:14,330 --> 00:06:20,330 modul ini, setelah itu di modul berikutnya, kami juga akan memastikan bahwa kami menambahkan lebih banyak logika dan bahwa kita 91 00:06:20,330 --> 00:06:25,700 misalnya dapat menandai sesuatu sebagai favorit dan karenanya dapat menambahkannya ke favorit tab yang saat ini tidak berfungsi. 92 00:06:25,910 --> 00:06:30,470 Namun untuk sekarang, mari selesaikan penataan dan tambahkan tata letak dan konten lainnya ke aplikasi ini.