Sekarang Anda tahu bagaimana kita bisa pergi ke halaman detail tentu saja, itu adalah
sesuatu yang kami lakukan sebelumnya ketika kami pergi dari halaman kategori ke halaman makanan kategori. Jadi kita dapat menggunakan pendekatan yang sama di
sini dan tentu
saja merasa bebas untuk menghentikan video pada saat ini dan melakukannya sendiri,
itu benar-benar sesuatu yang dapat Anda lakukan di sini sebagai latihan. Mari kita tentu saja juga melakukannya bersama.
Jadi pada layar kategori makanan, ketika kita memilih makanan, di
Seleksi di sini, sehingga harus diaktifkan pada makanan tertentu dan
karena itu
di layar kategori makanan, dalam fungsi ini di
sini, kita dapat menavigasi. Sekarang karena saya mendefinisikan fungsi render meal ini di
mana saya render item makan saya di dalam komponen saya, saya memiliki akses ke alat peraga dan di sana, karena
layar makanan kategori adalah komponen yang kami muat dengan bantuan navigasi, saya dapat mengakses properti navigasi dan metode navigasi dan Anda mengetahui
bahwa di sana, kami sekarang dapat melewati nama rute di mana kami ingin pergi dan itu akan menjadi detail
makanan, sehingga nama rute yang kami atur di navigator makanan, nama ini di sini, ini akan memuat halaman detail makanan.
Sekarang kita perlu meneruskan beberapa data di sana dan data yang ingin saya teruskan di sini tentu saja adalah
ID dari makanan yang dipilih, sehingga kita dapat memuat rincian makanan itu pada halaman detail makanan untuk
membuat mereka di sana.
Jadi pada layar kategori makanan di sini, kita dapat mengatur params di sini pada objek navigasi kita, pada objek yang kita lewati untuk menavigasi dan params
mengambil objek pasangan nilai-kunci saat Anda pelajari, itu adalah sesuatu yang kami lakukan sebelum dan
di sini, saya ingin untuk meneruskan makan saya. id yang tentu saja bisa saya dapatkan
dari data item karena itemData. item adalah makanan dan setiap makanan seperti yang Anda lihat dalam model memiliki ID, kami menyimpannya di sini.
Karenanya di sini tentu saja kita bisa mengatakan itemData. barang. id, itu yang ingin saya teruskan dan
dengan itu, kita harus pergi ke halaman detail makanan dan di sana, kita juga akan dapat mengekstraksi ID makanan yang
kita muat.
Jadi pada MealDetailScreen, mari kita lihat apakah itu berhasil, makan. id adalah alat peraga. navigasi. getParam dan
sekarang namanya adalah makanan. id, itu nama param yang saya pilih di sini untuk menyimpan
param, jika Anda memilih nama yang berbeda di sini, Anda harus memilih nama
yang berbeda di sini atau menggunakan nama yang sama di sana tentu saja dan sekarang kita dapat memilih makanan, untuk itu mari kita
impor semua makanan dari file data dummy di folder data, seperti ini dan sekarang makanan yang dipilih di sini tentu saja adalah makanan yang ditemukan dan kemudian kita menjalankan fungsi ini pada setiap makanan di sana dan
itu adalah makanan tempat makan. id cocok dengan makanan. id kita ekstrak
di sana, itu makanan pilihan kami. Untuk membuktikan bahwa ini berfungsi, kita dapat menampilkannya di sana, terpilihMeal. judul dan tentu saja saya
juga ingin mengatur judul di header dan itu juga sesuatu yang Anda pelajari.
Anda dapat melakukan ini dengan menambahkan opsi navigasi ke layar ini di sini, opsi navigasi dan Anda
mengetahui bahwa jika Anda ingin mengambil sesuatu yang dinamis, Anda melakukan ini dengan bantuan fungsi khusus ini di sini.
Data navigasi adalah apa yang Anda dapatkan di sana, fungsi ini dipanggil untuk Anda dengan React navigation seperti yang Anda
pelajari dan sekarang di sana, kami harus mengembalikan objek navigasi kami, objek opsi navigasi kami tetapi sebelum kami mengembalikan ini, kami dapat menggunakan data yang
kami dapatkan dari data navigasi, seperti prop navigasi kami yang pada gilirannya memungkinkan kami untuk mendapatkan akses
ke param, sehingga kami dapat menggunakan navigationData. navigasi. getParam untuk mendapatkan makanan kami. id di sini juga dan juga mengambil
makanan kami seperti yang kami lakukan di sana dalam komponen, melakukan hal
yang sama di sana untuk opsi navigasi dan dengan makanan yang dipilih, kita tentu saja
dapat mengatur judul header untuk selectedMeal. judul dan itu adalah sesuatu yang kami lakukan sebelumnya,
ini adalah bagaimana kami dapat mengekstraksi data di sini di opsi navigasi kami dan menggunakan data dinamis di sana
misalnya untuk mengatur judul header.
Dengan ini, mari
kita lihat apakah itu berfungsi, mungkin di Android. Mari kita beralih ke cahaya dan indah, di sana kita memiliki semua resep kita, mari kita
pergi ke salad di sini dan ini dia, ini judul kami, kami juga melihatnya di sini jadi ini
semua dimuat, jika kita pergi ke salmon, kita malah melihat bahwa.
Jadi ini semua berfungsi sebagaimana mestinya, sangat menyenangkan
untuk dilihat, sekarang
saatnya untuk mengambil langkah berikutnya karena misalnya, kami ingin dapat menandai makanan sebagai favorit dan untuk
ini, saya ingin memiliki ikon bintang di sini di navigasi yang bisa saya tekan.
Itu adalah sesuatu yang belum kita temukan dan belum kita pelajari,
jadi ini langkah bagus selanjutnya.