Kami mengekstraksi kategori kami di sini di komponen kami karena kami mendapatkan parameter kami di sana dengan
bantuan alat peraga navigasi.
Sekarang sebenarnya, saya ingin menampilkan judul di header saya.
Sekarang Anda telah belajar bagaimana Anda dapat mengkonfigurasi tajuk itu dengan bantuan opsi navigasi, jadi
pada komponen layar makan kategori dan oleh karena itu, ini adalah fungsi karena itu, ini adalah sebuah objek,
kami dapat menambahkan opsi navigasi dan Anda mengetahui bahwa ini adalah Objek
Javascript tempat Anda dapat mengatur judul header dan judul header sekarang harus nama kategori saya.
Masalahnya di sini adalah bahwa di sini, kategori yang dipilih tersedia tetapi itu di dalam fungsi komponen.
Itu tentu saja di sisi lain bukanlah sesuatu yang dapat kita akses di sini karena ini terjadi
setelah definisi fungsi.
Jadi kami tidak memiliki akses ke kategori yang kami identifikasi
di sana, itu masalah.
Hal yang baik adalah, opsi navigasi dapat menjadi objek jika Anda memiliki nilai konfigurasi hardcoded statis tetapi juga
dapat berfungsi jika Anda memerlukan konfigurasi dinamis yang tergantung pada perubahan data dan tentu saja data yang
kami andalkan di sini berubah karena kami menggunakan satu dan layar yang sama
untuk berbagai kategori dan karenanya, ID dan judul kategori berubah setiap kali kita
menggunakan layar itu. Suatu kali kita menggunakannya
untuk kategori Italia, kali berikutnya kita menggunakannya untuk kategori eksotis. Fungsi ini yang juga dapat Anda gunakan, ini
tentu saja didukung oleh React navigation
dan jika ini adalah sebuah fungsi, apa yang Anda lewati untuk opsi navigasi, React navigation
akan memanggilnya untuk Anda dan akan mengirimkan beberapa data navigasi, sehingga akan mengirimkan objek dengan beberapa data yang akan membantu Anda, kami akan
melihat apa yang ada di sana dalam sedetik karena kami dapat dengan mudah mencatat data navigasi ini
di sini.
Mari kita mulai dengan itu, mari
sekarang pergi ke halaman ini dan mari kita lihat apa yang ada di sana.
Jika saya memperluas ini di sini, ini adalah log yang saya dapatkan
dan Anda lihat kami punya alat navigasi lain dalam data navigasi. Di sana kami memiliki tindakan, kami menavigasi pop, push, jadi
pada
dasarnya apa yang kami tahu. Kami juga memiliki getParam
di sana dan itu harus berguna karena ini akan memungkinkan kami untuk mengekstrak data di sini di
dalam opsi navigasi kami pada akhirnya yang seharusnya sangat membantu. Jadi pada akhirnya, kita mendapatkan prop navigasi yang sama dengan props komponen kita.
Jadi di sini, sekarang kita dapat menggunakan data navigasi. navigasi. getParam untuk mendapatkan ID kategori saya, persis
seperti yang kami lakukan dalam komponen. Jadi kita dapat mengulang kode yang kita miliki dalam komponen
dan mendapatkan kategori yang dipilih, tidak hanya dalam komponen tetapi sekarang juga dalam fungsi ini yang kita gunakan untuk mengatur opsi navigasi kita.
Jadi sekarang di sini, kami juga mendapatkan akses ke kategori yang dipilih dan sekarang, opsi navigasi, fungsi
ini, jika ini adalah fungsi, tentu saja harus mengembalikan objek dengan opsi navigasi Anda.
Jadi apa yang sebelumnya kita tetapkan secara langsung sebagai opsi navigasi ketika kita hanya memiliki nilai-nilai hardcoded sekarang harus
dikembalikan
tetapi sekarang dapat menggunakan data yang diturunkan secara dinamis ini atau informasi yang diturunkan secara dinamis di sini.
Jadi sekarang kita masih dapat mengatur judul tajuk di sini dan judul tajuk sekarang dapat
dipilihKategori. judul.
Ini adalah bagaimana kita dapat menurunkan ini secara dinamis dan oleh karena itu sekarang jika Anda kembali,
Anda melihat Italia di sini, Anda melihat cepat dan mudah di sini, Anda melihat Jerman di sini dan itu berfungsi.
Harap dicatat bahwa Anda juga secara default mendapatkan teks tombol kembali yang merupakan judul layar sebelumnya, itu
fitur lain yang diberikan navigasi React. Kita melihat kembali kategori makanan di sini karena
kita berasal dari kategori makanan. Hanya dengan cepat dan mudah di mana
ini akan terlalu lama di sebelah judul yang sedikit lebih lama ini, itu akan kembali dan default untuk kembali, yang merupakan perilaku default yang
baik yang bisa Anda timpa tetapi saya senang dengan di sini. Di Android, kami tidak memiliki teks kembali tetapi tentu
saja kami memiliki tombol kembali dan di sana, tajuk juga diisi dengan benar untuk layar yang dimuat.
Sehingga kita juga bisa mendapatkan data secara dinamis di sini di opsi navigasi. Satu masalah yang mungkin Anda perhatikan, yang paling terlihat
di sini di Android adalah bahwa tajuk pada layar baru yang kami muat tidak memiliki gaya yang sama
dengan tajuk kami di sini, tidak memiliki warna latar belakang yaitu. Sekarang tentu saja, itu mudah diperbaiki karena pada
opsi navigasi dari makanan kategori, kita bisa membawa gaya header dan warna warna header yang kita atur
di sini di layar lain juga. Jadi kita dapat menyalinnya di sini dan
itu berarti kita harus mengimpor platform API dan tentu saja, warna konstan kita, jadi impor warna dari konstanta
/ Warna seperti ini dan ketika kita melakukan itu, kita akan melihat bahwa jika kita pergi ke sana , kami sekarang memiliki gaya tajuk yang sama untuk halaman baru
ini yang tentu saja apa yang Anda inginkan. Apa yang biasanya tidak Anda inginkan adalah bahwa Anda
harus menyalin konfigurasi yang sama ke setiap layar karena di aplikasi ini, kami tidak memiliki banyak layar,
kami tentu bisa melakukan itu tetapi dalam aplikasi yang lebih besar di mana Anda
memiliki lebih banyak layar, yang akan menjadi sangat menjengkelkan dan super rumit, jadi jelas bukan cara untuk pergi ke sana.
Jadi mari kita lihat alternatif dalam kuliah berikutnya.