1
00:00:02,190 --> 00:00:05,630
Mari kita bekerja pada layar pesanan sebelum kita menambahkan navigasi, kita tidak

2
00:00:05,670 --> 00:00:07,920
perlu menyelesaikannya tetapi saya ingin dapat melihatnya.

3
00:00:08,700 --> 00:00:15,300
Jadi di sana, saya mengimpor React dari React sehingga saya dapat membangun komponen React yang valid, mengimpor sesuatu dari

4
00:00:15,300 --> 00:00:20,060
React Native seperti biasa dan sesuatu juga sudah biasa kita gunakan, kan?

5
00:00:20,060 --> 00:00:21,810
Tidak pernah mengejutkan.

6
00:00:21,840 --> 00:00:23,050
Kami akan

7
00:00:23,370 --> 00:00:32,880
memerlukan tampilan, kami mungkin perlu daftar datar karena kami akan memiliki beberapa pesanan berpotensi, jumlah yang tak

8
00:00:32,880 --> 00:00:43,670
terbatas dan saya ingin dapat membuat itu dan dengan itu di sini, kami dapat membangun layar pesanan kami seperti ini.

9
00:00:43,790 --> 00:00:53,710
Saya juga akan mengekspor ini dan penataan gaya seharusnya tidak diperlukan di sini, sebenarnya kita bahkan tidak perlu melihat di sini

10
00:00:53,770 --> 00:01:01,570
karena saya hanya ingin menampilkan daftar pesanan saya. Jadi tentu saja data yang kita butuhkan di sini

11
00:01:01,720 --> 00:01:04,350
akan berasal dari Redux, jadi

12
00:01:04,360 --> 00:01:10,600
kita harus mengimpor pemilih penggunaan dari React Redux yang memungkinkan kita untuk memasuki toko Redux.

13
00:01:11,350 --> 00:01:19,330
Jadi di sini, kita bisa mendapatkan pesanan kami dengan menggunakan selector penggunaan dan gunakan selector sekarang poin di negara. pesanan dan tentu saja adalah pengidentifikasi saya ditugaskan di

14
00:01:19,390 --> 00:01:25,740
sini dalam pesanan reduksi gabungan di sini, ini memberi kita akses ke irisan negara yang

15
00:01:25,810 --> 00:01:29,680
dikelola oleh peredam pesanan dan di sana,

16
00:01:29,680 --> 00:01:34,040
kami memiliki properti pesanan lain yang menyimpan berbagai pesanan sebenarnya.

17
00:01:34,060 --> 00:01:37,860
Jadi di sini saya perlu mengakses negara. pesanan. pesanan pada akhirnya,

18
00:01:37,870 --> 00:01:41,070
yang memberi saya pesanan saya yang disimpan di Redux.

19
00:01:41,110 --> 00:01:48,640
Sekarang di sini, kita hanya perlu mengembalikan daftar datar kita dan ini menerima pesanan

20
00:01:48,640 --> 00:01:56,640
yang harus berupa array dan sebagai data. Sekarang ekstraktor kunci tidak diperlukan dalam versi React Native yang lebih baru karena

21
00:01:56,640 --> 00:02:01,520
setiap pesanan jika Anda melihat model memiliki ID dan versi React yang lebih baru harus

22
00:02:02,010 --> 00:02:09,780
mencarinya tetapi agar aman, saya akan menambahkannya di sini dan membuat item sekarang tentu saja harus memiliki fungsi yang menerima data item dan pada akhirnya

23
00:02:09,780 --> 00:02:16,440
mengembalikan apa pun yang ingin kami render per pesanan. Sekarang item pesanan akan lebih kompleks di masa depan, untuk saat

24
00:02:16,440 --> 00:02:17,010
ini

25
00:02:17,010 --> 00:02:21,990
saya hanya akan menampilkan beberapa teks, lagi sehingga kita dengan cepat memiliki sesuatu di layar yang dapat

26
00:02:21,990 --> 00:02:23,670
kita lihat sebelum kita memperbaiki ini.

27
00:02:24,000 --> 00:02:27,650
Teks di sini untuk item yang diberikan bisa jadi dan

28
00:02:27,660 --> 00:02:32,590
sekarang mari kita lihat urutannya, di sana kita memiliki ID, kita memiliki item yang

29
00:02:32,580 --> 00:02:32,990
merupakan

30
00:02:33,000 --> 00:02:40,150
daftar lain, jadi hal termudah untuk menghasilkan adalah jumlah. Jadi di sini saya hanya akan menampilkan jumlah total

31
00:02:41,050 --> 00:02:44,380
properti yang pesanan saya miliki di sini.

