1
00:00:02,220 --> 00:00:06,510
Mari kita pastikan kita dapat pergi ke layar detail produk, layar ini

2
00:00:06,510 --> 00:00:09,870
di sini dan untuk yang pertama-tama dalam komponen layar

3
00:00:09,870 --> 00:00:13,170
detail produk, nah saya akan menyiapkan komponen dengan mengimpor

4
00:00:13,170 --> 00:00:15,590
React from React. Kemudian di

5
00:00:15,620 --> 00:00:21,150
sana, kita mungkin juga memerlukan beberapa hal dari React Native, misalnya tidak ada

6
00:00:21,210 --> 00:00:26,940
salahnya untuk memiliki tampilan dan teks di sini dan juga stylesheet dan juga

7
00:00:27,150 --> 00:00:32,880
komponen gambar, dengan cara urutan impor ini di sini tentu saja tidak masalah.

8
00:00:32,890 --> 00:00:38,430
Saya juga ingin memiliki tombol di sana karena saya ingin memiliki tombol tambahkan ke keranjang

9
00:00:38,610 --> 00:00:47,250
di sini juga dan sebenarnya juga tampilan gulir karena halaman detail ini dapat memiliki deskripsi produk yang sangat panjang atau dapat dilihat pada perangkat

10
00:00:47,250 --> 00:00:52,440
yang sangat kecil dan oleh karena itu, pastinya harus dapat digulir sehingga kita selalu

11
00:00:52,440 --> 00:00:55,950
dapat melihat semua konten. Dengan itu di

12
00:00:55,950 --> 00:01:03,940
sini, saya akan menambahkan komponen layar detail produk saya, lagi komponen fungsional di mana kami menerima alat peraga, saya

13
00:01:04,210 --> 00:01:10,420
akan mengatur stylesheet saya di sini dengan stylesheet. buat dan simpan dalam konstanta gaya dan

14
00:01:10,420 --> 00:01:17,440
tentu saja ekspor layar detail produk sebagai default. Dengan itu, mari kita mulai sederhana dan mengembalikan tampilan di

15
00:01:17,500 --> 00:01:26,340
sini dengan teks di mana kita mengatakan layar detail produk yang hanya ada sehingga kita dapat melihat bahwa kita berhasil menavigasi di sana dan agar

16
00:01:26,340 --> 00:01:29,570
kita benar-benar dapat menggunakan ini karena kita harus mengembalikan

17
00:01:29,610 --> 00:01:34,500
jsx ke memiliki komponen yang valid karena hal pertama yang ingin saya lakukan adalah

18
00:01:34,500 --> 00:01:39,750
menyesuaikan navigasi dan untuk itu di ShopNavigator. File js di folder navigasi, kita

19
00:01:39,750 --> 00:01:42,290
dapat mengimpor layar detail produk

20
00:01:42,420 --> 00:01:51,020
di sini dari folder layar kita, folder toko dan di sana layar detail produk, jadi itu file yang

21
00:01:51,020 --> 00:01:51,760
baru

22
00:01:51,770 --> 00:01:58,750
saja kita kerjakan dan memetakannya ke pengenal di sini, aku akan beri nama detail produk

23
00:01:58,750 --> 00:01:59,830
di sini.

24
00:01:59,830 --> 00:02:03,640
Tombol-tombol ini seperti yang Anda pelajari di bagian navigasi selalu terserah

25
00:02:03,640 --> 00:02:06,070
Anda, jadi sekarang kami memetakan layar ini.

26
00:02:06,220 --> 00:02:09,570
Ini akan menjadi layar awal kami karena ini adalah

27
00:02:09,580 --> 00:02:14,170
pasangan nilai kunci pertama, ini adalah layar yang dapat kami tuju, kami dapat menavigasi

28
00:02:14,170 --> 00:02:20,440
ke dan untuk pergi ke sana, kami harus pergi ke layar ikhtisar produk kami dan ketika kami mengklik tampilan detail,

29
00:02:20,440 --> 00:02:24,700
ini pada akhirnya sinyal bahwa kita ingin pergi ke layar detail produk itu.

30
00:02:24,700 --> 00:02:32,140
Jadi di sini di fungsi ini, kita bisa memanggil navigasi alat peraga navigasi, fungsi navigasi ini yang Anda pelajari

