1 00:00:02,410 --> 00:00:05,910 Sebagian besar file kami tidak perlu diubah. 2 00:00:06,040 --> 00:00:12,220 Yang perlu kita ubah adalah apa yang terjadi di file navigasi dan folder 3 00:00:13,000 --> 00:00:19,540 navigasi di aplikasi J. S. Anda mungkin ingat merender wadah 4 00:00:19,570 --> 00:00:25,510 navigasi di sini dan wadah navigasi hanyalah komponen khusus di sini di mana kami pada akhirnya memiliki 5 00:00:25,580 --> 00:00:31,330 logika kami untuk memeriksa apakah pengguna diautentikasi dan kemudian kami membuat toko Navigator yang merupakan navigator rute 6 00:00:31,330 --> 00:00:36,550 kami yang dibuat di sini dengan navigasi reaksi dan di situlah segalanya harus berubah sekarang. 7 00:00:36,550 --> 00:00:39,410 Sekarang mari kita mulai dengan wadah navigasi. 8 00:00:39,430 --> 00:00:45,640 Kami tidak akan memerlukan kode ini di sini lagi di mana kami menavigasi secara manual di tempat lain jika pengguna 9 00:00:46,150 --> 00:00:52,090 diautentikasi karena Anda akan melihat nanti bahwa ini sekarang akan ditangani secara berbeda dengan konfigurasi berbasis komponen ini sehingga 10 00:00:52,780 --> 00:00:55,040 Anda dapat menghapusnya menggunakan fakta di sini. 11 00:00:55,150 --> 00:01:02,920 Tetap tidak aktif di sini meskipun Anda dapat menghapus referensi di sini dan juga menghapusnya di sana dan ketika datang ke impor 12 00:01:02,920 --> 00:01:09,620 di sini kita tidak perlu dua kait di sini lagi dan kita semua tidak perlu impor ini lagi. 13 00:01:09,760 --> 00:01:17,020 Jadi kita hanya memiliki navigator toko yang tersisa dan itu juga bukan sesuatu yang kita butuhkan di sini lagi. 14 00:01:17,110 --> 00:01:24,040 Kami tidak menambahkan Navigator toko sebagai komponen seperti ini di mana kami kemudian merujuk ke 15 00:01:24,040 --> 00:01:30,760 konfigurasi keseluruhan dari file toko navigator karena konfigurasi keseluruhan tentu saja semua diatur 16 00:01:30,760 --> 00:01:38,080 dengan logika lama memiliki konfigurasi seperti registri global yang hanya tidak berfungsi lagi dengan navigasi 17 00:01:38,080 --> 00:01:39,140 reaksi 5. 18 00:01:39,790 --> 00:01:46,990 Sebagai gantinya kita sekarang perlu memigrasikan semua itu ke pendekatan baru ke pendekatan berbasis komponen ini dan 19 00:01:46,990 --> 00:01:47,950 untuk melakukannya. 20 00:01:48,130 --> 00:01:51,980 Saya ingin memulai cukup sederhana di wadah navigasi. 21 00:01:52,090 --> 00:01:57,970 Saya akan menyiapkan Navigator stack baru yang hanya Navigator tiruan untuk saat ini. 22 00:01:57,970 --> 00:02:04,240 Jadi, apakah Anda melihat cara kerjanya secara umum sebelum kita nanti akan benar-benar menerapkan ini 23 00:02:04,240 --> 00:02:07,270 pada aplikasi kita yang sebenarnya untuk itu. 24 00:02:07,410 --> 00:02:10,000 Mari tambahkan impor di sini mulai dari pada reaksi. 25 00:02:10,020 --> 00:02:13,020 Navigasi asli slash. 26 00:02:13,020 --> 00:02:19,070 Dan dari sana kita perlu mengimpor navigasi wadah navigasi. 27 00:02:19,080 --> 00:02:24,460 Sekarang itu bisa membingungkan karena komponen kita sendiri di sini adalah semua wadah navigasi bernama. 28 00:02:24,600 --> 00:02:31,890 Jadi untuk menghindari kebingungan di sini, saya akan mengganti nama komponen kami di sini menjadi navigator aplikasi atau apa pun 29 00:02:31,890 --> 00:02:37,260 yang Anda inginkan, jadi saya akan mengganti nama di sini dan semua untuk menghindari kebingungan 30 00:02:37,920 --> 00:02:45,330 meskipun itu tidak secara teknis diperlukan dalam komponen aplikasi di app ya saya akan diimpor sebagai navigator aplikasi Saya akan mengganti 31 00:02:45,420 --> 00:02:53,220 nama file menjadi navigator aplikasi dan saya akan mengimpor dari navigator aplikasi di sini di komponen aplikasi jadi sesuaikan jalur impor untuk 32 00:02:53,460 --> 00:02:55,680 memasukkan nama file baru itu. 33 00:02:55,680 --> 00:02:59,030 Dan kemudian di sini saya membuat navigator aplikasi. 34 00:02:59,070 --> 00:03:02,430 Sekarang saya baru saja membuat perubahan nama ini untuk menghindari kebingungan. 35 00:03:02,490 --> 00:03:09,300 Bagian yang lebih penting terjadi di dalam aplikasi Navigator yang sebelumnya adalah wadah navigasi kami. 36 00:03:09,300 --> 00:03:12,120 Sekarang kami mengimpor wadah navigasi dari React Native. 37 00:03:12,120 --> 00:03:15,450 Tetapi ayah akan menjadi komponen yang berbeda dari apa yang kita bangun di masa lalu. 38 00:03:15,480 --> 00:03:21,690 Itu hanya berbagi nama yang sama itulah sebabnya saya menamainya lebih penting daripada wadah navigasi ini. 39 00:03:21,690 --> 00:03:26,910 Untuk saat ini, kami mengimpor sesuatu dari tumpukan slash navigasi reaksi iklan. 40 00:03:27,120 --> 00:03:31,500 Dan sekarang ini adalah paket yang belum ada yang belum kami instal. 41 00:03:32,280 --> 00:03:34,440 Jadi mari kita hentikan proses ini lagi. 42 00:03:34,500 --> 00:03:43,020 Dan dengan npm, instal dasbor aman, mari kita instal di bereaksi slash stack navigasi sehingga NPM menginstal Ashutosh 43 00:03:43,020 --> 00:03:46,010 aman di bereaksi slash stack navigasi. 44 00:03:46,170 --> 00:03:51,840 Ini akan menginstal logika navigasi stack AS dan kita semua dapat menginstal sejumlah 45 00:03:51,840 --> 00:03:58,380 paket karena kita akan membutuhkannya nanti dan itu pada reaksi slash undian navigasi yang nantinya 46 00:03:58,380 --> 00:04:06,760 akan memberi kita undian berbasis navigasi yang juga akan perlu jadi mari kita tunggu Perintah-perintah instalasi D selesai dan setelah 47 00:04:06,930 --> 00:04:14,190 itu dengan engine start kita dapat membuka server expo ini lagi jadi sekarang kita menginstal tumpukan Vietnamisasi. 48 00:04:14,190 --> 00:04:19,500 Kita dapat mengimpor sesuatu darinya dan itu adalah sesuatu seperti D membuat stack navigator. 49 00:04:19,650 --> 00:04:26,490 Sekarang buat stack Navigator adalah fungsi yang sudah kita ketahui di Shop Navigator yang masih menggunakan navigasi 50 00:04:26,490 --> 00:04:33,210 reaksi lama di mana kami juga mengimpor untuk membuat stack navigator dari navigasi reaksi atau jika 51 00:04:33,210 --> 00:04:36,990 Anda menggunakan paket ini untuk bekerja dari paket terpisah. 52 00:04:37,200 --> 00:04:43,770 Tetapi kami juga telah membuat stack navigator di sana dan membuat draw navigator berakhir. 53 00:04:43,880 --> 00:04:53,870 Sekarang kami menggunakan buat navigator tumpukan untuk membuat pengaturan konfigurasi kami, registri navigasi kami untuk bagian aplikasi ini Anda bisa mengatakan demikian untuk 54 00:04:53,990 --> 00:04:58,760 gambaran umum produk detail produk dan layar kartu yang kami 55 00:04:58,760 --> 00:05:05,000 satukan menjadi satu tumpukan dan kemudian kami memiliki beberapa tumpukan seperti itu untuk membuat 56 00:05:05,000 --> 00:05:12,070 mereka berkumpul di Navigator draw kami yang akhirnya kami gabungkan dengan layar mati di navigator sakelar. 57 00:05:12,090 --> 00:05:16,710 Sekarang kembali ke navigator aplikasi kita apa yang kita lakukan dengan membuat stack navigator di sini. 58 00:05:16,740 --> 00:05:18,560 Sekarang berfungsi berbeda. 59 00:05:18,870 --> 00:05:25,260 Sekarang kita menggunakannya untuk membuat komponen baru dengannya dan saya akan menamainya stack saya. 60 00:05:25,260 --> 00:05:31,440 Nama itu sepenuhnya terserah Anda, tetapi Anda cukup menelepon membuat navigator tumpukan seperti ini dan Anda selesai. 61 00:05:31,440 --> 00:05:33,810 Dan ini sekarang merupakan perubahan besar. 62 00:05:33,960 --> 00:05:39,120 Anda sekarang tidak melewatkan objek apa pun untuk membuat stack navigator untuk mengkonfigurasinya. 63 00:05:39,170 --> 00:05:42,900 Sebaliknya itu adalah fungsi yang tidak menginginkan objek. 64 00:05:42,900 --> 00:05:48,490 Ini adalah fungsi yang tidak memerlukan objek jadi apa fungsinya. 65 00:05:48,490 --> 00:05:57,720 Apa tumpukan saya, tumpukan saya sekarang merupakan komponen reaksi dan kami menggunakannya dengan tepat di sini di navigator 66 00:05:57,720 --> 00:05:58,490 aplikasi. 67 00:05:58,500 --> 00:06:04,890 Kita perlu membungkus semua logika navigasi dengan komponen wadah navigasi yang kami impor dari 68 00:06:04,890 --> 00:06:06,800 navigasi asli yang bereaksi. 69 00:06:06,870 --> 00:06:14,730 Anda dapat menganggap komponen wadah navigasi itu pada dasarnya sebagai versi komponen wadah aplikasi yang kami buat 70 00:06:15,270 --> 00:06:19,080 dengan membuat wadah aplikasi di pengaturan lama. 71 00:06:19,080 --> 00:06:24,830 Di sana kami harus membungkus navigator kami yang sudah selesai dengan membuat wadah aplikasi. 72 00:06:24,840 --> 00:06:31,680 Sekarang kita harus menyelesaikan pengaturan navigasi berbasis komponen dengan wadah navigasi. 73 00:06:32,310 --> 00:06:39,800 Jadi di sini kita sekarang mengatur logika kita ketika sampai pada halaman mana kita ingin dapat memuat. 74 00:06:39,870 --> 00:06:45,640 Dan di sini kita sekarang menggunakan tumpukan saya sebagai komponen reaksi tetapi tidak seperti ini. 75 00:06:45,690 --> 00:06:50,050 Tetapi sebaliknya di sini kita membutuhkan komponen navigator DOT. 76 00:06:50,130 --> 00:06:58,620 Jadi sebenarnya stack saya adalah objek dengan properti navigator dan nilai yang disimpan di 77 00:06:58,620 --> 00:07:02,520 properti itu sekarang menjadi komponen. 78 00:07:02,530 --> 00:07:08,110 Jadi sekarang kita dapat membuat komponen itu dan antara pajak pembukaan dan penutupan komponen ini sekarang 79 00:07:08,110 --> 00:07:13,550 kita menempatkan pada dasarnya layar yang berbeda yang kita ingin menjadi bagian dari tumpukan itu. 80 00:07:13,570 --> 00:07:20,800 Jadi apa yang sebelumnya kita miliki di navigator toko ada di dalam objek ini yang kami lewati untuk 81 00:07:21,070 --> 00:07:24,790 membuat stack navigator peta komponen layar ini dan namanya. 82 00:07:24,850 --> 00:07:30,140 Itulah yang sekarang kami siapkan di sini antara tag pembuka dan penutup ini. 83 00:07:30,190 --> 00:07:36,900 Karena itu Anda dapat berpikir bahwa apa yang kami lakukan adalah menambahkan komponen layar tinjauan produk dengan benar. 84 00:07:36,910 --> 00:07:41,680 Ini adalah salah satu komponen kami, kami akan menambahkan impor yang belum kami lakukan di sini karena 85 00:07:41,980 --> 00:07:45,440 ini salah tetapi Anda dapat berpikir bahwa kami melakukan ini dengan baik. 86 00:07:45,790 --> 00:07:51,430 Ini tentu saja layar yang ingin kita miliki sebagai bagian dari navigator ini tetapi tidak 87 00:07:51,430 --> 00:07:52,410 memiliki nama. 88 00:07:52,450 --> 00:07:58,210 Sekarang kita perlu nama sehingga kita dapat menavigasi ke sana misalnya sehingga kita dapat memicu navigasi di suatu tempat 89 00:07:58,210 --> 00:07:59,350 di aplikasi kita. 90 00:07:59,350 --> 00:08:03,570 Itu sebabnya kami memiliki nama di sini juga pada pengaturan lama. 91 00:08:03,700 --> 00:08:05,530 Jadi alih-alih kami melakukan sesuatu yang berbeda. 92 00:08:05,530 --> 00:08:13,090 Kami sekali lagi menggunakan tumpukan saya objek ini di sana dan sekarang properti kedua yang memiliki properti 93 00:08:13,570 --> 00:08:19,930 layar seperti properti navigator properti layar juga memegang komponen reaksi dan karenanya kita dapat mengolahnya 94 00:08:19,930 --> 00:08:21,160 seperti ini. 95 00:08:21,160 --> 00:08:27,820 Ini sekarang merupakan komponen yang memungkinkan kita untuk menentukan layar yang harus menjadi bagian dari navigator tumpukan 96 00:08:27,820 --> 00:08:35,620 di sini dan kita mengkonfigurasinya dengan bantuan alat peraga sekarang karena kita sedang bekerja dengan komponen di sini sehingga konfigurasi berfungsi 97 00:08:35,620 --> 00:08:42,430 dengan alat peraga sama seperti itu selalu kasus ketika kita bekerja dengan komponen untuk memberikan layar ini nama 98 00:08:42,460 --> 00:08:50,350 kita menambahkan prop nama dan sekarang kita dapat menggunakan nama yang kita gunakan di sini ikhtisar produk sehingga kita dapat menambahkan 99 00:08:50,860 --> 00:08:57,370 nama ini dan membiarkan reaksi navigasi tahu komponen mana yang dimuat ketika kita menargetkan nama ini ketika 100 00:08:57,370 --> 00:09:04,690 kita melakukannya dengan tindakan imigrasi misalnya kita menambahkan prop kedua prop komponen dan ini harus memegang pointer pada komponen 101 00:09:05,050 --> 00:09:10,770 yang ingin kita muat ketika kita ingin pergi ke layar ini dengan nama ini. 102 00:09:10,900 --> 00:09:22,080 Jadi untuk ini saya akan mengimpor layar ikhtisar produk di sini dari folder layar kami ke sub folder toko dan kemudian 103 00:09:22,080 --> 00:09:23,750 layar ikhtisar produk. 104 00:09:23,940 --> 00:09:27,910 Jadi sekarang kita benar-benar membutuhkannya dan saya lulus di sini. 105 00:09:28,020 --> 00:09:30,780 Sekarang yang penting kita tidak membuat komponen di sini. 106 00:09:30,810 --> 00:09:36,960 Kami hanya menunjuk itu, kami hanya menggunakan namanya yang diekspor dari file itu. 107 00:09:36,960 --> 00:09:42,750 Dan dengan ini kita sekarang memiliki setumpuk kecil pertama kita di sini. 108 00:09:42,780 --> 00:09:46,240 Sekarang mari beri komentar impor ini dari navigator toko. 109 00:09:46,260 --> 00:09:48,360 Kami tidak membutuhkannya lagi saat ini. 110 00:09:48,360 --> 00:09:52,670 Mari kita simpan semuanya dan meluncurkannya di Android, katakanlah. 111 00:09:52,830 --> 00:09:58,250 Dan ketika Anda melakukannya, ia membangun bundel javascript dan terbuka di perangkat Android. 112 00:09:58,260 --> 00:10:01,470 Dan yang akan Anda lihat adalah layar ikhtisar produk kami. 113 00:10:01,470 --> 00:10:02,790 Tentu saja terlihat sedikit berbeda. 114 00:10:02,790 --> 00:10:04,770 Tentu saja tidak ada tombol tajuknya. 115 00:10:04,800 --> 00:10:07,330 Tidak ada seluruh konfigurasi tajuk. 116 00:10:07,350 --> 00:10:13,740 Judulnya semua salah tetapi itu masuk akal karena kita sekarang tidak menggunakan navigator lama di 117 00:10:13,740 --> 00:10:21,500 mana kita memiliki semua konfigurasi ini tetapi yang baru dan ini hanya bukti bahwa ia bekerja dan bagaimana cara kerjanya. 118 00:10:21,600 --> 00:10:30,240 Sekarang dengan pengetahuan ini dalam pikiran mari kita sekarang tinggalkan contoh kecil ini di sini dan mari kita benar-benar port seluruh navigasi kita 119 00:10:30,240 --> 00:10:32,910 diatur di sini untuk logika baru ini.