1 00:00:02,400 --> 00:00:06,680 Sekarang dengan tab yang ditambahkan, kami kehilangan konten di layar favorit. 2 00:00:06,740 --> 00:00:12,960 Sekarang kami belum benar-benar memiliki fungsionalitas untuk menambahkan favorit, jika kami mengklik ikon bintang itu, yang tidak melakukan apa-apa dan 3 00:00:12,960 --> 00:00:13,640 omong-omong, saya 4 00:00:13,650 --> 00:00:16,370 sadar bahwa kami juga kehilangan konten di sini, kami 5 00:00:16,380 --> 00:00:17,680 akan menambahkan ini kemudian. 6 00:00:17,880 --> 00:00:22,140 Jadi mengklik ikon bintang belum melakukan apa-apa dan kami hanya akan dapat melakukan 7 00:00:22,140 --> 00:00:23,370 itu sedikit nanti, tetap 8 00:00:23,490 --> 00:00:29,040 saya ingin mengisi layar favorit ini sedikit lebih banyak setidaknya dengan beberapa makanan dummy yang kami muat 9 00:00:29,040 --> 00:00:30,340 di sana katakanlah dan 10 00:00:30,480 --> 00:00:35,640 setidaknya dengan fungsionalitas untuk juga pergi ke MealDetailScreen di sana karena pada akhirnya, idenya di sini 11 00:00:35,640 --> 00:00:39,080 adalah bahwa kita memiliki daftar makanan di sini, sama seperti 12 00:00:39,090 --> 00:00:44,460 yang kita miliki di sini setelah kita memilih kategori dan kita dapat memanfaatkan makan untuk pergi ke 13 00:00:44,460 --> 00:00:45,620 halaman detail, sama 14 00:00:45,660 --> 00:00:50,940 seperti kita bisa melakukannya di navigator makanan, jadi di navigator tumpukan makanan saya harus mengatakan dan 15 00:00:50,940 --> 00:00:58,620 karena itu pada akhirnya, apa yang kita butuhkan untuk favorit, untuk tab favorit kita bukan layar tunggal tetapi tumpukan lain, tumpukan untuk fitur favorit 16 00:00:58,620 --> 00:00:59,330 kami 17 00:00:59,340 --> 00:01:02,750 dalam aplikasi ini, itulah yang kami butuhkan di sini, ini 18 00:01:02,760 --> 00:01:06,960 kemudian akan memberi kami tajuk yang saat ini kami juga tidak ada. 19 00:01:07,470 --> 00:01:10,020 Tentu saja, itu tidak terlalu 20 00:01:10,110 --> 00:01:18,500 sulit untuk diterapkan, kita cukup membuat navigator stack lain di atas tabScreenConfig kita mungkin dan ini akan mengatur 21 00:01:18,500 --> 00:01:21,390 navigator stack untuk stack favorit kita. 22 00:01:21,530 --> 00:01:26,630 Jadi objek yang kita lewati di sini harus mendefinisikan semua layar yang ingin kita miliki di 23 00:01:26,630 --> 00:01:30,830 tumpukan itu dan itu akan menjadi layar favorit itu sendiri dengan daftar makanan 24 00:01:30,830 --> 00:01:36,470 favorit kita dan di sana saya ingin menunjuk pada layar favorit dan kemudian saya ingin memiliki detail makanan 25 00:01:36,710 --> 00:01:42,710 dan saya akan menunjuk ke MealDetailScreen dan kami sudah menggunakan MealDetailScreen di sini di navigator makan kami, di navigator 26 00:01:42,710 --> 00:01:44,000 tumpukan kami yang lain, 27 00:01:44,030 --> 00:01:45,230 tetapi itu 28 00:01:45,230 --> 00:01:49,030 tidak masalah, Anda dapat menggunakan satu dan layar yang sama di berbagai 29 00:01:49,040 --> 00:01:51,540 navigator tumpukan, tidak ada yang salah dengan bahwa. 30 00:01:51,710 --> 00:01:58,340 Jadi kita dapat menggunakan MealDetailScreen di sini di navigator stack favorit dan sekarang saya hanya ingin memastikan 31 00:01:58,340 --> 00:02:03,550 bahwa saya juga menyalin opsi saya di sini, opsi navigasi default saya, argumen 32 00:02:03,560 --> 00:02:09,170 kedua ini sebenarnya untuk membuat stack navigator, untuk navigator makan ke favorit saya stack 33 00:02:09,170 --> 00:02:10,070 navigator juga. 34 00:02:10,070 --> 00:02:15,680 Jadi di sini sebagai argumen kedua untuk membuat stack navigator, saya salin di objek 35 00:02:15,680 --> 00:02:22,430 itu di mana saya mengatur opsi navigasi default saya sehingga untuk stack ini, saya memiliki default yang sama, 36 00:02:22,430 --> 00:02:29,330 saya memiliki gaya header yang sama dan karenanya tentu saja, kita juga bisa potong ini dari sini dan 37 00:02:29,330 --> 00:02:39,100 hapus ini dari sini dan simpan pengaturan default itu di sebuah konstanta di sini, mungkin defaultStackNavOptions kami, itulah objek ini yang mengatur gaya tajuk dan kami 38 00:02:39,330 --> 00:02:45,670 kemudian dapat menggunakan defaultStackNavOptions di sini di tumpukan navigator makan kami dan juga di sini di kami 39 00:02:45,840 --> 00:02:52,800 favorit menumpuk navigator dan saya juga akan menyimpan ini di konstanta FavNavigator, tentu saja Anda dapat memberi nama konstanta 40 00:02:52,800 --> 00:02:55,330 ini apa pun yang Anda inginkan. 41 00:02:55,410 --> 00:02:57,230 Sekarang itu FavNavigator, sehingga menciptakan 42 00:02:57,270 --> 00:03:03,890 komponen navigator tumpukan pada akhirnya yang ingin saya gunakan di tabScreenConfig saya, di sana untuk makanan kami 43 00:03:03,920 --> 00:03:09,420 sudah menggunakan stack navigator, untuk favorit saya menggunakan layar favorit dan ini sekarang 44 00:03:09,420 --> 00:03:10,720 harus berubah, 45 00:03:10,720 --> 00:03:16,620 ini sekarang harus menjadi FavNavigator, sehingga di sini kami juga menggunakan tumpukan alih-alih satu layar. 46 00:03:16,680 --> 00:03:23,220 Dan dengan itu sudah, jika kita pergi ke favorit, kita punya judul di sini, setidaknya kita memiliki header 47 00:03:23,220 --> 00:03:27,000 yang sudah membuktikan bahwa kita menggunakan stack navigator di sini. 48 00:03:27,080 --> 00:03:31,870 Sekarang tentu saja, layar tidak terlalu berguna, bukan sesuatu yang ingin saya katakan di sini, jadi 49 00:03:31,920 --> 00:03:37,500 saya ingin mengatur opsi navigasi khusus untuk layar favorit dan kita dapat menggunakannya di sini ketika kita membuat stack 50 00:03:37,560 --> 00:03:43,290 navigator favorit dengan bentuk yang lebih panjang. tempat kami mengatur layar dan opsi navigasi untuk layar itu di sini 51 00:03:43,290 --> 00:03:47,340 atau kami melakukannya langsung di komponen kami, itulah yang saya lakukan sejauh ini, 52 00:03:47,370 --> 00:03:48,570 itulah yang akan 53 00:03:48,600 --> 00:03:50,330 saya lakukan di sini juga. 54 00:03:50,340 --> 00:03:55,560 Di sana kita dapat mengatur FavoritesScreen. navigationPilihan seperti ini, gunakan objek di sini, 55 00:03:55,740 --> 00:03:57,610 kami tidak memerlukan fungsi karena 56 00:03:57,630 --> 00:04:03,900 saya tidak akan menurunkan nama secara dinamis di sini dan dalam opsi navigasi di sini, saya hanya 57 00:04:03,900 --> 00:04:11,700 akan mengatur judul header ke favorit Anda dan tentu saja, Anda dapat memilih teks apa pun yang Anda inginkan di sini dan 58 00:04:11,700 --> 00:04:12,210 jika 59 00:04:12,330 --> 00:04:17,880 kami sekarang menyimpannya, sekarang kami melihat judul khusus kami di sini yang sedikit lebih baik. 60 00:04:17,880 --> 00:04:24,090 Sekarang seperti yang saya katakan, kita belum benar-benar memiliki alat untuk menyimpan makanan sebagai favorit, itu adalah sesuatu 61 00:04:24,090 --> 00:04:26,410 yang akan kita lakukan sebentar lagi. 62 00:04:26,430 --> 00:04:29,160 Jadi untuk saat ini, saya hanya 63 00:04:29,160 --> 00:04:36,000 ingin menampilkan beberapa makanan dummy di sini, katakanlah makanan dengan ID M1 dan M2, cukup dua makanan dummy 64 00:04:36,000 --> 00:04:41,670 dan untuk itu, kita bisa pergi ke layar favorit dan bukannya menampilkan tampilan ini di 65 00:04:41,670 --> 00:04:45,000 sini, di akhirnya saya ingin menampilkan yang sama seperti 66 00:04:45,000 --> 00:04:51,480 pada layar kategori makanan, kan, saya ingin membuat FlatList yang kemudian membuat item makanan saya di sini. 67 00:04:51,480 --> 00:04:53,620 Satu-satunya perbedaan adalah makanan apa yang 68 00:04:53,640 --> 00:04:58,300 saya render, logika itu tidak akan sama karena itu berbeda untuk layar favorit saya. 69 00:04:58,320 --> 00:05:03,480 Namun ini akan sama dan karena saya akan menggunakan kembali logika pembuatan daftar dan 70 00:05:03,480 --> 00:05:09,570 satu-satunya hal yang berbeda adalah data yang saya render, masuk akal untuk meng-outsource daftar ini menjadi komponen yang 71 00:05:09,750 --> 00:05:15,140 terpisah, sehingga kita dapat menggunakan kembali komponen dalam layar makanan kategori dan di layar favorit. 72 00:05:15,180 --> 00:05:20,970 Jadi di folder komponen, saya akan menambahkan MealList. File js dan di sana, saya ingin 73 00:05:21,000 --> 00:05:30,210 memiliki komponen Bereaksi, jadi impor Bereaksi dari Bereaksi dan kita juga perlu mengimpor FlatList dari reaksi-asli dan kita juga perlu mengimpor stylesheet dari asli-reaksi tentu 74 00:05:30,210 --> 00:05:34,470 saja dan kemudian di sini , kita dapat membuat komponen daftar 75 00:05:34,470 --> 00:05:42,500 makan kita di mana kita mendapatkan alat peraga dan kita mengekspornya sebagai default setelahnya, kita juga akan memerlukan beberapa gaya sehingga 76 00:05:42,500 --> 00:05:43,180 kita 77 00:05:43,190 --> 00:05:49,940 sudah dapat menambahkan stylesheet buat di sini seperti ini dan sekarang saya ingin pindah dari logika daftar saya 78 00:05:49,940 --> 00:05:56,690 dari kategori screen makan ke dalam komponen baru ini. Jadi saya akan memotong seluruh kode JSX 79 00:05:56,930 --> 00:06:04,640 ini yang saya kembalikan ke sini dalam kategori makanan layar dan memindahkannya di sini dan mengembalikannya dalam 80 00:06:04,910 --> 00:06:06,380 komponen daftar makanan. 81 00:06:06,380 --> 00:06:08,720 Jadi sekarang di sini, saya akan mengembalikan pandangan 82 00:06:08,720 --> 00:06:16,000 itu dan karena itu kita juga perlu mengimpor pandangan di sini tentu saja. Itu juga berarti kita harus membawa tampilan, jadi di sini gaya 83 00:06:16,000 --> 00:06:21,340 layar ini juga dapat dipotong dari makanan kategori dan oleh karena itu di sini, kita tidak 84 00:06:21,340 --> 00:06:22,370 perlu stylesheet 85 00:06:22,480 --> 00:06:24,700 lagi, kita dapat menyingkirkan impor stylesheet 86 00:06:24,700 --> 00:06:29,650 juga, kita sebenarnya dapat singkirkan semua impor Asli Bereaksi karena kami tidak memiliki komponen khusus 87 00:06:29,680 --> 00:06:37,000 Bereaksi Asli lagi di sini dan alih-alih pindahkan ke daftar makanan. Jadi di sana di stylesheet, saya dapat menambahkan layar ini yang 88 00:06:37,000 --> 00:06:42,540 baru saja saya hapus dan nama yang lebih cocok karena itu mungkin adalah daftar, jadi saya akan mengganti 89 00:06:42,610 --> 00:06:47,590 nama ini, secara teknis Anda tidak perlu mengganti nama tetapi masuk akal karena ini sekarang 90 00:06:47,590 --> 00:06:52,570 bukan komponen layar lagi, itu hanya membuat daftar yang kemudian menjadi satu-satunya bagian di layar 91 00:06:52,570 --> 00:06:56,590 kita tapi itu cerita yang berbeda. Jadi saya hanya akan memberi nama daftar ini, punya FlatList saya di sana. 92 00:06:57,960 --> 00:07:02,240 Sekarang tentu saja, menampilkan makanan yang ingin saya render, itu tidak akan berfungsi lagi, alih-alih saya 93 00:07:02,240 --> 00:07:09,170 hanya berharap untuk mendapatkan beberapa data dari alat peraga saya di sini, mungkin beri nama daftar data, Anda dapat memilih nama yang Anda inginkan di 94 00:07:09,170 --> 00:07:15,380 sini tentu saja dan render item makanan, itu juga hilang. Untuk itu dalam kategori makanan, kita 95 00:07:16,190 --> 00:07:17,030 dapat 96 00:07:17,040 --> 00:07:20,570 memotong item makanan render ini di sini, memotongnya 97 00:07:20,570 --> 00:07:25,250 dari layar kategori makanan dan memindahkannya ke daftar makanan kita juga. 98 00:07:25,250 --> 00:07:27,240 Jadi di dalam komponen 99 00:07:27,290 --> 00:07:33,890 daftar makanan, saya akan menambahkan konstanta ini yang menyimpan fungsi item makanan render ini yang memiliki semua 100 00:07:34,160 --> 00:07:37,650 yang diperlukan untuk bekerja kecuali satu hal, impor item 101 00:07:37,760 --> 00:07:49,160 makanan tidak ada, jadi kita perlu mengimpor item makanan dari. / MealItem, jadi dari komponen item makanan. Satu hal lagi akan hilang di sini di komponen daftar 102 00:07:49,160 --> 00:07:51,470 makanan juga dan itu akan menjadi 103 00:07:51,470 --> 00:07:56,300 prop navigasi karena seperti yang saya sebutkan, prop navigasi hanya tersedia dalam 104 00:07:56,300 --> 00:08:02,390 komponen yang dimuat dengan bantuan navigator dengan React navigation dan hanya dalam hal itu komponen, 105 00:08:02,420 --> 00:08:04,100 bukan komponen bersarang. 106 00:08:04,100 --> 00:08:09,620 Jadi masalahnya adalah makanan kategori adalah komponen yang kita muat dengan bantuan navigator dan jika kita kemudian menggunakan 107 00:08:09,620 --> 00:08:12,630 daftar makanan di sana yang akan kita lakukan dalam 108 00:08:12,690 --> 00:08:18,920 hitungan detik, daftar makanan tidak akan memiliki akses ke navigasi alat peraga, hanya komponen yang langsung dimuat memiliki akses tetapi 109 00:08:19,400 --> 00:08:21,790 itu akan menjadi masalah yang mudah dipecahkan. 110 00:08:21,890 --> 00:08:30,530 Namun pertama-tama, mari kita impor daftar makanan di sini dari komponen daftar makanan dan mari kita kembali daftar makanan di sini 111 00:08:30,650 --> 00:08:38,690 dalam komponen makanan kategori dan sekarang daftar makanan tentu saja memerlukan daftar data yang kami kerjakan, jadi mari kita masukkan 112 00:08:38,690 --> 00:08:39,920 data daftar dan 113 00:08:39,920 --> 00:08:46,900 itu seharusnya hanya menunjuk pada array yang ingin kita render yang dalam hal ini ditampilkan makanan dan 114 00:08:46,900 --> 00:08:48,130 sekarang seperti yang 115 00:08:48,140 --> 00:08:53,110 saya sebutkan, kita akan memiliki masalah dengan prop navigasi, yah kita bisa 116 00:08:53,260 --> 00:09:00,760 meneruskan saja, kita bisa menggunakan navigasi, tambahkan seperti prop di sini untuk daftar makanan dan meneruskan navigasi alat 117 00:09:00,790 --> 00:09:01,960 peraga, 118 00:09:01,960 --> 00:09:06,170 yaitu betapa mudahnya kita dapat meneruskan ini ke daftar makanan. 119 00:09:06,200 --> 00:09:11,660 Jadi sekarang dalam daftar makanan, dalam komponen itu, kita akan memiliki prop navigasi lagi karena 120 00:09:11,660 --> 00:09:16,940 kita meneruskannya, kita menambahkan prop navigasi kita sendiri dan kita menunjuk pada data yang kita 121 00:09:16,940 --> 00:09:18,810 dapatkan pada prop navigasi yang 122 00:09:18,890 --> 00:09:20,480 disediakan oleh React 123 00:09:20,540 --> 00:09:26,850 navigasi, itulah bagaimana kita memiliki akses ke sana lagi di sini dan dengan itu, kita harus memiliki pengaturan 124 00:09:27,240 --> 00:09:33,570 yang berfungsi, sehingga seharusnya menjadi layar makanan kategori kita. Mari kita simpan dan abaikan layar favorit untuk 125 00:09:33,570 --> 00:09:40,110 saat ini dan lihat saja bahwa navigator tumpukan kami di sini masih berfungsi dan sepertinya melakukan itu, 126 00:09:40,160 --> 00:09:48,820 jika saya mengujinya, itu pasti masih berfungsi di sini seperti sebelumnya. Sekarang mari kita pastikan kita juga menggunakan ini 127 00:09:48,820 --> 00:09:50,620 di layar favorit. 128 00:09:50,620 --> 00:09:55,320 Jadi di sini di layar favorit, kita tidak perlu mengimpor apa pun dari 129 00:09:55,330 --> 00:10:01,270 React Native, alih-alih kita hanya perlu mengimpor komponen daftar makanan yang baru saja kita buat dari komponen 130 00:10:01,600 --> 00:10:06,670 dan kemudian daftar makanan dan cukup kembali daftar makanan dan sekarang perbedaan pada kategori 131 00:10:06,730 --> 00:10:11,500 layar makan di mana kita juga mengembalikan daftar makanan tentu saja data yang ingin 132 00:10:11,510 --> 00:10:12,150 kita 133 00:10:12,190 --> 00:10:14,410 render, logika untuk memperoleh data itu, 134 00:10:14,410 --> 00:10:15,880 itulah perbedaan dan perbedaan 135 00:10:15,880 --> 00:10:20,250 lain antara komponen tentu saja pengaturan opsi navigasi kita dan judul header 136 00:10:20,260 --> 00:10:21,450 yang kita atur. 137 00:10:22,030 --> 00:10:26,680 Kita dapat menyingkirkan stylesheet di sini, kita tidak perlu itu lagi di sini di 138 00:10:26,680 --> 00:10:27,820 layar favorit 139 00:10:27,970 --> 00:10:30,010 dan sekarang data yang ingin saya 140 00:10:30,100 --> 00:10:31,960 render, itu tergantung pada makanan 141 00:10:34,440 --> 00:10:42,060 saya, jadi saya akan mengimpor makanan dari, sekarang dari data-dummy . File js dan seperti yang saya sebutkan, di sini karena kita tidak 142 00:10:42,080 --> 00:10:47,120 memiliki cara nyata untuk mengatur favorit, saya hanya akan menggunakan beberapa dummy favorit yang saya buat. 143 00:10:47,160 --> 00:10:55,710 Jadi di sini, makanan favorit saya, yang bisa menjadi susunan makanan saya dan di sana saya ingin memfilter untuk dua makanan tertentu, jadi saya 144 00:10:55,860 --> 00:10:57,500 akan melihat setiap makan 145 00:10:57,540 --> 00:11:05,510 tunggal tetapi saya hanya mengembalikan true jika makan. id sama dengan M1 atau jika makan. id sama dengan M2 dan itu tentu 146 00:11:05,520 --> 00:11:09,480 saja hanya beberapa logika dummy sehingga kami memiliki sesuatu di sini, 147 00:11:09,600 --> 00:11:15,330 kami akan menggantinya nanti setelah kami benar-benar tahu cara mengelola negara kami dan cara mengelola 148 00:11:15,330 --> 00:11:17,580 favorit yang saat ini ditetapkan. 149 00:11:17,610 --> 00:11:23,730 Sekarang untuk daftar makanan, ke komponen kami di sini, kami dapat 150 00:11:23,820 --> 00:11:36,840 meneruskan prop data daftar lagi yang kami butuhkan di sana, sehingga kami dapat meneruskan data daftar dan mengatur ini sama dengan makanan favorit, begitu saja. 151 00:11:36,850 --> 00:11:38,980 Jadi sekarang kita harus memiliki beberapa 152 00:11:39,010 --> 00:11:40,990 favorit juga dan kita 153 00:11:40,990 --> 00:11:47,440 lakukan, kita punya dua favorit, namun jika saya klik di atasnya, kita mendapatkan undefined bukan objek di mana 154 00:11:48,670 --> 00:11:54,520 kita mencoba memanggil navigasi navigasi alat peraga dan ya, masalahnya tentu saja adalah bahwa di daftar makanan, 155 00:11:54,550 --> 00:11:59,560 seperti yang saya sebutkan, kami menggunakan prop navigasi dan itu hanya tersedia di komponen 156 00:11:59,590 --> 00:12:05,440 yang langsung dimuat melalui navigator, jadi dalam hal ini adalah layar favorit dan dalam kategori makanan, kami 157 00:12:05,440 --> 00:12:11,080 menyelesaikan ini dengan meneruskan navigasi prop, tentu saja kita perlu melakukan hal yang sama di sini 158 00:12:11,080 --> 00:12:17,170 untuk layar favorit kita, jadi kita perlu menyediakan prop navigasi di sini pada daftar makanan dan meneruskan 159 00:12:17,170 --> 00:12:22,800 props navigasi sehingga prop navigasi dengan metode navigasi tersedia dalam komponen daftar makanan demikian juga. 160 00:12:22,870 --> 00:12:29,940 Nah dengan itu, jika kita pergi ke favorit, kita memang bisa pergi ke layar detail. 161 00:12:30,130 --> 00:12:37,690 Jadi ini berhasil, itu lumayan, cukup bagus. Seperti yang Anda lihat, kedua navigator tumpukan ini juga bekerja secara independen satu sama lain, 162 00:12:37,720 --> 00:12:38,700 kita dapat berada 163 00:12:38,700 --> 00:12:44,200 di layar detail di kedua tumpukan secara terpisah, di sini saya berada di layar detail salmon di tab makanan dan saya 164 00:12:44,470 --> 00:12:50,410 dapat pergi ke roti panggang hawaii layar detail di tab favorit. Kita bisa kembali ke sini di tab makanan 165 00:12:50,530 --> 00:12:54,840 dan saya masih di halaman detail roti panggang hawaii di sini di tumpukan favorit. 166 00:12:54,940 --> 00:12:57,670 Jadi kedua tumpukan ini bekerja terpisah satu sama lain, 167 00:12:57,700 --> 00:13:00,350 benar-benar independen dan begitulah seharusnya dan ini adalah bagaimana 168 00:13:00,610 --> 00:13:06,130 kita dapat menggunakan kembali beberapa logika dan bagaimana kita dapat memiliki tumpukan yang berbeda digabung menjadi satu dan 169 00:13:06,130 --> 00:13:07,760 navigator tab yang sama 170 00:13:07,810 --> 00:13:11,900 dan meskipun beberapa logika masih hilang , logika untuk benar-benar menambahkan favorit, ini adalah 171 00:13:11,950 --> 00:13:17,620 langkah maju yang besar dan mudah-mudahan menunjukkan kepada Anda kekuatan Bereaksi navigasi dan cara mengatur pola navigasi umum ini 172 00:13:17,620 --> 00:13:24,490 di mana Anda memiliki tab dan kemudian tumpukan bersarang yang berbeda. Satu pola navigasi hilang yang ingin saya tunjukkan 173 00:13:24,490 --> 00:13:25,920 dan itu adalah 174 00:13:26,080 --> 00:13:27,210 laci samping.