31
00:02:32,140 --> 00:02:35,260
di bagian navigasi dan kemudian di sana,

32
00:02:35,320 --> 00:02:40,170
saya menunjukkan satu sintaks di mana Anda melewati objek Javascript di mana

33
00:02:40,180 --> 00:02:46,340
Anda mengatur nama rute, yang bisa detail produk dan itu akan membawa Anda ke layar.

34
00:02:46,340 --> 00:02:47,920
Jadi sekarang kita simpan ini

35
00:02:47,930 --> 00:02:55,430
dan kita klik pada detail tampilan, memang kita pergi ke layar detail produk. Sekarang sebagai anotasi di bagian navigasi, saya juga menunjukkan kepada Anda

36
00:02:55,430 --> 00:02:55,980
tentu

37
00:02:55,990 --> 00:03:02,270
saja bahwa sintaks alternatifnya adalah bahwa Anda hanya memasukkan nama layar sebagai argumen pertama untuk menavigasi, sehingga

38
00:03:02,270 --> 00:03:03,970
Anda dapat melakukannya juga

39
00:03:03,980 --> 00:03:09,080
dan itu hanya akan berfungsi sebagai baik. Jika kami juga menguji ini di Android,

40
00:03:09,080 --> 00:03:11,750
ini adalah bagaimana kami bisa pergi ke sana.

41
00:03:11,940 --> 00:03:19,410
Sekarang jelas, tujuannya bukan hanya untuk pergi ke sana, tetapi juga untuk meneruskan data kami atau ID produk kami setidaknya sehingga

42
00:03:19,410 --> 00:03:25,200
kami dapat memuat data produk di dalam komponen. Maka sebagai argumen kedua di sini, saya mengirimkan objek Javascript

43
00:03:25,710 --> 00:03:30,380
yang akan menjadi params saya untuk tindakan navigasi ini dan di sana Anda dapat memiliki pasangan

44
00:03:30,510 --> 00:03:36,060
nilai kunci yang Anda inginkan, saya akan menambahkan bidang ID produk di sini, sekali lagi nama ini benar-benar terserah Anda

45
00:03:36,090 --> 00:03:42,120
dan ini akan menjadi itemData. barang. id karena itemData. item menunjuk pada

46
00:03:42,120 --> 00:03:48,480
satu produk yang memiliki tampilan yang kami atur di sini dalam model dan ini memiliki ID prop,

47
00:03:48,480 --> 00:03:55,350
jadi tentu saja kami dapat mengaksesnya di sini dan meneruskannya. Dengan itu, di layar detail produk, kita dapat mengekstrak

48
00:03:55,380 --> 00:04:01,410
ini tentu saja, itu juga sesuatu yang Anda pelajari sebelumnya dan yang dapat Anda praktikkan di sini.

49
00:04:01,410 --> 00:04:11,880
Kami bisa mendapatkan ID produk kami di sini hanya dengan memanggil alat peraga navigasi dapatkan ID produk param dan ini

50
00:04:11,880 --> 00:04:17,160
akan mengekstrak ID produk kami dari parameter yang kami terima.

51
00:04:17,180 --> 00:04:22,580
Sekarang kita dapat menggunakan ID itu untuk mendapatkan produk kita dan tentu saja produk kita disimpan di Redux.

52
00:04:22,640 --> 00:04:29,510
Jadi pada akhirnya kita perlu mengimpor pemilih penggunaan di sini dari React Redux, sehingga kita dapat menggunakannya untuk memilih

53
00:04:29,510 --> 00:04:30,830
satu produk, katakanlah

54
00:04:30,830 --> 00:04:37,220
produk yang dipilih, nama tetap ini tentu juga terserah Anda, sekarang dipilih dengan bantuan pemilih penggunaan yang menerima

55
00:04:37,220 --> 00:04:43,010
status kami, kondisi Redux kami dan kemudian kami dapat mengebor ke dalam slice produk, lagi-lagi nama

56
00:04:43,070 --> 00:04:51,420
slice adalah apa yang Anda gunakan di sini dalam produk reduksi gabungan dalam kasus saya dan di sana kami bisa mendapatkan akses ke semua

57
00:04:51,470 --> 00:04:54,650
produk yang tersedia tetapi dari Tentu saja di

