1 00:00:02,250 --> 00:00:08,640 Saya ingin memulai dengan bentuk navigasi paling dasar dan juga bentuk navigasi paling umum yang Anda miliki 2 00:00:08,640 --> 00:00:14,820 di aplikasi seluler mana pun dan itulah cara bolak-balik di antara layar dan untuk ini akan mengatur 3 00:00:14,820 --> 00:00:19,030 apa yang disebut stack dan navigator karena halaman atau layar. 4 00:00:19,110 --> 00:00:21,630 Saya akan menggunakan kata-kata ini sebagai sinonim di sini. 5 00:00:21,630 --> 00:00:26,040 Jadi halaman dan layar pada dasarnya dikelola pada setumpuk halaman. 6 00:00:26,250 --> 00:00:32,220 Dan setiap kali Anda pergi ke layar baru itu akan didorong di atas tumpukan itu di layar paling 7 00:00:32,220 --> 00:00:34,570 atas pada tumpukan selalu layar yang terlihat. 8 00:00:34,650 --> 00:00:39,710 Dan ketika Anda mengklik tombol kembali muncul layar ini Anda berada di dimatikan. 9 00:00:39,840 --> 00:00:45,600 Dan karena Anda selalu melihat di aplikasi layar paling atas Anda akan melihat layar di bawah ini dari 10 00:00:45,600 --> 00:00:46,950 mana Anda berasal. 11 00:00:46,950 --> 00:00:49,370 Itu sebabnya disebut Stack navigator. 12 00:00:49,390 --> 00:00:50,490 Nah, itu amarahnya. 13 00:00:50,490 --> 00:00:53,100 Mari kita gunakan saja dan itu akan menjadi sangat jelas. 14 00:00:53,370 --> 00:00:55,080 Kami mengimpor dari reaksi. 15 00:00:55,080 --> 00:00:59,870 Navigasi dan namanya adalah nama fungsinya. 16 00:00:59,880 --> 00:01:05,550 Kita sebenarnya perlu membuat navigator susun seperti itu adalah membuat navigator tumpukan. 17 00:01:05,550 --> 00:01:11,890 Sekarang satu catatan penting sintaks ini benar jika Anda menggunakan versi navigasi reaksi gratis jika Anda menggunakan 18 00:01:11,910 --> 00:01:17,880 keengganan navigasi reaksi untuk itu sedikit berubah maka Anda perlu menginstal paket tambahan seperti yang 19 00:01:17,880 --> 00:01:19,620 disebutkan pada kuliah sebelumnya. 20 00:01:20,700 --> 00:01:29,610 Anda perlu menjalankan npm install dash dasbor save react dash dasbor navigasikan dan instal paket tambahan ini dan dengan menginstalnya Anda 21 00:01:30,390 --> 00:01:36,990 mengimpor buat stack navigator dari bereaksi sebagai dash dasbor navigasi alih-alih bereaksi navigasi itu penyesuaian kecil 22 00:01:36,990 --> 00:01:42,900 Anda tidak perlu membuat empat buat stack navigator dan ketika kami membuat navigator kami 23 00:01:42,900 --> 00:01:49,140 misalnya ketukan atau gambar navigator nanti Anda akan memiliki paket masing-masing yang Anda butuhkan untuk 24 00:01:49,140 --> 00:01:54,990 menginstal reaksi dash dasbor dan sebagainya lagi yang semuanya tercakup dalam kuliah yang 25 00:01:55,020 --> 00:01:57,370 Anda temukan sebelum kuliah ini. 26 00:01:57,460 --> 00:02:03,150 Sekarang di sini saya merekam kursus ini dengan versi navigasi reaksi gratis yang jika tidak sama 27 00:02:03,150 --> 00:02:03,520 persis. 28 00:02:03,510 --> 00:02:08,370 Hanya impor yang berbeda dan karenanya saya akan impor dari navigasi reaksi di sini. 29 00:02:08,430 --> 00:02:14,310 Tetapi jika Anda mengikuti pada Versi 4 itu bereaksi dasbor navigasi bash menumpuk paket tambahan yang 30 00:02:14,300 --> 00:02:15,730 perlu Anda instal. 31 00:02:15,870 --> 00:02:22,020 Jadi begitulah cara bereaksi navigasi perpustakaan ini bekerja Anda membuat apa yang disebut navigator yang pada 32 00:02:22,030 --> 00:02:30,090 akhirnya hanya Anda bisa mengatakan objek benar-benar bereaksi komponen karena akan berubah yang menahan semua konfigurasi navigasi yang menyimpan semua informasi 33 00:02:30,090 --> 00:02:34,860 yang berbeda layar yang Anda miliki dan yang akan melakukan pengangkatan berat 34 00:02:34,860 --> 00:02:40,350 pemuatan layar yang berbeda dan memainkan transisi halus yang bagus untuk beralih dari A 35 00:02:40,350 --> 00:02:42,270 ke B untuk Anda. 36 00:02:42,270 --> 00:02:49,710 Jadi kita perlu mengimpor buat stack navigator dan kemudian kita cukup memanggil itu sekarang membuat stack navigator mengambil setidaknya satu 37 00:02:49,710 --> 00:02:56,130 argumen dan itu adalah objek javascript di mana kita mengkonfigurasi layar yang berbeda kita ingin dapat bergerak 38 00:02:56,220 --> 00:03:02,940 antara sekarang dan aplikasi ini yang saya inginkan untuk memulai pada layar kategori dan jika saya mengetuk kategori 39 00:03:02,940 --> 00:03:09,450 di sana saya ingin pergi ke layar makanan kategori dan jika saya kemudian ketuk resep di sana 40 00:03:09,450 --> 00:03:16,530 pada makanan saya ingin pergi ke layar detail makanan sehingga kita akan membutuhkan ini tiga layar di navigator tumpukan 41 00:03:16,770 --> 00:03:23,610 kami sehingga ini adalah tiga layar yang dapat Anda pindahkan di antaranya dengan menggunakan pola tumpukan ini dengan 42 00:03:23,610 --> 00:03:30,300 mendorong halaman Anda dan membuka halamannya dan mengapa kita tidak perlu favorit dan filter karena filter nantinya akan 43 00:03:30,300 --> 00:03:37,350 ditambahkan dengan bantuan sebuah sidebar akan menjadi alternatif untuk tumpukan ini di sini dan favorit juga sebagai alternatif dari 44 00:03:37,350 --> 00:03:42,960 tumpukan ini kita akan dapat pergi ke sana dengan ketukan nanti tetapi tidak sekarang. 45 00:03:42,960 --> 00:03:48,990 Jadi mari kita mulai dengan navigasi berbasis tumpukan dasar ini di mana kita bisa maju 46 00:03:48,990 --> 00:03:56,850 dan mundur di antara kategori layar Screen makanan dan Anda akan detail layar kami menginformasikan navigasi reaksi tentang tiga layar 47 00:03:57,180 --> 00:04:05,500 ini dengan mendaftarkan mereka sebagai pasangan nilai kunci Anda mengambil pengidentifikasi apa pun nama pilihan Anda untuk kategori contoh tetapi nama 48 00:04:05,530 --> 00:04:11,500 ini terserah Anda karena konvensi nama properti akan dimulai dengan huruf kapital di sini, tetapi 49 00:04:11,500 --> 00:04:14,470 Anda tidak harus melakukannya secara teknis. 50 00:04:14,650 --> 00:04:20,620 Jadi Anda menggunakan pengidentifikasi apa pun yang Anda inginkan sebagai nama properti di objek 51 00:04:20,740 --> 00:04:29,920 ini yang Anda lewati untuk membuat stack navigator dan sekarang nilai dalam bentuk yang paling sederhana hanyalah sebuah penunjuk pada komponen 52 00:04:29,920 --> 00:04:34,690 reaksi yang ingin Anda muat sebagai layar untuk layar ini. 53 00:04:34,690 --> 00:04:43,890 Jadi dalam kasus saya yang akan menjadi layar kategori semua impor ini semua layar kategori impor dari layar 54 00:04:44,760 --> 00:04:51,740 kategori layar saya dapat mengimpor ini karena ini adalah ekspor default saya. 55 00:04:51,940 --> 00:04:59,410 Jadi sekarang kita memetakan dua kategori ini dan ini memungkinkan kita untuk nanti memberi tahu navigasi apakah perpustakaan 56 00:04:59,410 --> 00:05:02,920 kita menggunakan itu harus memuat layar kategori. 57 00:05:02,920 --> 00:05:08,690 Sekarang seperti yang saya katakan ini bukan satu-satunya layar yang saya butuhkan, saya juga ingin memiliki kategori makanan. 58 00:05:08,710 --> 00:05:14,590 Jadi inilah sistem layar kedua Layar ini akan menyajikan semua makanan untuk kategori yang dipilih untuk 59 00:05:15,310 --> 00:05:21,550 itu kami memiliki sejumlah komponen dan itulah layar makanan kategori yang kami siapkan yang kami impor dari 60 00:05:21,550 --> 00:05:29,680 layar makanan kategori layar sehingga kami memetakan tahun ini sekarang dengan cara saya sebutkan bahwa ini adalah bentuk paling sederhana dari pemetaan 61 00:05:29,680 --> 00:05:34,720 hanya memiliki nama properti dan kemudian pointer pada komponen yang ingin Anda muat 62 00:05:35,290 --> 00:05:42,040 Anda juga dapat melewati objek di sini sebagai gantinya dan mengatur properti layar pada objek ini dan kemudian menunjuk 63 00:05:42,100 --> 00:05:44,470 pada komponen yang ingin Anda muat. 64 00:05:44,470 --> 00:05:46,030 Sekarang mengapa Anda melakukan itu. 65 00:05:46,090 --> 00:05:52,540 Karena sekarang Anda juga dapat mengatur konfigurasi tambahan di sini selain untuk layar Anda dapat mengatur beberapa opsi default 66 00:05:52,540 --> 00:05:57,220 untuk layar dan sebagainya, tetapi ini bukan sesuatu yang harus kita khawatirkan sekarang 67 00:05:57,730 --> 00:06:02,740 kita akan benar-benar mengurusnya nanti dalam modul ini hanya sudah ingin menyebutkan bahwa ini 68 00:06:02,740 --> 00:06:08,230 adalah jalan pintas ini adalah bentuk yang lebih lama dari memberi tahu navigasi reaksi layar mana 69 00:06:08,230 --> 00:06:14,170 yang harus dimuat untuk mana pengenal berbicara bahwa kita memerlukan pengidentifikasi ketiga tentu saja dan itu pengidentifikasi yang 70 00:06:14,170 --> 00:06:21,060 harus memuat layar rinci kami saya akan beri nama detail makanan dan saya ingin menunjukkan layar detail makanan saya jadi 71 00:06:21,090 --> 00:06:29,110 saya akan mengimpor layar detail makanan dari Dan sekarang mari kita pergi ke folder layar dan di sana itu layar detail makanan dan lagi 72 00:06:29,150 --> 00:06:31,760 saya akan menggunakan cara pintas di sini. 73 00:06:31,760 --> 00:06:35,830 Kita bisa menggunakan formulir yang lebih panjang tapi saya akan menggunakan pintasan itu tepat di layar detail makanan. 74 00:06:36,710 --> 00:06:40,370 Jadi dengan konfigurasi dasar itu kami memberi tahu reaksi navigasi. 75 00:06:40,370 --> 00:06:49,020 Hei ini adalah layar akan dapat bergerak di antara sekarang tetapi data saja tidak akan banyak. 76 00:06:49,030 --> 00:06:49,540 Mengapa. 77 00:06:49,840 --> 00:06:57,600 Karena kita membuat navigator tumpukan itu tetapi kita tidak melakukan apa-apa dengannya, jadi mari kita ubah 78 00:06:58,080 --> 00:07:05,150 ini membuat navigator tumpukan benar-benar mengembalikan wadah navigasi dan yang ternyata menjadi komponen reaksi. 79 00:07:05,150 --> 00:07:07,070 Semuanya dinamai sebagai navigator makan. 80 00:07:07,080 --> 00:07:10,620 Kedengarannya seperti nama yang pas karena itulah yang kita miliki pada akhirnya di sini. 81 00:07:10,620 --> 00:07:15,570 Dan sekarang kita menyimpan komponen reaksi yang dibuat oleh stack Navigator yang 82 00:07:15,570 --> 00:07:22,380 pada dasarnya adalah komponen reaksi dengan semua pengangkatan berat memuat layar yang berbeda dan memainkan animasi komponen 83 00:07:22,380 --> 00:07:25,160 reaksi ini disimpan dalam navigator makanan. 84 00:07:25,170 --> 00:07:32,830 Sekarang kita dapat mengekspor navigator makanan di sini dan mencoba menggunakannya seperti ini dan menangkap kita untuk merendernya di 85 00:07:32,830 --> 00:07:38,410 layar dan melihat apa yang terjadi tetapi sebenarnya bereaksi navigasi bekerja sedikit berbeda. 86 00:07:38,470 --> 00:07:45,350 Anda juga perlu membuat wadah aplikasi di wadah aplikasi ini yang harus Anda bungkus dengan rute Anda. 87 00:07:45,440 --> 00:07:50,370 Jadi navigator utama Anda dalam hal ini kami hanya memiliki satu, kami hanya perlu menumpuk Navigator. 88 00:07:50,390 --> 00:07:51,900 Jadi mari kita selesaikan ini dengannya. 89 00:07:51,980 --> 00:07:57,740 Mari kita bungkus navigasi makanan atau membuatnya kembali dengan memanggil membuat wadah aplikasi dan kemudian 90 00:07:57,740 --> 00:08:01,850 hanya melewati Navigator makanan sebagai argumen membuat wadah aplikasi. 91 00:08:01,940 --> 00:08:03,880 Juga membuat wadah navigasi. 92 00:08:03,950 --> 00:08:05,670 Jadi juga memberi Anda komponen reaksi. 93 00:08:05,750 --> 00:08:08,120 Tetapi ini sebenarnya bukan komponen reaksi. 94 00:08:08,120 --> 00:08:15,890 Anda harus menggunakan kode ASX Anda karena sekarang ini memiliki semua metadata tentang navigasi secara umum tentang 95 00:08:15,890 --> 00:08:17,930 reaksi navigasi dan sebagainya. 96 00:08:17,930 --> 00:08:24,680 Jadi ini hanyalah sebuah pola yang Anda butuhkan untuk membungkus rute Anda dengan navigator Anda yang paling penting dengan itu dan menggunakan komponen 97 00:08:24,680 --> 00:08:30,260 reaksi balik ini dalam kode J Anda adalah X maka apakah pada dasarnya pengaturan yang akan selalu Anda miliki 98 00:08:30,260 --> 00:08:35,570 ketika bekerja dengan navigasi reaksi nanti Anda juga akan belajar cara menggunakan banyak navigator dalam satu aplikasi. 99 00:08:35,570 --> 00:08:41,870 Ngomong-ngomong untuk saat ini kami memiliki yang ini dan kami mengekspor komponen ini yang akhirnya dibuat. 100 00:08:41,870 --> 00:08:44,680 Jadi sekarang dalam pengejaran aplikasi kita dapat mulai menggunakan komponen ini. 101 00:08:44,720 --> 00:08:56,720 Jadi apakah kita melihat sesuatu di layar untuk itu mari kita pergi ke sana dan mengimpor navigator makanan dari navigator 102 00:08:56,930 --> 00:08:58,640 makanan makan. 103 00:08:58,640 --> 00:09:04,040 Sekarang seperti yang saya sebutkan navigator makan sekarang hanya komponen reaksi sehingga pada akhirnya apa yang bisa kita lakukan 104 00:09:04,040 --> 00:09:08,390 adalah kita bisa mengembalikan ini alih-alih mengembalikan pandangan kita dengan teks kita di sini. 105 00:09:08,420 --> 00:09:13,550 Saya akan mengembalikan navigator makanan dan karena ini adalah komponen reaksi, saya dapat naik 106 00:09:13,550 --> 00:09:18,020 kode J Isaac seperti ini dengan Ayah jika kami menyimpan ini. 107 00:09:18,160 --> 00:09:20,890 Kami melihat aplikasi kami saat memuat ulang 108 00:09:24,290 --> 00:09:27,040 dan Anda mungkin perlu memuat ulang aplikasi secara manual. 109 00:09:27,040 --> 00:09:33,490 Anda harus melihat layar kategori sekali dalam memuat ulang dan ini tentu saja sangat besar karena ini 110 00:09:34,000 --> 00:09:35,360 berarti ini berfungsi. 111 00:09:35,440 --> 00:09:41,710 Sekarang harap juga perhatikan bahwa Anda semua secara default mendapatkan tajuk bagus yang memiliki tampilan platform default 112 00:09:41,710 --> 00:09:49,180 untuk IO s. Flat bersih ini memiliki garis tipis di bawahnya untuk Android. Ini lebih berdimensi gratis karena semuanya memiliki 113 00:09:49,180 --> 00:09:50,720 sedikit bayangan drop. 114 00:09:50,770 --> 00:09:55,600 Sekarang tentu saja itu kehilangan judul dan Anda akan belajar bagaimana kita dapat menambahkan 115 00:09:55,600 --> 00:10:01,450 satu di modul ini, tetapi kita mendapatkan ini di luar kotak dan ini secara otomatis semua menghormati setiap takik 116 00:10:01,450 --> 00:10:07,060 Anda mungkin harus tinggal sejauh ini yang Anda miliki di sini sehingga secara otomatis menggunakan tampilan area aman 117 00:10:07,060 --> 00:10:12,520 dan itulah semua yang saya sebutkan dalam modul kursus terakhir saat Anda memiliki komponen ini dan Anda 118 00:10:12,520 --> 00:10:19,360 kadang-kadang membutuhkannya misalnya ketika membangun aplikasi dengan navigasi reaksi bereaksi navigasi sudah membungkus pandangan Anda ke tampilan area aman setidaknya itu akan 119 00:10:19,360 --> 00:10:24,430 dilakukan banyak pekerjaan yang harus Anda lakukan jika tidak, itu akan memastikan bahwa tajuk Anda terlihat 120 00:10:24,430 --> 00:10:29,890 bagus dan itu adalah hal yang besar karena secara manual membuat tajuk yang terlihat bagus di semua 121 00:10:29,890 --> 00:10:31,650 perangkat sebenarnya cukup banyak pekerjaan. 122 00:10:31,840 --> 00:10:33,210 Jadi itulah yang kita dapatkan di sini. 123 00:10:33,220 --> 00:10:36,550 Pertanyaan yang jelas sekarang adalah bagaimana kita bisa menjangkau layar kita yang lain.