Sekarang dengan tab yang ditambahkan, kami kehilangan konten di layar favorit.
Sekarang kami belum benar-benar memiliki fungsionalitas untuk menambahkan favorit, jika kami mengklik ikon bintang itu, yang tidak melakukan apa-apa dan
omong-omong, saya
sadar bahwa kami juga kehilangan konten di sini, kami
akan menambahkan ini kemudian.
Jadi mengklik ikon bintang belum melakukan apa-apa dan kami hanya akan dapat melakukan
itu sedikit nanti, tetap
saya ingin mengisi layar favorit ini sedikit lebih banyak setidaknya dengan beberapa makanan dummy yang kami muat
di sana katakanlah dan
setidaknya dengan fungsionalitas untuk juga pergi ke MealDetailScreen di sana karena pada akhirnya, idenya di sini
adalah bahwa kita memiliki daftar makanan di sini, sama seperti
yang kita miliki di sini setelah kita memilih kategori dan kita dapat memanfaatkan makan untuk pergi ke
halaman detail, sama
seperti kita bisa melakukannya di navigator makanan, jadi di navigator tumpukan makanan saya harus mengatakan dan
karena itu pada akhirnya, apa yang kita butuhkan untuk favorit, untuk tab favorit kita bukan layar tunggal tetapi tumpukan lain, tumpukan untuk fitur favorit
kami
dalam aplikasi ini, itulah yang kami butuhkan di sini, ini
kemudian akan memberi kami tajuk yang saat ini kami juga tidak ada.
Tentu saja, itu tidak terlalu
sulit untuk diterapkan, kita cukup membuat navigator stack lain di atas tabScreenConfig kita mungkin dan ini akan mengatur
navigator stack untuk stack favorit kita.
Jadi objek yang kita lewati di sini harus mendefinisikan semua layar yang ingin kita miliki di
tumpukan itu dan itu akan menjadi layar favorit itu sendiri dengan daftar makanan
favorit kita dan di sana saya ingin menunjuk pada layar favorit dan kemudian saya ingin memiliki detail makanan
dan saya akan menunjuk ke MealDetailScreen dan kami sudah menggunakan MealDetailScreen di sini di navigator makan kami, di navigator
tumpukan kami yang lain,
tetapi itu
tidak masalah, Anda dapat menggunakan satu dan layar yang sama di berbagai
navigator tumpukan, tidak ada yang salah dengan bahwa.
Jadi kita dapat menggunakan MealDetailScreen di sini di navigator stack favorit dan sekarang saya hanya ingin memastikan
bahwa saya juga menyalin opsi saya di sini, opsi navigasi default saya, argumen
kedua ini sebenarnya untuk membuat stack navigator, untuk navigator makan ke favorit saya stack
navigator juga.
Jadi di sini sebagai argumen kedua untuk membuat stack navigator, saya salin di objek
itu di mana saya mengatur opsi navigasi default saya sehingga untuk stack ini, saya memiliki default yang sama,
saya memiliki gaya header yang sama dan karenanya tentu saja, kita juga bisa potong ini dari sini dan
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
kemudian dapat menggunakan defaultStackNavOptions di sini di tumpukan navigator makan kami dan juga di sini di kami
favorit menumpuk navigator dan saya juga akan menyimpan ini di konstanta FavNavigator, tentu saja Anda dapat memberi nama konstanta
ini apa pun yang Anda inginkan.
Sekarang itu FavNavigator, sehingga menciptakan
komponen navigator tumpukan pada akhirnya yang ingin saya gunakan di tabScreenConfig saya, di sana untuk makanan kami
sudah menggunakan stack navigator, untuk favorit saya menggunakan layar favorit dan ini sekarang
harus berubah,
ini sekarang harus menjadi FavNavigator, sehingga di sini kami juga menggunakan tumpukan alih-alih satu layar.
Dan dengan itu sudah, jika kita pergi ke favorit, kita punya judul di sini, setidaknya kita memiliki header
yang sudah membuktikan bahwa kita menggunakan stack navigator di sini.
Sekarang tentu saja, layar tidak terlalu berguna, bukan sesuatu yang ingin saya katakan di sini, jadi
saya ingin mengatur opsi navigasi khusus untuk layar favorit dan kita dapat menggunakannya di sini ketika kita membuat stack
navigator favorit dengan bentuk yang lebih panjang. tempat kami mengatur layar dan opsi navigasi untuk layar itu di sini
atau kami melakukannya langsung di komponen kami, itulah yang saya lakukan sejauh ini,
itulah yang akan
saya lakukan di sini juga.
Di sana kita dapat mengatur FavoritesScreen. navigationPilihan seperti ini, gunakan objek di sini,
kami tidak memerlukan fungsi karena
saya tidak akan menurunkan nama secara dinamis di sini dan dalam opsi navigasi di sini, saya hanya
akan mengatur judul header ke favorit Anda dan tentu saja, Anda dapat memilih teks apa pun yang Anda inginkan di sini dan
jika
kami sekarang menyimpannya, sekarang kami melihat judul khusus kami di sini yang sedikit lebih baik.
Sekarang seperti yang saya katakan, kita belum benar-benar memiliki alat untuk menyimpan makanan sebagai favorit, itu adalah sesuatu
yang akan kita lakukan sebentar lagi.
Jadi untuk saat ini, saya hanya
ingin menampilkan beberapa makanan dummy di sini, katakanlah makanan dengan ID M1 dan M2, cukup dua makanan dummy
dan untuk itu, kita bisa pergi ke layar favorit dan bukannya menampilkan tampilan ini di
sini, di akhirnya saya ingin menampilkan yang sama seperti
pada layar kategori makanan, kan, saya ingin membuat FlatList yang kemudian membuat item makanan saya di sini.
Satu-satunya perbedaan adalah makanan apa yang
saya render, logika itu tidak akan sama karena itu berbeda untuk layar favorit saya.
Namun ini akan sama dan karena saya akan menggunakan kembali logika pembuatan daftar dan
satu-satunya hal yang berbeda adalah data yang saya render, masuk akal untuk meng-outsource daftar ini menjadi komponen yang
terpisah, sehingga kita dapat menggunakan kembali komponen dalam layar makanan kategori dan di layar favorit.
Jadi di folder komponen, saya akan menambahkan MealList. File js dan di sana, saya ingin
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
saja dan kemudian di sini , kita dapat membuat komponen daftar
makan kita di mana kita mendapatkan alat peraga dan kita mengekspornya sebagai default setelahnya, kita juga akan memerlukan beberapa gaya sehingga
kita
sudah dapat menambahkan stylesheet buat di sini seperti ini dan sekarang saya ingin pindah dari logika daftar saya
dari kategori screen makan ke dalam komponen baru ini. Jadi saya akan memotong seluruh kode JSX
ini yang saya kembalikan ke sini dalam kategori makanan layar dan memindahkannya di sini dan mengembalikannya dalam
komponen daftar makanan.
Jadi sekarang di sini, saya akan mengembalikan pandangan
itu dan karena itu kita juga perlu mengimpor pandangan di sini tentu saja. Itu juga berarti kita harus membawa tampilan, jadi di sini gaya
layar ini juga dapat dipotong dari makanan kategori dan oleh karena itu di sini, kita tidak
perlu stylesheet
lagi, kita dapat menyingkirkan impor stylesheet
juga, kita sebenarnya dapat singkirkan semua impor Asli Bereaksi karena kami tidak memiliki komponen khusus
Bereaksi Asli lagi di sini dan alih-alih pindahkan ke daftar makanan. Jadi di sana di stylesheet, saya dapat menambahkan layar ini yang
baru saja saya hapus dan nama yang lebih cocok karena itu mungkin adalah daftar, jadi saya akan mengganti
nama ini, secara teknis Anda tidak perlu mengganti nama tetapi masuk akal karena ini sekarang
bukan komponen layar lagi, itu hanya membuat daftar yang kemudian menjadi satu-satunya bagian di layar
kita tapi itu cerita yang berbeda. Jadi saya hanya akan memberi nama daftar ini, punya FlatList saya di sana.
Sekarang tentu saja, menampilkan makanan yang ingin saya render, itu tidak akan berfungsi lagi, alih-alih saya
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
sini tentu saja dan render item makanan, itu juga hilang. Untuk itu dalam kategori makanan, kita
dapat
memotong item makanan render ini di sini, memotongnya
dari layar kategori makanan dan memindahkannya ke daftar makanan kita juga.
Jadi di dalam komponen
daftar makanan, saya akan menambahkan konstanta ini yang menyimpan fungsi item makanan render ini yang memiliki semua
yang diperlukan untuk bekerja kecuali satu hal, impor item
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
makanan juga dan itu akan menjadi
prop navigasi karena seperti yang saya sebutkan, prop navigasi hanya tersedia dalam
komponen yang dimuat dengan bantuan navigator dengan React navigation dan hanya dalam hal itu komponen,
bukan komponen bersarang.
Jadi masalahnya adalah makanan kategori adalah komponen yang kita muat dengan bantuan navigator dan jika kita kemudian menggunakan
daftar makanan di sana yang akan kita lakukan dalam
hitungan detik, daftar makanan tidak akan memiliki akses ke navigasi alat peraga, hanya komponen yang langsung dimuat memiliki akses tetapi
itu akan menjadi masalah yang mudah dipecahkan.
Namun pertama-tama, mari kita impor daftar makanan di sini dari komponen daftar makanan dan mari kita kembali daftar makanan di sini
dalam komponen makanan kategori dan sekarang daftar makanan tentu saja memerlukan daftar data yang kami kerjakan, jadi mari kita masukkan
data daftar dan
itu seharusnya hanya menunjuk pada array yang ingin kita render yang dalam hal ini ditampilkan makanan dan
sekarang seperti yang
saya sebutkan, kita akan memiliki masalah dengan prop navigasi, yah kita bisa
meneruskan saja, kita bisa menggunakan navigasi, tambahkan seperti prop di sini untuk daftar makanan dan meneruskan navigasi alat
peraga,
yaitu betapa mudahnya kita dapat meneruskan ini ke daftar makanan.
Jadi sekarang dalam daftar makanan, dalam komponen itu, kita akan memiliki prop navigasi lagi karena
kita meneruskannya, kita menambahkan prop navigasi kita sendiri dan kita menunjuk pada data yang kita
dapatkan pada prop navigasi yang
disediakan oleh React
navigasi, itulah bagaimana kita memiliki akses ke sana lagi di sini dan dengan itu, kita harus memiliki pengaturan
yang berfungsi, sehingga seharusnya menjadi layar makanan kategori kita. Mari kita simpan dan abaikan layar favorit untuk
saat ini dan lihat saja bahwa navigator tumpukan kami di sini masih berfungsi dan sepertinya melakukan itu,
jika saya mengujinya, itu pasti masih berfungsi di sini seperti sebelumnya. Sekarang mari kita pastikan kita juga menggunakan ini
di layar favorit.
Jadi di sini di layar favorit, kita tidak perlu mengimpor apa pun dari
React Native, alih-alih kita hanya perlu mengimpor komponen daftar makanan yang baru saja kita buat dari komponen
dan kemudian daftar makanan dan cukup kembali daftar makanan dan sekarang perbedaan pada kategori
layar makan di mana kita juga mengembalikan daftar makanan tentu saja data yang ingin
kita
render, logika untuk memperoleh data itu,
itulah perbedaan dan perbedaan
lain antara komponen tentu saja pengaturan opsi navigasi kita dan judul header
yang kita atur.
Kita dapat menyingkirkan stylesheet di sini, kita tidak perlu itu lagi di sini di
layar favorit
dan sekarang data yang ingin saya
render, itu tergantung pada makanan
saya, jadi saya akan mengimpor makanan dari, sekarang dari data-dummy . File js dan seperti yang saya sebutkan, di sini karena kita tidak
memiliki cara nyata untuk mengatur favorit, saya hanya akan menggunakan beberapa dummy favorit yang saya buat.
Jadi di sini, makanan favorit saya, yang bisa menjadi susunan makanan saya dan di sana saya ingin memfilter untuk dua makanan tertentu, jadi saya
akan melihat setiap makan
tunggal tetapi saya hanya mengembalikan true jika makan. id sama dengan M1 atau jika makan. id sama dengan M2 dan itu tentu
saja hanya beberapa logika dummy sehingga kami memiliki sesuatu di sini,
kami akan menggantinya nanti setelah kami benar-benar tahu cara mengelola negara kami dan cara mengelola
favorit yang saat ini ditetapkan.
Sekarang untuk daftar makanan, ke komponen kami di sini, kami dapat
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.
Jadi sekarang kita harus memiliki beberapa
favorit juga dan kita
lakukan, kita punya dua favorit, namun jika saya klik di atasnya, kita mendapatkan undefined bukan objek di mana
kita mencoba memanggil navigasi navigasi alat peraga dan ya, masalahnya tentu saja adalah bahwa di daftar makanan,
seperti yang saya sebutkan, kami menggunakan prop navigasi dan itu hanya tersedia di komponen
yang langsung dimuat melalui navigator, jadi dalam hal ini adalah layar favorit dan dalam kategori makanan, kami
menyelesaikan ini dengan meneruskan navigasi prop, tentu saja kita perlu melakukan hal yang sama di sini
untuk layar favorit kita, jadi kita perlu menyediakan prop navigasi di sini pada daftar makanan dan meneruskan
props navigasi sehingga prop navigasi dengan metode navigasi tersedia dalam komponen daftar makanan demikian juga.
Nah dengan itu, jika kita pergi ke favorit, kita memang bisa pergi ke layar detail.
Jadi ini berhasil, itu lumayan, cukup bagus. Seperti yang Anda lihat, kedua navigator tumpukan ini juga bekerja secara independen satu sama lain,
kita dapat berada
di layar detail di kedua tumpukan secara terpisah, di sini saya berada di layar detail salmon di tab makanan dan saya
dapat pergi ke roti panggang hawaii layar detail di tab favorit. Kita bisa kembali ke sini di tab makanan
dan saya masih di halaman detail roti panggang hawaii di sini di tumpukan favorit.
Jadi kedua tumpukan ini bekerja terpisah satu sama lain,
benar-benar independen dan begitulah seharusnya dan ini adalah bagaimana
kita dapat menggunakan kembali beberapa logika dan bagaimana kita dapat memiliki tumpukan yang berbeda digabung menjadi satu dan
navigator tab yang sama
dan meskipun beberapa logika masih hilang , logika untuk benar-benar menambahkan favorit, ini adalah
langkah maju yang besar dan mudah-mudahan menunjukkan kepada Anda kekuatan Bereaksi navigasi dan cara mengatur pola navigasi umum ini
di mana Anda memiliki tab dan kemudian tumpukan bersarang yang berbeda. Satu pola navigasi hilang yang ingin saya tunjukkan
dan itu adalah
laci samping.