58
00:04:54,680 --> 00:04:59,230
sini saya tidak ingin memuat semua produk yang tersedia tetapi sebaliknya, saya

59
00:04:59,240 --> 00:05:06,650
dapat menggunakan metode menemukan untuk menemukan satu produk dengan fungsi yang saya lewati untuk menemukan yang berjalan pada setiap item dalam

60
00:05:06,650 --> 00:05:12,560
array di mana kita mendapatkan produk di mana fungsi ini mengembalikan true dan itu harus mengembalikan true

61
00:05:12,560 --> 00:05:18,290
jika ID produk yang saya lihat sama dengan ID produk yang saya ekstrak dari parameter rute.

62
00:05:18,290 --> 00:05:23,470
Ini adalah bagaimana kami memilih satu produk dan satu produk ini kemudian dapat digunakan di sini,

63
00:05:23,470 --> 00:05:32,930
jadi di sini kami dapat menampilkan Produk yang dipilih. judul misalnya. Jika sekarang kita simpan itu dan kita melihat detailnya, memang

64
00:05:32,930 --> 00:05:33,860
di sini

65
00:05:33,860 --> 00:05:37,970
aku melihat baju merah, jika aku melakukannya untuk karpet biru, aku melihat karpet

66
00:05:37,970 --> 00:05:41,590
biru di sini, jadi itu berhasil. Akan menyenangkan untuk melihat

67
00:05:41,720 --> 00:05:43,110
bahwa di

68
00:05:43,280 --> 00:05:53,810
header juga dan ada dua opsi, sekarang kita bisa menggunakan alat peraga. navigasi mengatur param di sini dan juga membungkus ini dalam panggilan efek penggunaan tentu saja,

69
00:05:53,810 --> 00:05:55,030
yang akan lebih baik

70
00:05:55,030 --> 00:06:01,880
untuk mengatur judul kami dengan mengatur param dan menggunakannya di sini di opsi navigasi yang harus kita tambahkan ke detail

71
00:06:01,880 --> 00:06:07,690
produk untuk mengekstraknya atau sebenarnya sedikit lebih mudah, kita pergi ke ikhtisar produk yang merupakan tempat kita

72
00:06:07,700 --> 00:06:12,710
pergi ke halaman itu dan selain melewati ID produk, kami juga melewati judul produk

73
00:06:12,710 --> 00:06:17,000
karena di sini kami memiliki yang mudah tersedia dan kami mendapatkannya dengan

74
00:06:17,000 --> 00:06:20,120
bantuan itemData. barang. judul.

75
00:06:20,150 --> 00:06:25,400
Sekarang kita atur param ini juga dan ini membuatnya sangat mudah untuk

76
00:06:25,820 --> 00:06:31,490
mengekstraknya di layar detail produk, di sana dalam opsi navigasi, kita sekarang bisa

77
00:06:33,930 --> 00:06:40,440
menambahkan opsi navigasi layar detail produk dan ini sekarang bentuk fungsional karena kita perlu mengekstrak

78
00:06:41,730 --> 00:06:48,390
ini secara dinamis dari params rute kami. Jadi di sini kita mendapatkan objek data nav ini

79
00:06:48,420 --> 00:06:55,590
yang juga memiliki prop navigasi, kita perlu mengembalikan objek Javascript kita, konfigurasi config objek navigasi kita di sini, ini harus menjadi

80
00:06:55,620 --> 00:07:07,770
pilihan saja dan di sana, kita dapat mengatur judul header ke navData. navigasi. judul produk getParam atau apa pun yang Anda

81
00:07:07,830 --> 00:07:11,170
pilih sebagai pengidentifikasi untuk ini.

82
00:07:11,190 --> 00:07:17,060
Jadi di sini saya menggunakan judul produk karena di layar tinjauan produk, saya mengatur ini ke judul produk.

83
00:07:19,600 --> 00:07:25,600
Dengan itu, kita sedang mengatur tajuk ini, mari kita lihat apakah itu berfungsi, jika kita mencoba masuk ke

84
00:07:25,900 --> 00:07:27,130
layar itu, itu

85
00:07:27,130 --> 00:07:34,560
terlihat bagus, sekarang kita juga melihat judul produk di tajuk ini. Itu berhasil.

