1 00:00:02,120 --> 00:00:07,100 Jadi saya akan pergi ke layar ikhtisar produk karena sebelum saya menambahkan navigator, 2 00:00:07,100 --> 00:00:09,590 saya ingin setidaknya dapat melihat 3 00:00:09,590 --> 00:00:18,380 sesuatu pada layar itu dan karena itu di sini, kita sekarang perlu mengimpor pemilih penggunaan dari React Redux karena itu akan memungkinkan kita 4 00:00:18,380 --> 00:00:22,630 untuk masuk ke toko Redux dan dapatkan produk kami dari sana. 5 00:00:22,640 --> 00:00:28,790 Jadi di sini pada akhirnya apa yang bisa kita lakukan adalah kita bisa mendapatkan produk kita dan menyimpannya 6 00:00:28,790 --> 00:00:30,800 dalam produk yang konstan dengan memanggil 7 00:00:30,800 --> 00:00:36,950 selektor penggunaan dan seperti yang Anda pelajari dalam modul sebelumnya tentang manajemen negara di Redux, selektor penggunaan 8 00:00:36,950 --> 00:00:44,060 mengambil fungsi yang secara otomatis menerima status , negara Redux sebagai input dan yang kemudian mengembalikan data apa pun yang ingin 9 00:00:44,060 --> 00:00:45,470 Anda dapatkan dari 10 00:00:45,770 --> 00:00:47,360 sana dan di negara 11 00:00:47,360 --> 00:00:53,780 Redux, saya ingin memanfaatkan potongan produk saya dan Anda harus menggunakan nama yang Anda gunakan di sini dalam reduksi 12 00:00:53,990 --> 00:00:57,990 gabungan untuk mendapatkan ini menyatakan, data dikelola dengan produk untuk pengguna. 13 00:00:58,010 --> 00:01:05,180 Jadi di sini saya akan mengatakan produk negara dan sekarang dalam potongan negara kita, saya ingin mendapatkan produk yang 14 00:01:06,220 --> 00:01:10,270 tersedia, jadi mari kita dapatkan. produk yang tersedia di sini dan 15 00:01:10,270 --> 00:01:15,460 ini adalah sintaks fungsi panah pendek ini di mana bagian di sebelah kanan panah 16 00:01:15,460 --> 00:01:17,020 secara otomatis dikembalikan. 17 00:01:17,020 --> 00:01:21,870 Jadi itulah yang sekarang disimpan dalam produk dan oleh karena itu di sini pada 18 00:01:21,880 --> 00:01:28,870 daftar datar, kita tentu saja dapat mengatur prop data sama dengan produk kami di sini yang kami pilih karena itu 19 00:01:28,870 --> 00:01:31,790 akan menjadi array dan itulah yang dibutuhkan data. 20 00:01:31,810 --> 00:01:36,730 Saya juga akan menambahkan ekstraktor utama di sini, tergantung pada versi Bereaksi Asli yang Anda gunakan, Anda 21 00:01:36,790 --> 00:01:43,450 tidak akan memerlukan ini karena setiap produk di aplikasi kami memiliki ID dan versi daftar datar yang lebih baru juga mencari ID dan bukan 22 00:01:43,450 --> 00:01:49,900 hanya untuk kunci tetapi jika Anda bekerja dengan versi yang lebih lama, maka Anda perlu mengatur fungsi ekstraktor kunci ini dan ini mengambil 23 00:01:49,900 --> 00:01:51,940 fungsi yang memberi Anda item yang dilihatnya 24 00:01:51,940 --> 00:01:56,230 dan Anda perlu memberi tahu apa yang harus menjadi kunci unik Anda pada itu item 25 00:01:56,230 --> 00:02:00,100 dan tentu saja itu item. id, sekali lagi, 26 00:02:00,160 --> 00:02:07,410 versi asli dari Bereaksi Asli tidak memerlukan itu. Sekarang dengan itu, kita juga perlu menyediakan prop 27 00:02:07,410 --> 00:02:14,720 item render yang menunjuk pada fungsi yang membuat item daftar yang berbeda dan di sini, saya akan mulai 28 00:02:14,720 --> 00:02:21,650 sederhana dan kami akan memperbaikinya nanti dan untuk saat ini, saya hanya akan mengimpor komponen teks dari 29 00:02:21,650 --> 00:02:25,590 Bereaksi Asli dan output judul produk dalam komponen teks. 30 00:02:25,610 --> 00:02:31,580 Jadi di sini, kita mendapatkan data item kita dan nilai balik fungsi yang harus kita berikan 31 00:02:31,580 --> 00:02:33,580 untuk membuat item harus mengembalikan 32 00:02:33,900 --> 00:02:35,780 elemen jsx pada akhirnya. 33 00:02:35,810 --> 00:02:42,890 Jadi di sini saya akan mengembalikan elemen teks dan di sana, output itemData. barang. judul dan saya bisa melakukan ini karena 34 00:02:42,890 --> 00:02:48,680 data barang diterima oleh React Native, ini memiliki item prop, itu juga sesuatu yang React Native memberi Anda 35 00:02:48,680 --> 00:02:53,000 dan setiap item di sini tentu saja hanya satu item dalam produk kami, jadi 36 00:02:53,000 --> 00:02:58,640 karena itu dari jenis ini data dan oleh karena itu memiliki prop judul karena tentu saja itulah yang 37 00:02:58,640 --> 00:02:59,830 saya tetapkan di 38 00:02:59,960 --> 00:03:05,300 sini, jadi kami akan memiliki prop judul di sini yang dapat saya hasilkan dan tentu saja, ini 39 00:03:05,300 --> 00:03:10,100 bukan bentuk akhir dari bagaimana sebuah produk seharusnya terlihat seperti di daftar tapi itu yang 40 00:03:10,100 --> 00:03:16,900 saya gunakan untuk memulai sehingga kita melihat sesuatu di layar. Dengan itu, berbicara tentang layar, tentu saja saatnya untuk mengatur 41 00:03:16,900 --> 00:03:20,920 navigator sehingga kita benar-benar dapat melihat sesuatu di layar dan kita memiliki layar. 42 00:03:21,160 --> 00:03:28,240 Karenanya di sini di folder navigasi, saya akan menambahkan ShopNavigator saya. File js dan di sana, kita akan menambahkan 43 00:03:28,240 --> 00:03:36,020 banyak navigasi di seluruh modul ini, jadi kita pasti perlu mengimpor dari Navigasi Bereaksi dan saya tentu saja akan 44 00:03:36,050 --> 00:03:42,470 mulai sederhana dengan navigator tumpukan normal yang dapat kita buat dengan bantuan buat fungsi navigator 45 00:03:42,470 --> 00:03:48,740 tumpukan dan kemudian kita akan membuatnya di sini dan saya akan menamainya navigator produk, itulah 46 00:03:48,860 --> 00:03:50,280 yang saya simpan di 47 00:03:50,420 --> 00:03:51,700 sini, hasil 48 00:03:51,710 --> 00:03:57,320 membuat stack navigator dan hasilnya adalah komponen Bereaksi jika Anda ingat dan jika 49 00:03:57,320 --> 00:04:03,800 Anda juga ingat , buat stack navigator mengambil objek Javascript sebagai argumen pertama di mana kita 50 00:04:03,860 --> 00:04:08,710 memetakan pengidentifikasi layar untuk Bereaksi komponen yang harus dimuat sebagai layar. 51 00:04:08,810 --> 00:04:16,040 Jadi di sini tentu saja saya akan mulai dengan layar ikhtisar produk dan saya mengimpornya dari folder layar 52 00:04:16,040 --> 00:04:23,930 dan di sana dari bagian toko dan di sana dari file layar ikhtisar produk dan oleh karena itu hal pertama 53 00:04:24,020 --> 00:04:26,120 yang saya ingin petakan dalam navigator 54 00:04:26,120 --> 00:04:33,630 tumpukan ini adalah produk tinjauan umum atau bagaimana pun Anda ingin memberi nama ini, yang dipetakan ke layar tinjauan 55 00:04:33,640 --> 00:04:34,800 umum produk. 56 00:04:34,790 --> 00:04:41,510 Sekarang tentu saja untuk navigator stack ini yang pada akhirnya akan memiliki beberapa layar, saya juga akan memberikan argumen 57 00:04:41,510 --> 00:04:46,790 kedua untuk membuat stack navigator yang merupakan objek yang memungkinkan kita untuk mengkonfigurasi seluruh navigator 58 00:04:47,180 --> 00:04:52,550 dan di sana kita dapat misalnya mengatur opsi navigasi default untuk setiap layar dan di 59 00:04:52,550 --> 00:04:56,660 sana, saya ingin mengatur warna latar belakang header saya dan sebagainya. 60 00:04:57,350 --> 00:05:05,060 Jadi di sini saya akan mengatur objek Javascript di mana saya dapat mengatur gaya header ke objek Javascript lain di mana kita dapat 61 00:05:05,060 --> 00:05:09,620 mengatur warna latar belakang ke warna pilihan Anda dan di situlah folder konstanta akan 62 00:05:09,620 --> 00:05:16,000 ikut bermain, di mana saya akan menambahkan sebuah warna. file js, di mana saya hanya ingin mengekspor objek Javascript 63 00:05:16,010 --> 00:05:23,330 default dengan warna primer dan warna aksen dan Anda dapat memberi nama tombol ini apa pun yang Anda inginkan dan sekarang saya memilih 64 00:05:23,330 --> 00:05:25,760 beberapa warna yang bagus yang ingin 65 00:05:25,760 --> 00:05:30,730 saya gunakan di sini tetapi Anda dapat menggunakan warna apa saja yang Anda inginkan ingin. 66 00:05:30,920 --> 00:05:42,890 Warna utama saya akan memiliki kita kode hex # c2185b dan warna aksen memiliki 67 00:05:42,890 --> 00:05:46,940 kode hex # ffc107. 68 00:05:47,130 --> 00:05:52,920 Sekarang karena itu kembali di navigator toko, kita dapat mengimpor dari folder konstanta itu, masih dari warna yang 69 00:05:54,020 --> 00:06:00,230 kita temukan di folder konstanta seperti ini dan kemudian di sini, warna latar yang akan saya atur untuk gaya 70 00:06:00,230 --> 00:06:04,240 header di sini adalah warna. utama. 71 00:06:04,250 --> 00:06:07,470 Sekarang dengan yang ditambahkan, saya juga 72 00:06:07,530 --> 00:06:15,630 akan menambahkan warna tajuk warna yang mewarnai teks judul misalnya dan saya akan mengatur ini menjadi 73 00:06:16,470 --> 00:06:24,900 putih karena warna primer yang saya atur ini seperti warna merah muda-kemerahan yang cukup kuat dan oleh karena 74 00:06:24,900 --> 00:06:33,080 itu putih warna yang harus kita gunakan sehingga mudah dibaca dan saya benar-benar ingin berbeda tentang bagaimana 75 00:06:33,080 --> 00:06:37,110 tampilan header berdasarkan pada platform yang kita jalankan. 76 00:06:37,160 --> 00:06:44,450 Jadi sudah waktunya untuk mengimpor platform dari React Native dan satu catatan di sini, dalam aplikasi praktik ini, saya 77 00:06:44,450 --> 00:06:49,700 sebenarnya tidak akan terlalu fokus pada perbedaan platform dan desain responsif, saya akan melakukannya 78 00:06:49,700 --> 00:06:55,160 hingga batas tertentu sehingga ada beberapa perbedaan mendasar antara platform yang berbeda dan bahwa 79 00:06:55,190 --> 00:06:58,580 aplikasi terlihat bagus pada ukuran perangkat yang 80 00:06:58,790 --> 00:07:02,630 berbeda tetapi saya tidak akan mengujinya pada berbagai ukuran perangkat. 81 00:07:02,660 --> 00:07:06,910 Anda telah mempelajari semua yang Anda butuhkan untuk menjadikannya sebagai responsif mungkin, jadi 82 00:07:06,980 --> 00:07:12,230 pasti merasa bebas untuk selalu men-tweak ini lebih dari yang saya lakukan di sini di modul ini. 83 00:07:12,230 --> 00:07:16,710 Pada akhirnya saya hanya ingin memastikan bahwa modul ini tidak memakan waktu ratusan jam, jadi 84 00:07:16,730 --> 00:07:19,250 karena itu saya akan menjaga ini seminimal mungkin. 85 00:07:19,250 --> 00:07:24,080 Dengan set itu, platform di sini nampaknya penting bagi saya karena saya benar-benar ingin 86 00:07:24,440 --> 00:07:28,790 memiliki tampilan berbeda pada header berdasarkan apakah kita menjalankan iOS atau Android. 87 00:07:28,790 --> 00:07:34,940 Jadi warna latar sebenarnya bukan selalu warna utama tetapi sebagai gantinya saya hanya akan mengatur ini 88 00:07:34,940 --> 00:07:38,320 jika sistem operasi yang kita jalankan adalah Android, kalau 89 00:07:38,360 --> 00:07:43,820 tidak saya akan mengatur warna latar belakang ke string kosong yang berarti default akan diambil 90 00:07:43,820 --> 00:07:45,540 dan oleh karena 91 00:07:45,570 --> 00:07:47,420 itu untuk warna nada tajuk, 92 00:07:47,450 --> 00:07:54,780 ini juga seharusnya hanya putih jika kita menggunakan Android, kalau tidak saya tidak akan mengaturnya ke string kosong tetapi sebaliknya, 93 00:07:54,780 --> 00:07:57,720 saya ingin menggunakan warna primer sebagai warna teks 94 00:07:57,720 --> 00:08:04,150 pada iOS, jadi jika kami tidak di Android. Dengan itu, navigator produk sudah diatur. 95 00:08:04,200 --> 00:08:09,240 Sekarang seperti yang Anda pelajari di modul navigasi, Anda tidak mengekspor navigator ini, 96 00:08:09,240 --> 00:08:14,940 sebaliknya Anda membungkusnya dalam wadah aplikasi yang Anda buat dengan fungsi membuat wadah aplikasi yang 97 00:08:14,940 --> 00:08:16,970 Anda dapatkan dari Bereaksi navigasi. 98 00:08:16,980 --> 00:08:24,510 Jadi di sini kita sekarang dapat mengekspor default membuat wadah aplikasi dan mengirimkan navigator produk, seperti ini. 99 00:08:24,510 --> 00:08:27,510 Ini sekarang navigasi ekspor yang diatur dan inilah yang sekarang dapat 100 00:08:27,630 --> 00:08:30,240 kita gunakan di aplikasi. js. 101 00:08:30,510 --> 00:08:37,260 Jadi dalam aplikasi. js, kita sekarang dapat mengimpor navigator toko kami 102 00:08:39,770 --> 00:08:46,700 dari navigasi, navigator toko dan itulah yang sekarang saya gunakan di dalam tag penyedia saya di 103 00:08:46,700 --> 00:08:52,670 sini, jadi navigator toko seperti ini. Ini juga berarti bahwa kita dapat menghilangkan impor Bereaksi Asli 104 00:08:52,700 --> 00:09:00,020 ini karena kita tidak menggunakan komponen Bereaksi Asli ini dalam komponen ini lagi. Dengan semua pekerjaan itu, kita sekarang 105 00:09:00,020 --> 00:09:07,130 seharusnya dapat benar-benar menjalankan aplikasi kita dan mudah-mudahan, mendarat di layar ikhtisar produk tempat 106 00:09:07,130 --> 00:09:12,390 kita melihat daftar judul produk yang tidak dilacak yang mendasar. 107 00:09:12,470 --> 00:09:17,840 Jadi jika saya menyimpannya sekarang, simpan semua perubahan ini dan Anda memastikan bahwa Anda memiliki 108 00:09:17,840 --> 00:09:20,520 npm mulai berjalan dan Anda memiliki emulator 109 00:09:20,870 --> 00:09:26,980 dan berjalan di mana Anda memuat ini, saya mendapatkan kesalahan bahwa objek bukan konstruktor, mengevaluasi standar produk baru. 110 00:09:26,980 --> 00:09:35,270 Masalahnya adalah bahwa dalam folder model saya di sini, saya lupa untuk mengekspor kelas produk saya sebagai default. 111 00:09:35,300 --> 00:09:36,970 Itu tentu saja perlu ditambahkan di 112 00:09:36,980 --> 00:09:39,250 sini, jika tidak Anda tidak dapat mengimpor dari 113 00:09:39,290 --> 00:09:40,640 file ini, masuk akal. 114 00:09:40,640 --> 00:09:42,670 Jadi sekarang ini berfungsi dan sekarang 115 00:09:42,740 --> 00:09:44,780 memang di sini, saya melihat judul produk saya. 116 00:09:44,780 --> 00:09:46,420 Kami juga melihat tajuk yang berbeda, 117 00:09:46,430 --> 00:09:51,500 yang tidak kami lihat adalah tajuk karena saya belum menambahkannya. Karenanya di layar ikhtisar produk, tentu 118 00:09:51,500 --> 00:09:57,770 saja kita dapat menambahkan opsi navigasi khusus layar saja yang akan digabungkan dengan opsi navigasi 119 00:09:57,770 --> 00:10:04,490 default yang kita atur langsung pada navigator dengan menggunakan layar ikhtisar produk, konstanta kita di sini 120 00:10:04,490 --> 00:10:10,050 yang memegang komponen kita dan menambahkan properti opsi navigasi dan di sini kita 121 00:10:10,070 --> 00:10:17,870 dapat menggunakan opsi navigasi statis untuk saat ini, menambahkan judul header dan mengatur ini untuk semua produk misalnya dan 122 00:10:17,870 --> 00:10:19,630 jika kita sekarang 123 00:10:19,810 --> 00:10:24,470 menyimpan ini, kita melihat semua produk di sini di header. 124 00:10:24,680 --> 00:10:28,870 Jadi sekarang ini benar-benar terlihat layak, kita dapat melihat produk kami. 125 00:10:28,970 --> 00:10:32,720 Tentu saja produk-produk ini tidak benar-benar terlihat seperti seharusnya, jadi 126 00:10:32,720 --> 00:10:38,810 langkah selanjutnya adalah memastikan bahwa di sini kita benar-benar mendapatkan tampilan yang kita butuhkan dalam aplikasi ini.