32
00:02:44,430 --> 00:02:46,050
Inilah yang saya tampilkan

33
00:02:46,050 --> 00:02:48,360
dalam daftar datar, sekarang kami memiliki

34
00:02:48,360 --> 00:02:55,550
layar pesanan dasar, tentu saja kami sekarang harus dapat mencapainya. Jadi mari kita pergi ke navigator toko dan

35
00:02:55,610 --> 00:03:04,740
mengimpor layar pesanan di sini, layar pesanan dari folder layar, dari layar pesanan toko dan sekarang di sini yang penting adalah

36
00:03:05,180 --> 00:03:11,630
saya tidak ingin menambahkannya ke navigator tumpukan ini karena ini bukan bagian dari ini stack,

37
00:03:11,630 --> 00:03:12,590
sebagai

38
00:03:12,590 --> 00:03:16,490
gantinya saya ingin mencapainya dengan menu, dengan menu samping.

39
00:03:16,730 --> 00:03:19,840
Jadi kita perlu membangun navigator laci.

40
00:03:19,910 --> 00:03:24,430
Tentu saja Anda juga dapat bekerja dengan tab jika Anda suka ini, tetapi saya ingin bekerja dengan laci

41
00:03:24,500 --> 00:03:26,720
di sini, jadi kami membutuhkan navigator laci itu.

42
00:03:26,750 --> 00:03:31,760
Sekarang layar pesanan, meskipun itu akan menjadi satu-satunya item, itu harus di tumpukan sendiri

43
00:03:31,850 --> 00:03:34,490
sehingga kami juga memiliki header di sana.

44
00:03:34,490 --> 00:03:45,550
Oleh karena itu, saya akan membuat navigator pesanan baru di sini di mana saya membuat navigator tumpukan lain dan di sana, satu-satunya pemetaan yang saya butuhkan adalah pesanan yang

45
00:03:45,550 --> 00:03:53,740
menunjuk pada layar pesanan, argumen kedua di sini masih harus mengatur beberapa opsi navigasi default dan saya akan menggunakan opsi yang

46
00:03:53,740 --> 00:03:57,640
sama seperti yang saya lakukan di sini, maka saya akan

47
00:03:57,970 --> 00:04:04,660
benar-benar mengambil objek ini, hentikan itu dari sini dan simpan dalam konstanta terpisah, opsi nav default, seperti

48
00:04:04,700 --> 00:04:07,170
ini, ini adalah pola saya

49
00:04:08,550 --> 00:04:13,590
juga sudah digunakan dalam modul navigasi karena sekarang kita dapat menggunakan konstanta ini

50
00:04:13,590 --> 00:04:19,830
di sini di navigator produk untuk opsi navigasi default dan juga di sini di navigator pesanan.

51
00:04:19,830 --> 00:04:26,760
Sekarang tentu saja tujuannya adalah untuk membuat navigator laci yang akan saya beri nama navigator toko secara keseluruhan

52
00:04:26,760 --> 00:04:29,160
karena menggabungkan berbagai fitur toko

53
00:04:29,160 --> 00:04:36,260
yang bisa Anda katakan dengan bantuan membuat laci navigator. Di sana saya sekarang ingin menggabungkan

54
00:04:36,270 --> 00:04:40,410
dua tumpukan ini, navigator produk dan navigator pesanan

55
00:04:40,410 --> 00:04:48,300
ke dalamnya, jadi di sini kita membutuhkan produk dengan navigator produk dan pesanan yang menunjuk

56
00:04:48,330 --> 00:04:56,160
pada navigator pesanan, sehingga pada navigator tumpukan ini. Saya juga ingin mengkonfigurasi opsi konten saya di

57
00:04:56,160 --> 00:05:02,280
sana di laci, ini memungkinkan saya untuk misalnya mengatur warna warna item ketika mereka dipilih

58
00:05:02,280 --> 00:05:11,680
dan di sana saya ingin mengatur warna warna aktif ke Warna. primer sehingga diwarnai dengan warna primer jika dipilih.

59
00:05:11,710 --> 00:05:17,710
Sekarang navigator toko yang harus dikembalikan ke sini. Ini saja tidak akan berhasil tetapi ini adalah langkah

60
00:05:17,710 --> 00:05:18,680
pertama, sekarang

61
00:05:18,730 --> 00:05:25,870
sebelum kita menambahkan tombol menu, mari kita pergi ke layar pesanan dan sebenarnya ada menambahkan judul, jadi saya akan menambahkan opsi navigasi

62
00:05:25,900 --> 00:05:28,630
di sana, mengatur ini ke objek, saat ini kami

