1 00:00:02,270 --> 00:00:05,450 Jadi, bagaimana kita menetapkan ikon di sini? 2 00:00:05,450 --> 00:00:09,580 Lalu bagaimana kita bisa memastikan bahwa kita menggunakan warna yang 3 00:00:09,590 --> 00:00:10,990 ingin kita gunakan? 4 00:00:11,090 --> 00:00:12,760 Mari kita mulai 5 00:00:12,760 --> 00:00:17,920 dengan warna sebelum kita menambahkan ikon. Sama seperti fungsi navigator buat stack 6 00:00:18,020 --> 00:00:20,290 navigator, buat navigator tab 7 00:00:20,290 --> 00:00:25,250 bawah juga membutuhkan argumen kedua. Argumen pertama adalah objek konfigurasi Anda di mana 8 00:00:25,280 --> 00:00:27,370 Anda mengkonfigurasi tab yang berbeda dan 9 00:00:27,410 --> 00:00:33,600 layar yang ditunjukkannya, argumen kedua juga merupakan objek di mana Anda dapat mengkonfigurasi navigator secara umum dan di sana, 10 00:00:33,610 --> 00:00:35,290 Anda memiliki beberapa pengaturan. 11 00:00:35,330 --> 00:00:40,120 Sekali lagi, dokumen resmi adalah tempat untuk mempelajari setiap pengaturan di 12 00:00:40,310 --> 00:00:45,340 sini, salah satu pengaturan yang lebih penting di sini adalah opsi tab bar. 13 00:00:45,380 --> 00:00:52,970 Ini adalah objek lain dan di sana, Anda dapat secara terperinci mengontrol bagaimana bilah tab muncul, bagaimana itu ditata. 14 00:00:53,090 --> 00:00:59,180 Anda dapat mengatur warna warna tidak aktif yang merupakan warna yang dimiliki tab yang saat ini tidak aktif. 15 00:00:59,180 --> 00:01:03,160 Anda dapat mengatur warna warna aktif dan itulah yang sebenarnya kami butuhkan 16 00:01:03,170 --> 00:01:08,600 di sini, Anda dapat mengatur warna latar belakang aktif dan warna latar belakang tidak aktif juga tentu 17 00:01:08,600 --> 00:01:11,720 saja juga mengubah latar belakang tab di sini jika 18 00:01:11,930 --> 00:01:16,540 Anda mau dan karenanya Anda harus banyak kemungkinan untuk menyesuaikan ini dengan kebutuhan Anda. 19 00:01:16,660 --> 00:01:20,000 Dan di sini, saya akan menetapkan warna warna aktif karena hanya 20 00:01:20,000 --> 00:01:25,910 itu yang saya butuhkan di sini tetapi tentu saja merasa bebas untuk bermain-main dengan itu dan mengubah warna latar belakang 21 00:01:25,910 --> 00:01:32,330 juga dan mengubah pengaturan lain dan saya akan mengatur warna warna aktif saya ke nilai untuk konstanta warna saya yang saya impor 22 00:01:32,330 --> 00:01:35,390 di sini, saya akan mengaturnya ke warna aksen warna. 23 00:01:35,410 --> 00:01:37,300 Anda belum pernah menggunakannya sebelumnya tetapi sekarang 24 00:01:37,370 --> 00:01:42,290 saya akan menggunakannya dan itulah warna oranye ini yang sekarang kita miliki dan inilah cara mudah kita mengubah 25 00:01:42,290 --> 00:01:45,900 warna yang dimiliki tab aktif. Nah, itu satu hal, harap 26 00:01:46,110 --> 00:01:50,280 perhatikan juga bahwa ini tentu saja tidak menambahkan ikon dan bagaimana, kita 27 00:01:50,280 --> 00:01:51,020 tidak 28 00:01:51,030 --> 00:01:57,300 mengatakan apa-apa tentang ikon yang ingin kita tambahkan. Sekarang untuk menambahkan ikon, pola yang langsung saya 29 00:01:57,480 --> 00:02:01,860 pikir adalah Anda pergi ke konfigurasi rute Anda di sini, jadi ke konfigurasi 30 00:02:01,860 --> 00:02:07,710 tempat Anda memetakan layar ke tab Anda dan Anda menggunakan formulir yang lebih panjang di mana Anda 31 00:02:07,710 --> 00:02:12,000 menambahkan properti layar dan di mana Anda kemudian juga menambahkan opsi navigasi. 32 00:02:12,000 --> 00:02:17,370 Ngomong-ngomong, Anda juga bisa melakukan ini secara langsung dalam komponen tentu saja dengan menambahkan 33 00:02:17,400 --> 00:02:19,700 opsi navigasi seperti yang kami 34 00:02:19,710 --> 00:02:25,080 lakukan sebelumnya, namun karena makanan di sini sebenarnya adalah navigator, satu-satunya tempat menambahkan opsi 35 00:02:25,110 --> 00:02:26,560 navigasi yang tentu 36 00:02:26,700 --> 00:02:31,330 saja ada di sini atau juga di sini, di buat stack navigator. 37 00:02:31,560 --> 00:02:37,290 Di sana Anda juga dapat mengatur tombol opsi navigasi di sini pada argumen kedua, pada 38 00:02:37,320 --> 00:02:42,390 objek ini Anda lulus sebagai argumen kedua untuk membuat stack navigator di mana 39 00:02:42,390 --> 00:02:48,180 Anda mengkonfigurasi keseluruhan navigator untuk memberikan navigator itu sendiri beberapa opsi navigasi karena opsi navigasi 40 00:02:48,180 --> 00:02:54,060 yang kami tetapkan untuk navigator makanan, sehingga untuk navigator tumpukan sekarang adalah opsi yang diperhitungkan 41 00:02:54,270 --> 00:03:00,810 oleh navigator tab yang menggunakan navigator makanan ini sebagai navigator bersarang dan opsi navigasi yang dapat kita 42 00:03:01,140 --> 00:03:10,680 atur di sini termasuk ikon tab bar. Kita dapat menambahkan ikon bilah tab di sini dan ikon bilah tab sebenarnya adalah fungsi. Ini bukan ikon tunggal 43 00:03:10,770 --> 00:03:18,900 yang Anda arahkan, melainkan fungsi ini. Ini adalah fungsi yang menerima beberapa informasi tab yang bisa Anda katakan, 44 00:03:18,990 --> 00:03:23,300 harus pergi ke sini, itulah argumen yang kami dapatkan secara otomatis karena 45 00:03:23,330 --> 00:03:28,490 fungsi ini tentu saja akan dipanggil oleh React navigation dan ikon bilah tab, fungsi ini 46 00:03:28,970 --> 00:03:34,340 di sini, harus mengembalikan ikon yang Anda inginkan untuk membuat tab ini, jadi dalam hal ini 47 00:03:34,340 --> 00:03:35,720 untuk tab makanan. 48 00:03:39,680 --> 00:03:46,360 Itu berarti bahwa saya harus dapat menggunakan ikon di sini dan untuk ini, kita dapat mengimpor ionikon atau set 49 00:03:46,370 --> 00:03:50,680 ikon lain yang ingin Anda gunakan dari @ expo / ikon-vektor. 50 00:03:50,680 --> 00:03:52,440 Sekali lagi, jangan ragu untuk 51 00:03:52,450 --> 00:03:57,400 menginstal paket ini, biasanya itu harus diinstal secara otomatis ketika bekerja dengan Expo tetapi Anda dapat menjalankan 52 00:03:57,400 --> 00:04:03,040 instalasi npm --simpan @ expo / vektor-ikon untuk memastikan bahwa Anda telah menginstalnya dan Anda dapat menggunakan set ikon 53 00:04:03,100 --> 00:04:07,980 apa pun Anda ingin tetapi saya selalu menggunakan ionik selama kursus ini, saya akan tetap menggunakannya. 54 00:04:08,230 --> 00:04:12,340 Dengan itu, Anda dapat menggunakan ionik sebagai komponen seperti yang Anda pelajari sebelumnya dalam kursus. 55 00:04:12,340 --> 00:04:18,580 Jadi di sini kita bisa mengembalikan ionikon seperti ini untuk membuat ikon ionikon dan sekarang Anda dapat 56 00:04:18,580 --> 00:04:20,090 menggunakan nama ikon 57 00:04:20,170 --> 00:04:24,090 yang Anda inginkan di sini dan di sini saya ingin menggunakan 58 00:04:24,100 --> 00:04:29,090 ios-restoran yang hanya merupakan ikon yang saya temukan dalam daftar ikon, daftar ini di 59 00:04:29,320 --> 00:04:32,750 sini yang juga saya tunjukkan sebelumnya, ada ikon ios-restaurant 60 00:04:32,870 --> 00:04:37,320 yang saya pilih yang sekarang saya gunakan yang saya tunjukkan di sini. 61 00:04:37,450 --> 00:04:40,120 Ini adalah ikon yang ingin saya 62 00:04:40,120 --> 00:04:42,610 render, saya akan memberikannya ukuran 63 00:04:42,610 --> 00:04:43,990 25, Anda 64 00:04:43,990 --> 00:04:46,890 dapat bereksperimen dengan itu tetapi saya menemukan 65 00:04:46,900 --> 00:04:50,200 25 terlihat cukup baik di sini di tab 66 00:04:50,350 --> 00:04:57,610 bar dan warna dan itu sekarang penting dari tabInfo. tintColor karena warna yang kita atur di sini tentu saja harus menjadi warna tint yang 67 00:04:57,610 --> 00:04:58,810 kita atur di sini. 68 00:04:58,810 --> 00:05:01,980 Sekarang tentu saja, kita bisa membuat kode ini untuk mewarnai aksen warna 69 00:05:01,990 --> 00:05:06,030 di sini, tetapi jika kita mengubahnya di sana, kita harus ingat bahwa kita juga mengubahnya di sana. 70 00:05:06,040 --> 00:05:11,440 Hal yang baik adalah dan itulah mengapa ini adalah sebuah fungsi, yang Bereaksi navigasi memanggil fungsi ini 71 00:05:11,440 --> 00:05:17,830 untuk kami dan memberi kami beberapa informasi penting tentang bagaimana bilah tab kami dikonfigurasikan dalam objek info tab itu dan bahwa 72 00:05:17,830 --> 00:05:23,350 misalnya menyertakan warna warna yang telah kami atur. , sehingga kita dapat secara dinamis mengambil ini di sini 73 00:05:23,350 --> 00:05:29,440 untuk mewarnai ikon, sehingga jika kita mengubah warna di sana untuk bilah tab, itu secara otomatis tercermin dalam ikon kita 74 00:05:29,470 --> 00:05:30,910 di sana, jadi itu 75 00:05:30,940 --> 00:05:35,810 adalah sedikit kenyamanan yang kita miliki di sini yang dapat kita gunakan di sini . 76 00:05:35,810 --> 00:05:42,740 Jadi dengan itu, saya render ikon-ikon ini untuk makanan dan untuk favorit, sekarang kita dapat menggunakan pendekatan yang serupa, gunakan formulir yang lebih panjang di mana kita 77 00:05:42,770 --> 00:05:48,200 mengatur layar di sini dan kemudian menambahkan opsi navigasi di sini yang akan digabungkan dengan navigasi apa pun opsi yang kami 78 00:05:52,430 --> 00:05:57,400 siapkan di layar favorit tetapi harap dicatat bahwa tentu saja Anda benar-benar dapat juga mengatur opsi navigasi di sini 79 00:05:57,400 --> 00:06:00,920 di komponen layar favorit tetapi untuk menyimpan semuanya di satu tempat, saya akan melakukannya 80 00:06:00,980 --> 00:06:03,620 di navigasi saya yang diatur di sini sebagai gantinya. 81 00:06:03,620 --> 00:06:06,150 Jadi ini adalah opsi navigasi saya 82 00:06:06,170 --> 00:06:11,420 untuk layar ini, sama seperti navigator ini, navigator makan, tentu saja kita dapat mengatur opsi 83 00:06:11,480 --> 00:06:14,280 navigasi untuk layar, itulah yang kami lakukan 84 00:06:14,330 --> 00:06:19,880 di seluruh modul setelah semuanya dan di sana, saya ingin melakukan dasarnya sama, jadi saya 85 00:06:19,940 --> 00:06:25,790 hanya akan menyalinnya, tambahkan di sini ke objek opsi navigasi ini dan satu-satunya hal yang berbeda di 86 00:06:25,790 --> 00:06:30,130 sini adalah ikon yang ingin saya gunakan, di sini ios-star bukan ios-restaurant. 87 00:06:30,290 --> 00:06:36,170 Dan dengan itu jika kita menyimpan ini, saya benar-benar mendapatkan kesalahan karena karena sekarang saya menggunakan 88 00:06:36,170 --> 00:06:42,230 jsx di sini, kita perlu mengimpor Bereaksi tentu saja, itulah cara Bereaksi bekerja karena jsx di belakang 89 00:06:42,260 --> 00:06:48,510 layar ditransformasikan menjadi Bereaksi membuat elemen seperti yang Anda tahu dan karena itu sekarang setelah menambahkan impor 90 00:06:48,530 --> 00:06:54,680 Bereaksi di sini di MealsNavigator. file js. Ini berfungsi dan sekarang kami memiliki ikon 91 00:06:54,680 --> 00:06:58,180 yang secara otomatis mengambil warna warna kami dan itulah cara mudah Anda menambahkan ikon. 92 00:06:58,270 --> 00:07:03,740 Sekarang selain mengatur ikon, Anda mungkin ingin mengatur label juga dan Anda akan melihat bahwa 93 00:07:03,860 --> 00:07:10,580 secara default, label, makanan, dan favorit hanyalah pengidentifikasi kami ditugaskan di sini ketika kami mengatur makanan navigasi dan 94 00:07:10,610 --> 00:07:12,050 favorit tab kami. 95 00:07:12,050 --> 00:07:17,540 Sekarang sering, itu masuk akal tetapi jika Anda ingin memiliki label yang berbeda, maka dalam opsi 96 00:07:17,630 --> 00:07:20,780 navigasi layar Anda memuat di sini ke dalam tab 97 00:07:20,780 --> 00:07:28,910 ini, Anda dapat mengatur properti label bar tab dan di sana, itu hanya string di mana Anda dapat memiliki favorit dengan tanda seru dan 98 00:07:28,910 --> 00:07:34,310 jika Anda mengatur ini, Anda akan melihat bahwa sekarang Anda memiliki favorit dengan tanda seru 99 00:07:34,310 --> 00:07:37,040 di sini, bukan hanya favorit seperti sebelumnya. 100 00:07:37,040 --> 00:07:42,500 Jadi Anda dapat mengganti label default ini yang dianggap yang biasanya adalah pengidentifikasi Anda, jika Anda 101 00:07:42,500 --> 00:07:47,510 menginginkan yang berbeda, Anda dapat menimpanya dan tentu saja, ada lebih banyak opsi yang dapat 102 00:07:47,510 --> 00:07:52,700 Anda atur dan lampirkan, Anda menemukan tautan ke dokumen resmi untuk navigator ini tempat Anda 103 00:07:52,700 --> 00:08:00,740 dapat mempelajari semua opsi yang dapat Anda atur di navigator itu sendiri tetapi juga pada opsi navigasi layar anak, jadi dari layar bersarang atau 104 00:08:00,740 --> 00:08:04,850 navigator bersarang di dalam navigator tab itu, jadi apa yang kami siapkan 105 00:08:04,850 --> 00:08:05,870 di sini.