86
00:07:34,560 --> 00:07:39,420
Sekarang saya sebutkan sebelumnya bahwa kita seharusnya tidak hanya bisa pergi ke sana dengan menekan

87
00:07:39,420 --> 00:07:41,840
detail tampilan tetapi mungkin juga dengan menekan

88
00:07:42,170 --> 00:07:47,930
produk secara umum dan untuk itu, kita bisa pergi ke item produk dan tentu saja, kita memiliki tombol

89
00:07:47,930 --> 00:07:51,310
detail tampilan tetapi sekarang kita dapat membungkus seluruh item tentu

90
00:07:51,440 --> 00:08:01,000
saja dengan cara yang dapat disentuh dan di sana kita dapat menggunakan opacity yang dapat disentuh dan membungkus seluruh item ini dengan opacity yang dapat disentuh, jadi bungkus ini

91
00:08:01,160 --> 00:08:04,430
di seluruh tampilan kita di sini, tombol-tombol ini masih akan

92
00:08:04,430 --> 00:08:09,110
dipicu standalone tetapi sekarang kita juga dapat menekan di tempat lain dan di sanaTekan,

93
00:08:09,130 --> 00:08:09,900
saya

94
00:08:09,920 --> 00:08:15,710
sekarang juga ingin memicu yang sama, tombol lihat rincian tidak, saya ingin memicu fungsi yang kami terima pada

95
00:08:15,740 --> 00:08:22,730
detail tampilan, jadi saya hanya akan meneruskan ini ke detail tampilan. Dan dengan perubahan sederhana itu, kita dapat menekan di

96
00:08:22,730 --> 00:08:28,970
mana saja pada item ini untuk dibawa ke layar detail, juga pada Android di mana ini namun terlihat

97
00:08:28,970 --> 00:08:34,080
agak jelek dan secara umum, akan menyenangkan untuk memiliki efek riak ini di sana.

98
00:08:34,220 --> 00:08:36,980
Sekarang Anda juga belajar bagaimana Anda dapat

99
00:08:37,070 --> 00:08:44,760
mengimplementasikan ini, kami perlu mengimpor umpan balik asli yang dapat disentuh untuk itu dan platform API, jadi platform ini

100
00:08:44,760 --> 00:08:52,980
objek dan sekarang di sini dalam item produk, kami dapat mengatur komponen terjamah kami di sini atau apa pun yang

101
00:08:52,980 --> 00:08:58,650
Anda ingin menamainya , harus memiliki karakter huruf besar sehingga kita dapat menggunakannya sebagai

102
00:08:58,660 --> 00:09:00,710
elemen jsx dan ini

103
00:09:00,720 --> 00:09:10,050
dengan poin default pada opacity terjamah katakanlah tetapi jika platform OS sama dengan Android dan versi platform lebih besar atau sama dengan 21

104
00:09:10,050 --> 00:09:13,240
yang merupakan versi Android kita perlu mendukung

105
00:09:13,440 --> 00:09:22,410
efek riak, kita dapat mengatur cmp terjamah sama dengan umpan balik asli terjamah dan sekarang kita dapat mengganti opacity terjamah di sana

106
00:09:22,410 --> 00:09:23,100
dengan

107
00:09:24,210 --> 00:09:28,120
cmp terjamah sehingga dengan variabel yang menampung dua jenis

108
00:09:28,220 --> 00:09:34,040
komponen tergantung pada di mana itu berjalan dan sekarang jika kita lakukan ini, kami

109
00:09:34,850 --> 00:09:40,330
masih memiliki efek opacity di sini tetapi kami memiliki efek riak di Android.

110
00:09:40,340 --> 00:09:48,980
Namun hanya di sana, tidak pada gambar dan juga tidak menghormati sudut bulat kami seperti yang mungkin Anda

111
00:09:48,980 --> 00:09:49,930
lihat.

112
00:09:50,390 --> 00:09:52,770
Sekarang untuk memperbaiki masalah yang

113
00:09:52,850 --> 00:09:56,500
tidak ada pada gambar, yang harus kita lakukan adalah kita

114
00:09:56,690 --> 00:10:01,990
harus mengubah beberapa konfigurasi di sana, kita hanya perlu menambahkan penggunaan foreground prop di sini.