63
00:05:28,630 --> 00:05:29,940
tidak memerlukan opsi dinamis

64
00:05:29,950 --> 00:05:35,680
di sini karena saya hanya ingin mengatur judul tajuk untuk pesanan Anda dan sekarang saya memikirkannya, kami juga

65
00:05:35,680 --> 00:05:36,290
harus

66
00:05:37,060 --> 00:05:38,620
menambahkan ini di layar kereta

67
00:05:38,710 --> 00:05:42,670
di mana saya belum melakukan ini. Di sana saya

68
00:05:42,670 --> 00:05:48,520
juga ingin mengatur ini di layar keranjang, mengatur ini ke keranjang Anda.

69
00:05:48,520 --> 00:05:51,200
Jadi ini sekarang di opsi navigasi layar kereta,

70
00:05:51,220 --> 00:05:57,270
ini ada di layar perintah atau navigator ini sudah diatur. Dengan itu semua diatur, kita perlu menambahkan tombol

71
00:05:57,280 --> 00:06:04,000
menu ini, ikon hamburger ini misalnya pada layar gambaran umum produk di mana saya ingin dapat membuka

72
00:06:04,000 --> 00:06:09,220
laci dan pergi ke pesanan saya. Sekarang untuk menambahkannya di sana, mari kita

73
00:06:09,220 --> 00:06:13,780
pergi ke opsi navigasi layar ikhtisar produk yang sudah dinamis yang

74
00:06:13,780 --> 00:06:14,550
baik

75
00:06:14,860 --> 00:06:21,070
dan kemudian selain menambahkan header tepat untuk ikon keranjang ini, mari kita tambahkan headerLeft dan headerLeft

76
00:06:21,070 --> 00:06:29,100
harus menahan tombol header juga tentu saja tetapi ada , itu akan menjadi item menu saya, jadi saya akan menamainya seperti

77
00:06:29,220 --> 00:06:37,170
itu dan di sana, saya ingin menggunakan menu md atau menu ios tergantung pada platform yang kita jalankan dan saya

78
00:06:37,170 --> 00:06:38,910
ingin menavigasi tentu saja

79
00:06:38,920 --> 00:06:46,150
di mana saja, alih-alih dengan navigasi menopang sini jadi untuk mengatakan, saya ingin memanggil toggle drawer yang akan

80
00:06:46,160 --> 00:06:48,950
membuka laci samping. Sekarang pengaturan yang

81
00:06:48,950 --> 00:06:54,920
sama dengan cara juga diperlukan di layar pesanan sehingga kita dapat meninggalkan layar itu.

82
00:06:55,700 --> 00:07:01,820
Jadi sebenarnya di sini, kita akan memerlukan pengaturan dinamis dari opsi navigasi di mana kita

83
00:07:01,820 --> 00:07:09,020
memiliki fungsi di sini di mana kita mengembalikan objek konfigurasi kita sehingga di sana, kita juga dapat menambahkan

84
00:07:09,020 --> 00:07:15,170
headerLeft dengan tombol header, dengan menu kita yang mengganti laci yang bergantung pada data nav

85
00:07:15,170 --> 00:07:22,910
di sini dan tentu saja untuk itu, kita perlu mengimpor tombol tajuk, tombol tajuk dan item, jadi pada layar ikhtisar

86
00:07:22,910 --> 00:07:25,700
produk pada akhirnya, saya perlu mengimpor

87
00:07:25,700 --> 00:07:30,860
hal-hal ini di sini, dua baris ini perlu ditambahkan ke layar pesanan juga.

88
00:07:30,860 --> 00:07:32,700
Jadi di sana, izinkan

89
00:07:32,840 --> 00:07:39,020
saya menambahkannya, menambahkan tombol tajuk dan impor item dari Bereaksi tombol tajuk navigasi dan

90
00:07:39,020 --> 00:07:45,300
tombol tajuk impor dari komponen khusus kami. Sekarang dengan itu, jika kita menyimpan ini, kita harus memiliki

91
00:07:45,300 --> 00:07:52,410
tombol menu di sini dan kita lakukan, itu membuka laci, kita dapat pergi ke pesanan dan saya mendapatkan kesalahan di sini karena

92
00:07:52,890 --> 00:07:55,560
di layar pesanan, tentu saja saya menggunakan

93
00:07:55,560 --> 00:07:58,400
platform API jadi kita harus mengimpornya di sana, mari

94
00:07:58,400 --> 00:08:08,170
kita lakukan itu, mari kita tambahkan platform dan sekarang jika kita kembali, kita dapat pergi ke pesanan dan di sana kita juga dapat kembali dan hal yang sama terjadi di Android.

