Saya ingin memulai dengan bentuk navigasi paling dasar dan juga bentuk navigasi paling umum yang Anda miliki
di aplikasi seluler mana pun dan itulah cara bolak-balik di antara layar dan untuk ini akan mengatur
apa yang disebut stack dan navigator karena halaman atau layar.
Saya akan menggunakan kata-kata ini sebagai sinonim di sini.
Jadi halaman dan layar pada dasarnya dikelola pada setumpuk halaman.
Dan setiap kali Anda pergi ke layar baru itu akan didorong di atas tumpukan itu di layar paling
atas pada tumpukan selalu layar yang terlihat.
Dan ketika Anda mengklik tombol kembali muncul layar ini Anda berada di dimatikan.
Dan karena Anda selalu melihat di aplikasi layar paling atas Anda akan melihat layar di bawah ini dari
mana Anda berasal.
Itu sebabnya disebut Stack navigator.
Nah, itu amarahnya.
Mari kita gunakan saja dan itu akan menjadi sangat jelas.
Kami mengimpor dari reaksi.
Navigasi dan namanya adalah nama fungsinya.
Kita sebenarnya perlu membuat navigator susun seperti itu adalah membuat navigator tumpukan.
Sekarang satu catatan penting sintaks ini benar jika Anda menggunakan versi navigasi reaksi gratis jika Anda menggunakan
keengganan navigasi reaksi untuk itu sedikit berubah maka Anda perlu menginstal paket tambahan seperti yang
disebutkan pada kuliah sebelumnya.
Anda perlu menjalankan npm install dash dasbor save react dash dasbor navigasikan dan instal paket tambahan ini dan dengan menginstalnya Anda
mengimpor buat stack navigator dari bereaksi sebagai dash dasbor navigasi alih-alih bereaksi navigasi itu penyesuaian kecil
Anda tidak perlu membuat empat buat stack navigator dan ketika kami membuat navigator kami
misalnya ketukan atau gambar navigator nanti Anda akan memiliki paket masing-masing yang Anda butuhkan untuk
menginstal reaksi dash dasbor dan sebagainya lagi yang semuanya tercakup dalam kuliah yang
Anda temukan sebelum kuliah ini.
Sekarang di sini saya merekam kursus ini dengan versi navigasi reaksi gratis yang jika tidak sama
persis.
Hanya impor yang berbeda dan karenanya saya akan impor dari navigasi reaksi di sini.
Tetapi jika Anda mengikuti pada Versi 4 itu bereaksi dasbor navigasi bash menumpuk paket tambahan yang
perlu Anda instal.
Jadi begitulah cara bereaksi navigasi perpustakaan ini bekerja Anda membuat apa yang disebut navigator yang pada
akhirnya hanya Anda bisa mengatakan objek benar-benar bereaksi komponen karena akan berubah yang menahan semua konfigurasi navigasi yang menyimpan semua informasi
yang berbeda layar yang Anda miliki dan yang akan melakukan pengangkatan berat
pemuatan layar yang berbeda dan memainkan transisi halus yang bagus untuk beralih dari A
ke B untuk Anda.
Jadi kita perlu mengimpor buat stack navigator dan kemudian kita cukup memanggil itu sekarang membuat stack navigator mengambil setidaknya satu
argumen dan itu adalah objek javascript di mana kita mengkonfigurasi layar yang berbeda kita ingin dapat bergerak
antara sekarang dan aplikasi ini yang saya inginkan untuk memulai pada layar kategori dan jika saya mengetuk kategori
di sana saya ingin pergi ke layar makanan kategori dan jika saya kemudian ketuk resep di sana
pada makanan saya ingin pergi ke layar detail makanan sehingga kita akan membutuhkan ini tiga layar di navigator tumpukan
kami sehingga ini adalah tiga layar yang dapat Anda pindahkan di antaranya dengan menggunakan pola tumpukan ini dengan
mendorong halaman Anda dan membuka halamannya dan mengapa kita tidak perlu favorit dan filter karena filter nantinya akan
ditambahkan dengan bantuan sebuah sidebar akan menjadi alternatif untuk tumpukan ini di sini dan favorit juga sebagai alternatif dari
tumpukan ini kita akan dapat pergi ke sana dengan ketukan nanti tetapi tidak sekarang.
Jadi mari kita mulai dengan navigasi berbasis tumpukan dasar ini di mana kita bisa maju
dan mundur di antara kategori layar Screen makanan dan Anda akan detail layar kami menginformasikan navigasi reaksi tentang tiga layar
ini dengan mendaftarkan mereka sebagai pasangan nilai kunci Anda mengambil pengidentifikasi apa pun nama pilihan Anda untuk kategori contoh tetapi nama
ini terserah Anda karena konvensi nama properti akan dimulai dengan huruf kapital di sini, tetapi
Anda tidak harus melakukannya secara teknis.
Jadi Anda menggunakan pengidentifikasi apa pun yang Anda inginkan sebagai nama properti di objek
ini yang Anda lewati untuk membuat stack navigator dan sekarang nilai dalam bentuk yang paling sederhana hanyalah sebuah penunjuk pada komponen
reaksi yang ingin Anda muat sebagai layar untuk layar ini.
Jadi dalam kasus saya yang akan menjadi layar kategori semua impor ini semua layar kategori impor dari layar
kategori layar saya dapat mengimpor ini karena ini adalah ekspor default saya.
Jadi sekarang kita memetakan dua kategori ini dan ini memungkinkan kita untuk nanti memberi tahu navigasi apakah perpustakaan
kita menggunakan itu harus memuat layar kategori.
Sekarang seperti yang saya katakan ini bukan satu-satunya layar yang saya butuhkan, saya juga ingin memiliki kategori makanan.
Jadi inilah sistem layar kedua Layar ini akan menyajikan semua makanan untuk kategori yang dipilih untuk
itu kami memiliki sejumlah komponen dan itulah layar makanan kategori yang kami siapkan yang kami impor dari
layar makanan kategori layar sehingga kami memetakan tahun ini sekarang dengan cara saya sebutkan bahwa ini adalah bentuk paling sederhana dari pemetaan
hanya memiliki nama properti dan kemudian pointer pada komponen yang ingin Anda muat
Anda juga dapat melewati objek di sini sebagai gantinya dan mengatur properti layar pada objek ini dan kemudian menunjuk
pada komponen yang ingin Anda muat.
Sekarang mengapa Anda melakukan itu.
Karena sekarang Anda juga dapat mengatur konfigurasi tambahan di sini selain untuk layar Anda dapat mengatur beberapa opsi default
untuk layar dan sebagainya, tetapi ini bukan sesuatu yang harus kita khawatirkan sekarang
kita akan benar-benar mengurusnya nanti dalam modul ini hanya sudah ingin menyebutkan bahwa ini
adalah jalan pintas ini adalah bentuk yang lebih lama dari memberi tahu navigasi reaksi layar mana
yang harus dimuat untuk mana pengenal berbicara bahwa kita memerlukan pengidentifikasi ketiga tentu saja dan itu pengidentifikasi yang
harus memuat layar rinci kami saya akan beri nama detail makanan dan saya ingin menunjukkan layar detail makanan saya jadi
saya akan mengimpor layar detail makanan dari Dan sekarang mari kita pergi ke folder layar dan di sana itu layar detail makanan dan lagi
saya akan menggunakan cara pintas di sini.
Kita bisa menggunakan formulir yang lebih panjang tapi saya akan menggunakan pintasan itu tepat di layar detail makanan.
Jadi dengan konfigurasi dasar itu kami memberi tahu reaksi navigasi.
Hei ini adalah layar akan dapat bergerak di antara sekarang tetapi data saja tidak akan banyak.
Mengapa.
Karena kita membuat navigator tumpukan itu tetapi kita tidak melakukan apa-apa dengannya, jadi mari kita ubah
ini membuat navigator tumpukan benar-benar mengembalikan wadah navigasi dan yang ternyata menjadi komponen reaksi.
Semuanya dinamai sebagai navigator makan.
Kedengarannya seperti nama yang pas karena itulah yang kita miliki pada akhirnya di sini.
Dan sekarang kita menyimpan komponen reaksi yang dibuat oleh stack Navigator yang
pada dasarnya adalah komponen reaksi dengan semua pengangkatan berat memuat layar yang berbeda dan memainkan animasi komponen
reaksi ini disimpan dalam navigator makanan.
Sekarang kita dapat mengekspor navigator makanan di sini dan mencoba menggunakannya seperti ini dan menangkap kita untuk merendernya di
layar dan melihat apa yang terjadi tetapi sebenarnya bereaksi navigasi bekerja sedikit berbeda.
Anda juga perlu membuat wadah aplikasi di wadah aplikasi ini yang harus Anda bungkus dengan rute Anda.
Jadi navigator utama Anda dalam hal ini kami hanya memiliki satu, kami hanya perlu menumpuk Navigator.
Jadi mari kita selesaikan ini dengannya.
Mari kita bungkus navigasi makanan atau membuatnya kembali dengan memanggil membuat wadah aplikasi dan kemudian
hanya melewati Navigator makanan sebagai argumen membuat wadah aplikasi.
Juga membuat wadah navigasi.
Jadi juga memberi Anda komponen reaksi.
Tetapi ini sebenarnya bukan komponen reaksi.
Anda harus menggunakan kode ASX Anda karena sekarang ini memiliki semua metadata tentang navigasi secara umum tentang
reaksi navigasi dan sebagainya.
Jadi ini hanyalah sebuah pola yang Anda butuhkan untuk membungkus rute Anda dengan navigator Anda yang paling penting dengan itu dan menggunakan komponen
reaksi balik ini dalam kode J Anda adalah X maka apakah pada dasarnya pengaturan yang akan selalu Anda miliki
ketika bekerja dengan navigasi reaksi nanti Anda juga akan belajar cara menggunakan banyak navigator dalam satu aplikasi.
Ngomong-ngomong untuk saat ini kami memiliki yang ini dan kami mengekspor komponen ini yang akhirnya dibuat.
Jadi sekarang dalam pengejaran aplikasi kita dapat mulai menggunakan komponen ini.
Jadi apakah kita melihat sesuatu di layar untuk itu mari kita pergi ke sana dan mengimpor navigator makanan dari navigator
makanan makan.
Sekarang seperti yang saya sebutkan navigator makan sekarang hanya komponen reaksi sehingga pada akhirnya apa yang bisa kita lakukan
adalah kita bisa mengembalikan ini alih-alih mengembalikan pandangan kita dengan teks kita di sini.
Saya akan mengembalikan navigator makanan dan karena ini adalah komponen reaksi, saya dapat naik
kode J Isaac seperti ini dengan Ayah jika kami menyimpan ini.
Kami melihat aplikasi kami saat memuat ulang
dan Anda mungkin perlu memuat ulang aplikasi secara manual.
Anda harus melihat layar kategori sekali dalam memuat ulang dan ini tentu saja sangat besar karena ini
berarti ini berfungsi.
Sekarang harap juga perhatikan bahwa Anda semua secara default mendapatkan tajuk bagus yang memiliki tampilan platform default
untuk IO s. Flat bersih ini memiliki garis tipis di bawahnya untuk Android. Ini lebih berdimensi gratis karena semuanya memiliki
sedikit bayangan drop.
Sekarang tentu saja itu kehilangan judul dan Anda akan belajar bagaimana kita dapat menambahkan
satu di modul ini, tetapi kita mendapatkan ini di luar kotak dan ini secara otomatis semua menghormati setiap takik
Anda mungkin harus tinggal sejauh ini yang Anda miliki di sini sehingga secara otomatis menggunakan tampilan area aman
dan itulah semua yang saya sebutkan dalam modul kursus terakhir saat Anda memiliki komponen ini dan Anda
kadang-kadang membutuhkannya misalnya ketika membangun aplikasi dengan navigasi reaksi bereaksi navigasi sudah membungkus pandangan Anda ke tampilan area aman setidaknya itu akan
dilakukan banyak pekerjaan yang harus Anda lakukan jika tidak, itu akan memastikan bahwa tajuk Anda terlihat
bagus dan itu adalah hal yang besar karena secara manual membuat tajuk yang terlihat bagus di semua
perangkat sebenarnya cukup banyak pekerjaan.
Jadi itulah yang kita dapatkan di sini.
Pertanyaan yang jelas sekarang adalah bagaimana kita bisa menjangkau layar kita yang lain.