115
00:10:02,050 --> 00:10:07,570
Sekarang pada opacity yang dapat disentuh, ini tidak akan berpengaruh kecuali pada umpan balik asli yang dapat

116
00:10:07,570 --> 00:10:12,850
disentuh, ini memastikan bahwa efek riak tidak berlaku untuk latar belakang tetapi sebenarnya pada latar

117
00:10:12,910 --> 00:10:19,180
depan yang juga berarti elemen-elemen yang ditempatkan di atas bagian yang dapat disentuh atau bagian dalam komponen terjamah kami.

118
00:10:19,180 --> 00:10:25,360
Jadi karena itu sekarang, ini juga pada gambar dan untuk menghormati sudut, sudut bulat, saya akan

119
00:10:25,360 --> 00:10:27,560
melakukan ini sedikit berbeda, saya

120
00:10:27,670 --> 00:10:33,840
akan menambahkan komponen yang dapat disentuh di dalam tampilan sekeliling saya daripada di luar, seperti itu

121
00:10:35,550 --> 00:10:42,860
dan sekarang di sini saya akan menambahkan overflow yang tersembunyi pada gaya produk yang ada pada tampilan yang sekarang ada

122
00:10:42,870 --> 00:10:48,260
di sekitar komponen yang dapat saya sentuh. Namun dengan itu, bayangan saya hilang seperti yang Anda tahu

123
00:10:48,260 --> 00:10:55,710
dan di sini saya sekarang bahkan mendapatkan kesalahan bahwa saya perlu anak Bereaksi tunggal. Oleh karena itu mari kita sedikit men-tweak ini

124
00:10:55,710 --> 00:11:01,590
dan mari kita tambahkan tampilan tambahan di sini, tampilan tambahan yang membungkus semuanya, seluruh

125
00:11:01,590 --> 00:11:11,370
komponen saya yang dapat disentuh di dalam tampilan luar dan pada tampilan ekstra itu, saya akan menambahkan gaya gaya yang dapat disentuh atau apa

126
00:11:11,370 --> 00:11:19,090
pun Anda ingin memberi nama dan gaya yang dapat disentuh ini sekarang ditambahkan di sini di stylesheet saya.

127
00:11:19,180 --> 00:11:21,260
Ini sekarang membuat prop tersembunyi

128
00:11:21,370 --> 00:11:28,090
overflow, jadi kami menambahkan ini di sini dan ini sekarang juga menerima radius perbatasan yang sama yang kami miliki di

129
00:11:28,090 --> 00:11:36,000
seluruh keranjang, jadi radius perbatasan 10 di sini dan ini sekarang akan memastikan bahwa kami menjaga bayangan kami, sehingga masih berfungsi karena overflow tersembunyi

130
00:11:36,000 --> 00:11:41,220
akan memangkas ini dan sekarang untuk menghilangkan kesalahan lain di sini juga, kita bisa membungkus

131
00:11:41,220 --> 00:11:47,230
lagi pandangan lain di sekitar semua konten di dalam komponen yang dapat disentuh sehingga kita akan memenuhi kriteria

132
00:11:47,240 --> 00:11:52,890
ini dengan hanya memiliki satu item anak dalam komponen yang dapat disentuh dan sekarang dengan itu, kita

133
00:11:52,890 --> 00:11:58,620
memiliki perilaku yang sama seperti sebelumnya di iOS. Mengangkut dengan cara tidak memicu navigasi

134
00:11:58,620 --> 00:12:01,940
rincian ini yang baik dan di Android, kami sekarang

135
00:12:02,070 --> 00:12:06,780
juga memiliki efek riak yang menghormati sudut bulat kami yang membawa kami ke

136
00:12:07,050 --> 00:12:12,270
tampilan detail dan ke keranjang juga tidak melakukan apa yang seharusnya tidak dilakukan. .

137
00:12:12,270 --> 00:12:15,050
Jadi dengan itu, sekarang kita memiliki navigasi yang kita butuhkan, kita

138
00:12:15,060 --> 00:12:17,210
memiliki tampilan yang kita butuhkan di sini.

139
00:12:17,490 --> 00:12:23,490
Sekarang kita bisa pergi ke halaman detail dan kita sekarang mungkin harus memastikan bahwa halaman detail ini juga terlihat seperti

140
00:12:23,490 --> 00:12:24,020
seharusnya.