Sebagian besar file kami tidak perlu diubah.
Yang perlu kita ubah adalah apa yang terjadi di file navigasi dan folder
navigasi di aplikasi J. S. Anda mungkin ingat merender wadah
navigasi di sini dan wadah navigasi hanyalah komponen khusus di sini di mana kami pada akhirnya memiliki
logika kami untuk memeriksa apakah pengguna diautentikasi dan kemudian kami membuat toko Navigator yang merupakan navigator rute
kami yang dibuat di sini dengan navigasi reaksi dan di situlah segalanya harus berubah sekarang.
Sekarang mari kita mulai dengan wadah navigasi.
Kami tidak akan memerlukan kode ini di sini lagi di mana kami menavigasi secara manual di tempat lain jika pengguna
diautentikasi karena Anda akan melihat nanti bahwa ini sekarang akan ditangani secara berbeda dengan konfigurasi berbasis komponen ini sehingga
Anda dapat menghapusnya menggunakan fakta di sini.
Tetap tidak aktif di sini meskipun Anda dapat menghapus referensi di sini dan juga menghapusnya di sana dan ketika datang ke impor
di sini kita tidak perlu dua kait di sini lagi dan kita semua tidak perlu impor ini lagi.
Jadi kita hanya memiliki navigator toko yang tersisa dan itu juga bukan sesuatu yang kita butuhkan di sini lagi.
Kami tidak menambahkan Navigator toko sebagai komponen seperti ini di mana kami kemudian merujuk ke
konfigurasi keseluruhan dari file toko navigator karena konfigurasi keseluruhan tentu saja semua diatur
dengan logika lama memiliki konfigurasi seperti registri global yang hanya tidak berfungsi lagi dengan navigasi
reaksi 5.
Sebagai gantinya kita sekarang perlu memigrasikan semua itu ke pendekatan baru ke pendekatan berbasis komponen ini dan
untuk melakukannya.
Saya ingin memulai cukup sederhana di wadah navigasi.
Saya akan menyiapkan Navigator stack baru yang hanya Navigator tiruan untuk saat ini.
Jadi, apakah Anda melihat cara kerjanya secara umum sebelum kita nanti akan benar-benar menerapkan ini
pada aplikasi kita yang sebenarnya untuk itu.
Mari tambahkan impor di sini mulai dari pada reaksi.
Navigasi asli slash.
Dan dari sana kita perlu mengimpor navigasi wadah navigasi.
Sekarang itu bisa membingungkan karena komponen kita sendiri di sini adalah semua wadah navigasi bernama.
Jadi untuk menghindari kebingungan di sini, saya akan mengganti nama komponen kami di sini menjadi navigator aplikasi atau apa pun
yang Anda inginkan, jadi saya akan mengganti nama di sini dan semua untuk menghindari kebingungan
meskipun itu tidak secara teknis diperlukan dalam komponen aplikasi di app ya saya akan diimpor sebagai navigator aplikasi Saya akan mengganti
nama file menjadi navigator aplikasi dan saya akan mengimpor dari navigator aplikasi di sini di komponen aplikasi jadi sesuaikan jalur impor untuk
memasukkan nama file baru itu.
Dan kemudian di sini saya membuat navigator aplikasi.
Sekarang saya baru saja membuat perubahan nama ini untuk menghindari kebingungan.
Bagian yang lebih penting terjadi di dalam aplikasi Navigator yang sebelumnya adalah wadah navigasi kami.
Sekarang kami mengimpor wadah navigasi dari React Native.
Tetapi ayah akan menjadi komponen yang berbeda dari apa yang kita bangun di masa lalu.
Itu hanya berbagi nama yang sama itulah sebabnya saya menamainya lebih penting daripada wadah navigasi ini.
Untuk saat ini, kami mengimpor sesuatu dari tumpukan slash navigasi reaksi iklan.
Dan sekarang ini adalah paket yang belum ada yang belum kami instal.
Jadi mari kita hentikan proses ini lagi.
Dan dengan npm, instal dasbor aman, mari kita instal di bereaksi slash stack navigasi sehingga NPM menginstal Ashutosh
aman di bereaksi slash stack navigasi.
Ini akan menginstal logika navigasi stack AS dan kita semua dapat menginstal sejumlah
paket karena kita akan membutuhkannya nanti dan itu pada reaksi slash undian navigasi yang nantinya
akan memberi kita undian berbasis navigasi yang juga akan perlu jadi mari kita tunggu Perintah-perintah instalasi D selesai dan setelah
itu dengan engine start kita dapat membuka server expo ini lagi jadi sekarang kita menginstal tumpukan Vietnamisasi.
Kita dapat mengimpor sesuatu darinya dan itu adalah sesuatu seperti D membuat stack navigator.
Sekarang buat stack Navigator adalah fungsi yang sudah kita ketahui di Shop Navigator yang masih menggunakan navigasi
reaksi lama di mana kami juga mengimpor untuk membuat stack navigator dari navigasi reaksi atau jika
Anda menggunakan paket ini untuk bekerja dari paket terpisah.
Tetapi kami juga telah membuat stack navigator di sana dan membuat draw navigator berakhir.
Sekarang kami menggunakan buat navigator tumpukan untuk membuat pengaturan konfigurasi kami, registri navigasi kami untuk bagian aplikasi ini Anda bisa mengatakan demikian untuk
gambaran umum produk detail produk dan layar kartu yang kami
satukan menjadi satu tumpukan dan kemudian kami memiliki beberapa tumpukan seperti itu untuk membuat
mereka berkumpul di Navigator draw kami yang akhirnya kami gabungkan dengan layar mati di navigator sakelar.
Sekarang kembali ke navigator aplikasi kita apa yang kita lakukan dengan membuat stack navigator di sini.
Sekarang berfungsi berbeda.
Sekarang kita menggunakannya untuk membuat komponen baru dengannya dan saya akan menamainya stack saya.
Nama itu sepenuhnya terserah Anda, tetapi Anda cukup menelepon membuat navigator tumpukan seperti ini dan Anda selesai.
Dan ini sekarang merupakan perubahan besar.
Anda sekarang tidak melewatkan objek apa pun untuk membuat stack navigator untuk mengkonfigurasinya.
Sebaliknya itu adalah fungsi yang tidak menginginkan objek.
Ini adalah fungsi yang tidak memerlukan objek jadi apa fungsinya.
Apa tumpukan saya, tumpukan saya sekarang merupakan komponen reaksi dan kami menggunakannya dengan tepat di sini di navigator
aplikasi.
Kita perlu membungkus semua logika navigasi dengan komponen wadah navigasi yang kami impor dari
navigasi asli yang bereaksi.
Anda dapat menganggap komponen wadah navigasi itu pada dasarnya sebagai versi komponen wadah aplikasi yang kami buat
dengan membuat wadah aplikasi di pengaturan lama.
Di sana kami harus membungkus navigator kami yang sudah selesai dengan membuat wadah aplikasi.
Sekarang kita harus menyelesaikan pengaturan navigasi berbasis komponen dengan wadah navigasi.
Jadi di sini kita sekarang mengatur logika kita ketika sampai pada halaman mana kita ingin dapat memuat.
Dan di sini kita sekarang menggunakan tumpukan saya sebagai komponen reaksi tetapi tidak seperti ini.
Tetapi sebaliknya di sini kita membutuhkan komponen navigator DOT.
Jadi sebenarnya stack saya adalah objek dengan properti navigator dan nilai yang disimpan di
properti itu sekarang menjadi komponen.
Jadi sekarang kita dapat membuat komponen itu dan antara pajak pembukaan dan penutupan komponen ini sekarang
kita menempatkan pada dasarnya layar yang berbeda yang kita ingin menjadi bagian dari tumpukan itu.
Jadi apa yang sebelumnya kita miliki di navigator toko ada di dalam objek ini yang kami lewati untuk
membuat stack navigator peta komponen layar ini dan namanya.
Itulah yang sekarang kami siapkan di sini antara tag pembuka dan penutup ini.
Karena itu Anda dapat berpikir bahwa apa yang kami lakukan adalah menambahkan komponen layar tinjauan produk dengan benar.
Ini adalah salah satu komponen kami, kami akan menambahkan impor yang belum kami lakukan di sini karena
ini salah tetapi Anda dapat berpikir bahwa kami melakukan ini dengan baik.
Ini tentu saja layar yang ingin kita miliki sebagai bagian dari navigator ini tetapi tidak
memiliki nama.
Sekarang kita perlu nama sehingga kita dapat menavigasi ke sana misalnya sehingga kita dapat memicu navigasi di suatu tempat
di aplikasi kita.
Itu sebabnya kami memiliki nama di sini juga pada pengaturan lama.
Jadi alih-alih kami melakukan sesuatu yang berbeda.
Kami sekali lagi menggunakan tumpukan saya objek ini di sana dan sekarang properti kedua yang memiliki properti
layar seperti properti navigator properti layar juga memegang komponen reaksi dan karenanya kita dapat mengolahnya
seperti ini.
Ini sekarang merupakan komponen yang memungkinkan kita untuk menentukan layar yang harus menjadi bagian dari navigator tumpukan
di sini dan kita mengkonfigurasinya dengan bantuan alat peraga sekarang karena kita sedang bekerja dengan komponen di sini sehingga konfigurasi berfungsi
dengan alat peraga sama seperti itu selalu kasus ketika kita bekerja dengan komponen untuk memberikan layar ini nama
kita menambahkan prop nama dan sekarang kita dapat menggunakan nama yang kita gunakan di sini ikhtisar produk sehingga kita dapat menambahkan
nama ini dan membiarkan reaksi navigasi tahu komponen mana yang dimuat ketika kita menargetkan nama ini ketika
kita melakukannya dengan tindakan imigrasi misalnya kita menambahkan prop kedua prop komponen dan ini harus memegang pointer pada komponen
yang ingin kita muat ketika kita ingin pergi ke layar ini dengan nama ini.
Jadi untuk ini saya akan mengimpor layar ikhtisar produk di sini dari folder layar kami ke sub folder toko dan kemudian
layar ikhtisar produk.
Jadi sekarang kita benar-benar membutuhkannya dan saya lulus di sini.
Sekarang yang penting kita tidak membuat komponen di sini.
Kami hanya menunjuk itu, kami hanya menggunakan namanya yang diekspor dari file itu.
Dan dengan ini kita sekarang memiliki setumpuk kecil pertama kita di sini.
Sekarang mari beri komentar impor ini dari navigator toko.
Kami tidak membutuhkannya lagi saat ini.
Mari kita simpan semuanya dan meluncurkannya di Android, katakanlah.
Dan ketika Anda melakukannya, ia membangun bundel javascript dan terbuka di perangkat Android.
Dan yang akan Anda lihat adalah layar ikhtisar produk kami.
Tentu saja terlihat sedikit berbeda.
Tentu saja tidak ada tombol tajuknya.
Tidak ada seluruh konfigurasi tajuk.
Judulnya semua salah tetapi itu masuk akal karena kita sekarang tidak menggunakan navigator lama di
mana kita memiliki semua konfigurasi ini tetapi yang baru dan ini hanya bukti bahwa ia bekerja dan bagaimana cara kerjanya.
Sekarang dengan pengetahuan ini dalam pikiran mari kita sekarang tinggalkan contoh kecil ini di sini dan mari kita benar-benar port seluruh navigasi kita
diatur di sini untuk logika baru ini.