95
00:08:10,060 --> 00:08:12,160
Sekarang dengan itu, kami menambahkan laci.

96
00:08:12,160 --> 00:08:15,400
Ada satu hal yang ingin saya tambahkan ke

97
00:08:15,400 --> 00:08:21,940
laci yang belum pernah saya lakukan sebelum saya terus mengerjakan daftar pesanan saya, kami belum mengeluarkan apa-apa karena

98
00:08:22,240 --> 00:08:28,570
kami belum benar-benar menambahkan pesanan, kami belum menghubungkan ini Tombol pesan sekarang, kami tidak melihat apa pun

99
00:08:28,570 --> 00:08:33,180
yang berubah jika kami menambahkan sesuatu ke keranjang, klik pesan sekarang sekali,

100
00:08:33,280 --> 00:08:37,810
mengkliknya beberapa kali akan memberi Anda kesalahan sekarang dan kemudian kami melihat

101
00:08:37,860 --> 00:08:41,140
pesanan itu di sini. Sekarang kita perlu menghapus keranjang,

102
00:08:41,140 --> 00:08:45,940
itu hal lain yang perlu kita lakukan tetapi sebelum kita melakukannya, di laci, aku sebenarnya juga

103
00:08:46,030 --> 00:08:51,340
ingin memiliki ikon di sebelah entri saya di sini dan menambahkan ikon ini sebenarnya sangat sederhana, ' t

104
00:08:51,340 --> 00:08:57,640
melakukan ini dalam modul navigasi tetapi kami akan melakukannya sekarang. Untuk menambahkan ikon, Anda hanya perlu pergi ke layar

105
00:08:57,640 --> 00:08:59,920
yang Anda navigasikan ke dalam laci

106
00:08:59,920 --> 00:09:04,990
Anda dan dalam kasus kami, itu tentu saja dua navigator ini, jadi ini bukan layar

107
00:09:05,440 --> 00:09:11,200
tetapi dua navigator ini dan pada navigator ini atau jika mereka layar , pada layar ini, Anda

108
00:09:11,200 --> 00:09:17,230
dapat mengatur opsi navigasi dan dengan itu, maksud saya bukan opsi navigasi default yang Anda tetapkan untuk semua

109
00:09:17,230 --> 00:09:23,080
layar navigator itu, tetapi Anda mengatur navigator ini jika digunakan di dalam navigator lain seperti halnya di sini.

110
00:09:23,080 --> 00:09:25,020
Jadi kita dapat menambahkan

111
00:09:25,030 --> 00:09:29,320
opsi navigasi di sini, sekali lagi ini tidak akan diterapkan

112
00:09:29,320 --> 00:09:32,550
ke layar navigator ini tetapi sebaliknya, ini

113
00:09:32,740 --> 00:09:39,700
akan mengkonfigurasi navigator ini jika itu layar navigator lain dan di sini perintah navigator adalah layar

114
00:09:39,700 --> 00:09:50,140
navigator toko pada akhirnya. dan di sana dalam opsi navigasi ini, kita dapat menambahkan entri ikon laci yang dapat menjadi fungsi yang misalkan konfigurasi laci,

115
00:09:51,150 --> 00:09:56,890
fungsi ini dipanggil untuk Anda oleh React navigation dan memberi Anda konfigurasi laci

116
00:09:56,890 --> 00:10:03,870
ini yang paling penting memberitahu Anda misalnya apa warna warna Anda karena di sini Anda sekarang dapat

117
00:10:03,880 --> 00:10:10,630
mengembalikan komponen, seperti komponen Ionik untuk membuat ikon. Untuk itu Anda hanya perlu memastikan bahwa Anda mengimpor

118
00:10:11,200 --> 00:10:12,780
ionik dari @ expo

119
00:10:12,790 --> 00:10:16,650
/ vektor-ikon, jadi Anda perlu menambahkan impor itu di file

120
00:10:16,780 --> 00:10:23,770
navigator toko dan sekarang dengan itu ditambahkan, jika kita pergi ke sini, saya mengembalikan saya Ionicon, sekarang saya

121
00:10:23,770 --> 00:10:24,640
bisa

122
00:10:24,850 --> 00:10:30,720
mengkonfigurasinya karena saya selalu melakukan ini dan untuk itu lagi, kita bisa menggunakan platform API

123
00:10:30,730 --> 00:10:39,340
yang sudah kita impor di sini, jika tidak, pastikan Anda melakukannya. Kita dapat menggunakannya untuk memeriksa sistem operasi dan jika itu sama

