Nah untuk mencapai layar kita yang lain, kita perlu sesuatu yang bisa kita klik, yang bisa kita ketuk.
Nanti kita akan memiliki kisi-kisi kategori di sini dan kita akan mengerjakan ini dalam modul
ini juga, tetapi hanya untuk memulai dengan navigasi, saya akan menambahkan tombol,
jadi pada layar kategori di mana saya memiliki teks ini, saya ingin menambahkan tombol yang dapat saya ketuk untuk
pergi ke layar makanan kategori.
Jadi di sini, saya akan menambahkan tombol Bereaksi Asli, yang bawaan dan menetapkan judul pergi ke makanan dan ketika kita
menekan tombol ini, saya ingin memicu fungsi yang sebenarnya membawa saya ke layar
kategori makanan.
Sekarang kita mengatur layar makanan kategori
di sini, tetapi bagaimana kita bisa sekarang pergi ke sana? Nah untuk ini, penting untuk mengetahui bahwa setiap komponen yang Anda
muat dengan bantuan Bereaksi navigasi mendapat penyangga khusus yang diteruskan secara otomatis, sehingga komponen apa pun yang dipetakan ke salah satu pengidentifikasi
layar Anda di sini, jadi
dalam hal ini ketiga komponen ini, akan mendapatkan prop khusus. Komponen bersarang di sana tidak secara otomatis
mendapatkannya, hanya komponen tingkat atas yang Anda petakan ke pengidentifikasi di navigator Anda.
Jadi itu prop khusus yang saya bicarakan,
mari kita lihat.
Jadi di sini dalam alat peraga, kita dapat mengekstraknya dan mari kita mulai dengan alat peraga konsol log di sini, sehingga
kita bisa mendapatkan ide dan untuk sekarang sehingga kita tidak mendapatkan kesalahan, saya
hanya akan melewati fungsi kosong di sini untuk onPress .
Jadi mari kita simpan ini dan mari kita lihat apa yang ada di dalam alat peraga.
Ini ulang, kami memiliki tombol yang tidak melakukan apa-apa dan di sini di konsol, kami memang melihat alat
peraga tidak kosong.
Ini adalah
objek props kami dan di sana kami memiliki prop navigasi yang dengan sendirinya adalah
objek yang memiliki beberapa tindakan, oke tetapi yang juga memiliki misalnya pop, push, replace, reset dan fungsi navigasi, jadi banyak fungsi di sana,
fungsi yang membantu kami berkeliling di aplikasi kami.
Ini juga memiliki alat peraga layar, sehingga alat peraga kami memiliki alat peraga layar yang dapat kita abaikan untuk saat ini.
Jadi ini yang ada di dalam alat peraga dan alat peraga navigasi ini, bagian navigasi yang ada
di sana,
sangat membantu kita, jadi alat peraga navigasi ini. Ini membantu kami di sini karena ketika kami menekan tombol ini dan
saya akan melakukan ini dengan fungsi panah sebaris di sini, tentu saja Anda dapat memiliki fungsi terpisah yang
Anda buat dan yang kemudian
Anda petakan ke onPress, ini membantu kami dan ini dapat digunakan untuk bernavigasi.
Jadi pada navigasi alat peraga, navigasi adalah alat peraga khusus yang kami dapatkan dengan React navigation karena
kami memuat komponen layar kategori ini dengan bantuan navigator kami
di sini, alat peraga navigasi khusus ini memiliki metode navigasi
dan ini adalah metode utama
Anda, yang paling penting metode untuk berkeliling dengan bantuan Bereaksi navigasi. Bagaimana cara kerja navigasi?
Navigasi mengambil objek sebagai argumen dan di objek ini, Anda dapat mengatur nama rute yang ingin Anda
navigasikan.
Jadi Anda melewati properti nama rute di objek yang Anda lewati untuk bernavigasi dan sekarang penting, nama rute yang
Anda tentukan di sini harus menjadi salah satu dari tiga nama rute yang saya atur di sini.
Sekarang nama rute adalah pengidentifikasi yang Anda pilih pilih di depan titik dua ini, jadi nama properti di
objek ini yang Anda lewati untuk membuat stack navigator.
Ini adalah nama rute Anda
dan inilah yang sekarang dapat Anda gunakan untuk navigasi. Jadi di sini saya ingin pergi ke makanan
kategori, ini adalah nama
rute yang ingin saya gunakan, jadi karenanya di sini,
saya menunjuk pada makanan kategori tetapi tidak seperti ini, ini dalam Javascript akan mencari variabel kategori makanan, bukan ke string
bernama kategori makanan karena ini pada dasarnya akan memberitahu Javascript dan Bereaksi navigasi pada akhirnya bahwa
Anda ingin pergi ke rute yang memiliki nama makanan kategori dan itulah rute ini di sini.
Jadi sekarang, ini adalah bagaimana Anda bisa pergi ke sana.
Jika sekarang kita menyimpan ini dan kita klik pergi ke makanan di sini, Anda lihat kita pergi ke layar makanan, kita mendapatkan animasi
yang bagus ini di luar kotak, kita mendapatkan tombol kembali ini yang terlihat persis seperti yang
kita harapkan untuk dilihat pada iOS dan semua itu bekerja di luar kotak tanpa kerja ekstra, tidak ada centang,
tidak ada kode animasi manual, kami mengeluarkan ini dari kotak berkat React navigation library.
Jadi dengan ini, kita bisa maju dan kembali ke layar makan kita, ke layar makanan kategori dan kemudian kembali ke
layar kategori dan ini juga berfungsi di Android. Di sana kita mendapatkan navigasi perutean khusus Android
yang terlihat sedikit berbeda dari pada iOS, itu adalah animasi navigasi yang Anda harapkan di Android,
tentu saja Anda juga dapat menggunakan tombol kembali perangkat untuk kemudian kembali.
Jadi ini adalah bagaimana Anda dapat menavigasi ke layar yang berbeda dan harap perhatikan juga bahwa navigasi tentu saja
tidak mengatakan apa-apa tentang arah yang ingin kita tuju, itu tidak memberi tahu React navigation apakah itu harus
memutar animasi maju atau animasi mundur itu . Bereaksi navigasi secara otomatis mendeteksi ini karena di
bawah tenda, ia mengelola tumpukan halaman yang saya bicarakan, tumpukan layar ini dan dalam tumpukan ini,
saat ini ketika kita memulai aplikasi, kita hanya memiliki layar kategori tetapi ketika saya menekan
tombol ini , navigasi pada akhirnya memberitahu Bereaksi navigasi bahwa karena kita melakukan ini di dalam
komponen yang dimuat dengan navigator tumpukan, bahwa kita ingin menavigasi ke layar yang
berbeda yang harus didorong di atas tumpukan. Ini hanyalah perilaku default dan karenanya, ia tahu bahwa ia
ingin maju karena rute baru didorong, yang artinya ditambahkan ke tumpukan, kami ingin maju dan ketika kami mengklik
tombol kembali yang ditambahkan secara otomatis, itu memunculkan layar ini dari tumpukan dan karena menghapus sesuatu dari tumpukan, ia tahu
bahwa ia harus memutar animasi kembali. Jadi itulah yang terjadi di
balik layar, Anda tidak benar-benar perlu khawatir tentang hal itu dan itu
hal yang baik, saya hanya ingin Anda mengetahui hal itu, bahwa React navigation melakukan pekerjaan
berat untuk Anda di sana dan mengelola setumpuk ini. layar dan animasi sesuai yang Anda butuhkan di bawah tenda untuk Anda.
Oke, jadi itu memungkinkan kita untuk bolak-balik atau maju mundur.
Sekarang tantangan Anda untuk kuliah berikutnya di mana kami kemudian akan melakukannya bersama adalah bahwa Anda juga akan
melakukan hal yang sama pada layar makanan kategori dan pastikan bahwa kami juga dapat
pergi ke MealDetailScreen dari sana. Seharusnya tidak terlalu sulit, di kuliah berikutnya, kita akan melakukannya bersama.