124
00:10:39,790 --> 00:10:43,820
dengan Android, maka di sini saya akan membuat md

125
00:10:43,820 --> 00:10:49,820
buat sebagai ikon, jika tidak iOS buat dan ini hanya satu ikon yang saya ambil sebelumnya.

126
00:10:49,850 --> 00:10:56,640
Sekarang tentu saja, kita juga dapat mengkonfigurasi ukuran di sini dan saya akan menempel pada 23 lama saya yang baik dan

127
00:10:56,760 --> 00:11:02,130
selain itu, mengatur warna jika Anda ingin dan sekarang tentu saja, yang seharusnya tidak menjadi

128
00:11:02,190 --> 00:11:07,620
warna primer karena ikon ini akan selalu memiliki warna itu, sebaliknya warna ini harus ditetapkan oleh laci

129
00:11:07,710 --> 00:11:13,310
yang merupakan hal yang tahu apakah item dipilih atau tidak dan yang akan mengubah warna dengan tepat.

130
00:11:13,380 --> 00:11:16,570
Jadi di sini, Anda harus mengakses konfigurasi laci. TintColor dan ini memberi

131
00:11:16,680 --> 00:11:22,110
tahu Anda warna apa yang seharusnya dimiliki saat ini dan warna warna ini akan berubah tergantung

132
00:11:22,110 --> 00:11:24,330
pada apakah ini sedang dipilih atau tidak.

133
00:11:25,370 --> 00:11:29,350
Nah, itu kasus untuk pesanan saya, permisi, ikon di

134
00:11:29,540 --> 00:11:30,470
sini

135
00:11:30,580 --> 00:11:39,080
harus menjadi daftar md dan daftar iOS, bukan buat. Jadi itu adalah pengaturan pesanan saya sekarang dengan ikon daftar dan tentu saja hal

136
00:11:39,440 --> 00:11:46,130
yang sama dapat dilakukan di sini dengan menyalinnya di navigator produk dan di sana, saya ingin menggunakan keranjang md atau keranjang

137
00:11:46,130 --> 00:11:54,490
iOS, jadi ikon keranjang ini lagi dan sekarang ini hampir siap digunakan. Namun satu hal yang perlu Anda lakukan adalah Anda

138
00:11:54,490 --> 00:11:59,500
perlu mengimpor Bereaksi dari Bereaksi sekarang di file navigator ini karena sekarang

139
00:11:59,500 --> 00:12:06,610
Anda menggunakan komponen dengan sintaks jsx itu. Seperti yang Anda ketahui,

140
00:12:06,610 --> 00:12:14,260
jsx dikompilasi atau dikonversi menjadi Bereaksi. createElement pada akhirnya dan karena itu Anda perlu mengimpor Bereaksi untuk sintaks

141
00:12:14,260 --> 00:12:16,190
ini untuk bekerja di sini.

142
00:12:16,510 --> 00:12:21,850
Sekarang dengan itu jika Anda kembali, Anda memiliki ikon-ikon yang bagus di sini di sebelah item Anda

143
00:12:21,850 --> 00:12:23,230
dan mereka juga diwarnai

144
00:12:23,230 --> 00:12:26,020
dengan benar, juga di sini di Android tentu saja.

145
00:12:26,020 --> 00:12:32,110
Jadi sekarang laci samping sudah selesai, kita juga bisa pergi ke layar pesanan dan kita bahkan bisa melihat pesanan

146
00:12:32,110 --> 00:12:32,920
di sana.

147
00:12:32,920 --> 00:12:37,450
Namun saat ini, keranjang tidak dihapus dan oleh karena itu jika Anda mengklik ini berkali-kali, Anda

148
00:12:37,450 --> 00:12:42,520
benar-benar akan mendapat peringatan karena apa yang Anda lakukan adalah mengklik ini terlalu cepat dan karenanya Anda

149
00:12:42,790 --> 00:12:48,700
membuat banyak pesanan dengan ID unik semu yang sama tempat kami pada akhirnya gunakan cap waktu saat ini, jika Anda

150
00:12:48,700 --> 00:12:50,770
mengklik ini terlalu cepat beberapa kali

151
00:12:50,860 --> 00:12:56,110
itu cap waktu yang sama, itu sebabnya peringatan ini datang dan saya ingin menghapus keranjang setelah melakukan pemesanan.

152
00:12:56,860 --> 00:13:02,050
Jadi, mari kita pastikan kita menghapus keranjang setelah melakukan pemesanan dan tentu saja mari kita pastikan kita menghasilkan pesanan dengan

153
00:13:02,110 --> 00:13:04,930
cara yang lebih baik daripada yang kita lakukan saat ini.