1
00:00:02,200 --> 00:00:08,590
Jadi, mari kita pastikan bahwa item produk kami pada layar tinjauan produk terlihat sedikit lebih bagus

2
00:00:11,860 --> 00:00:16,520
daripada yang sedang mereka cari. Sekarang tentu saja, setiap item produk hanya diterjemahkan

3
00:00:16,540 --> 00:00:22,090
sebagai teks, sebagai komponen teks dan bukan itu yang saya inginkan di sini, sebagai gantinya saya akan menghapus impor itu dan saya

4
00:00:22,090 --> 00:00:24,970
akan membuat komponen baru yang harus bertanggung jawab atas item produk saya.

5
00:00:25,060 --> 00:00:31,540
Sekarang satu catatan penting tentang di mana kita membuat komponen itu, kita dapat membuatnya

6
00:00:31,560 --> 00:00:35,510
di sini di ProductsOverview. File js juga, kita tentu saja

7
00:00:35,530 --> 00:00:41,890
dapat memiliki lebih dari satu komponen per file, jadi di sini saya dapat menambahkan komponen item produk saya atau bagaimanapun Anda ingin

8
00:00:41,890 --> 00:00:47,250
menyebutnya, seperti ini, maka kita dapat menggunakan komponen ini dalam file ini yang tentu saja apa yang saya rencanakan.

9
00:00:47,290 --> 00:00:52,870
Ini adalah pola yang dapat Anda gunakan jika Anda memiliki komponen yang benar-benar sangat terkait dengan komponen

10
00:00:53,080 --> 00:00:57,070
lain dan Anda hanya membaginya sehingga setiap komponen sedikit lebih mudah dibaca.

11
00:00:57,370 --> 00:01:03,160
Setelah komponen terpisah ini menjadi sangat besar, Anda tetap harus mempertimbangkan memecahnya menjadi file terpisah sehingga

12
00:01:03,190 --> 00:01:08,350
file Anda tetap kecil dan jika orang ingin melihat salah satu dari dua komponen,

13
00:01:08,350 --> 00:01:12,700
mereka tidak harus menggulir ke komponen lain. mereka mungkin tidak tertarik.

14
00:01:12,820 --> 00:01:18,730
Jadi itu satu hal yang perlu diingat. Tentu saja jika Anda juga berencana menggunakan komponen di

15
00:01:19,150 --> 00:01:25,990
komponen lain, Anda harus selalu menyimpannya dalam file terpisah, tidak hanya agar Anda dapat mengekspornya sebagai default karena Anda juga dapat

16
00:01:25,990 --> 00:01:29,950
mengekspor ini jika disimpan bersama dengan komponen lain, itu bukan alasan

17
00:01:30,520 --> 00:01:36,550
utama tetapi kebanyakan untuk membuatnya sangat jelas bahwa ini adalah komponen mandiri yang mungkin dan akan digunakan di

18
00:01:36,550 --> 00:01:38,310
berbagai bagian aplikasi Anda.

19
00:01:38,350 --> 00:01:45,550
Sekarang item produk di sini tidak hanya tidak akan super kecil yang dengan sendirinya akan menjadi alasan untuk meletakkannya

20
00:01:45,550 --> 00:01:51,460
di file yang terpisah tetapi saya juga akan menggunakannya dalam komponen yang berbeda nanti atau

21
00:01:51,460 --> 00:01:57,970
di berbagai tempat aplikasi, itu tidak hanya relevan ke layar ikhtisar produk dan oleh karena itu, saya akan

22
00:01:57,970 --> 00:02:04,030
menambahkannya di folder komponen dan di folder komponen itu, untuk mengatur jenis komponen saya sedikit, saya

23
00:02:04,120 --> 00:02:10,300
akan menambahkan subfolder toko di mana saya ingin menempatkan semua komponen yang langsung terkait dengan fitur toko

24
00:02:10,300 --> 00:02:12,950
atau fitur-fitur pada umumnya aplikasi saya.

25
00:02:13,090 --> 00:02:19,390
Jadi di sana di subfolder toko, saya akan menambahkan ProductItem ini. File js dan Anda akan melihat folder lain yang

26
00:02:19,390 --> 00:02:21,540
akan saya tambahkan di sini nanti.

27
00:02:21,550 --> 00:02:27,640
Sekarang lagi, semua pola dan praktik yang saya tunjukkan di sini hanya cara yang mungkin untuk melakukan ini, secara umum

28
00:02:28,360 --> 00:02:34,480
dalam kursus saya dan dalam kursus ini juga, saya menunjukkan semua praktik terbaik yang dapat Anda gunakan tetapi sering dalam

29
00:02:34,480 --> 00:02:37,270
pemrograman, tidak ada hanya satu cara yang benar

30
00:02:37,390 --> 00:02:43,180
atau salah, sehingga praktik dan pola yang saya tunjukkan di sini adalah praktik dan pola yang akan Anda lihat

31
00:02:43,180 --> 00:02:48,670
di proyek lain juga, tetapi Anda mungkin juga melihat struktur folder lain, pada akhirnya Anda selalu dapat

32
00:02:48,670 --> 00:02:55,480
bekerja dengan struktur yang bekerja untuk Anda, tidak ada pilihan benar atau salah di sini, saya hanya ingin menjelaskan alasan saya untuk

33
00:02:55,480 --> 00:03:00,910
menggunakan struktur ini yang mudah-mudahan membantu Anda memahami mengapa saya menggunakannya dan mengapa ini mungkin patut dipikirkan.

34
00:03:01,900 --> 00:03:10,960
Jadi di sini, file item produk, ProductItem. File js tentu saja akan menahan komponen item produk yang merupakan komponen fungsional normal

35
00:03:10,960 --> 00:03:16,110
yang menerima alat peraga dan pada akhirnya akan mengembalikan kode jsx dan karena itu memegang kode jsx,

36
00:03:16,120 --> 00:03:22,750
kita perlu mengimpor Bereaksi dari Bereaksi dan di sini, saya juga akan mengimpor sesuatu dari React Native karena di sini saya

37
00:03:23,170 --> 00:03:30,070
sekarang akan bekerja dengan primitif React Native ini untuk benar-benar membangun komponen saya karena dari sana, saya memerlukan pandangan, saya akan membutuhkan

38
00:03:30,520 --> 00:03:34,930
teks, saya juga ingin menggunakan gambar karena kami Saya akan menampilkan gambar produk di

39
00:03:34,930 --> 00:03:42,310
sini dan juga stylesheet karena kami pasti akan juga gaya ini. Karenanya, Anda juga dapat menambahkan konstanta gaya di

40
00:03:42,310 --> 00:03:48,190
sini yang kami buat dengan Stylesheet. buat yang kami berikan objek Javascript dan pada

41
00:03:48,190 --> 00:03:56,170
akhirnya, kami mengekspor item produk ini di sini sebagai default saja. Sekarang di sini, dalam komponen ini yang saya maksud, kita

42
00:03:56,170 --> 00:04:02,350
dapat mulai membuat kode jsx membuat item produk dan ini akan menjadi komponen presentasi, yang berarti

43
00:04:02,350 --> 00:04:08,500
tidak akan ada logika di sini, kita tidak akan mengelola keadaan internal apa pun, ini hanya

44
00:04:08,530 --> 00:04:14,630
akan menjadi komponen yang bisa kita gunakan di komponen lain untuk mendapatkan gaya dan tata letak

45
00:04:14,630 --> 00:04:21,250
yang tepat di luar kotak, jadi komponen ini di sini akan bertanggung jawab untuk menggunakan komponen Asli Bereaksi

46
00:04:21,400 --> 00:04:28,090
tertentu dan meletakkannya dan menatanya dengan cara tertentu. Jadi di sini, saya pada akhirnya ingin mengembalikan

47
00:04:28,090 --> 00:04:34,150
tampilan yang membungkus segalanya, yang mengatur segalanya, yang kami juga dapat gaya untuk mendapatkan

48
00:04:34,150 --> 00:04:42,100
tampilan keranjang ini dengan mungkin bayangan, mungkin sudut bulat, apa pun yang Anda inginkan dan di sana, kami sekarang

49
00:04:42,100 --> 00:04:50,460
memiliki bagian yang berbeda, misalnya kita pasti akan memiliki gambar di sana, gambar produk, saya juga ingin memiliki judul dan

50
00:04:50,460 --> 00:04:53,480
harganya, jadi kita akan memerlukan beberapa teks

51
00:04:53,700 --> 00:05:04,630
di sini, jadi untuk judul di sini dan di sini, maka untuk harga dalam dolar dan di bawahnya, saya juga ingin memiliki tampilan dengan tombol, jadi

52
00:05:05,200 --> 00:05:07,650
di sini kita dapat menggunakan komponen

53
00:05:07,650 --> 00:05:14,680
tombol bawaan untuk saat ini, di mana kita kemudian dapat menambahkan produk ke keranjang atau juga melihat

54
00:05:14,680 --> 00:05:22,120
detailnya , jadi di mana kita memiliki dua opsi ini pada dasarnya dan tentu saja kita perlu menambahkan

55
00:05:22,120 --> 00:05:26,760
penangan onPress di sini. Jadi itu kerangka yang sangat mendasar, mungkin bukan

56
00:05:26,770 --> 00:05:30,880
yang terakhir, kita harus melihat bagaimana kita dapat menata semuanya di sini, tetapi itulah tata

57
00:05:30,930 --> 00:05:32,390
letak yang saya inginkan.

58
00:05:32,500 --> 00:05:37,460
Saya membungkus tombol saya di sini agar dapat dilihat karena saya ingin memilikinya berdampingan dalam barisan dan

59
00:05:37,510 --> 00:05:43,030
dengan memiliki pandangan di sekelilingnya, kita dapat menata tampilan tersebut sedemikian rupa sehingga menggunakan baris arah yang fleksibel

60
00:05:43,040 --> 00:05:43,960
dan seterusnya.

61
00:05:43,990 --> 00:05:45,040
Jadi

62
00:05:45,040 --> 00:05:47,320
itu adalah pengaturan yang dapat

63
00:05:47,440 --> 00:05:49,850
kita gunakan di sini, sekarang mari

64
00:05:49,960 --> 00:05:53,980
kita tambahkan beberapa gaya dan untuk itu saya ingin menggunakan

65
00:05:53,980 --> 00:05:59,980
atau mulai di sini pada tampilan sekitarnya di mana saya mengatur produk gaya seperti ini,

66
00:05:59,980 --> 00:06:03,900
oleh karena itu di sini di stylesheet, saya menambahkan

67
00:06:04,020 --> 00:06:07,200
produk seperti itu, tambahkan kunci produk saya di

68
00:06:07,210 --> 00:06:17,650
sini dan tentu saja sekarang lagi, itu sepenuhnya terserah Anda bagaimana Anda ingin gaya ini, saya ingin memiliki kartu yang terlihat, jadi karena itu saya akan

69
00:06:17,650 --> 00:06:27,580
menambahkan bayangan, warna bayangan yang bisa hitam, opacity bayangan yang bisa 0. 26, offset bayangan di mana saya memiliki offset lebar nol dan

70
00:06:27,610 --> 00:06:32,080
tinggi offset dua dan radius bayangan delapan mungkin dan seperti

71
00:06:32,080 --> 00:06:36,490
biasa bermain-main dengan nilai-nilai ini untuk menemukan konfigurasi Anda.

72
00:06:36,490 --> 00:06:39,320
Sekarang Anda mungkin ingat bahwa shadow hanya berfungsi di

73
00:06:39,340 --> 00:06:45,670
iOS, jadi untuk Android saya akan menambahkan properti elevasi di sini dan mengatur ini menjadi lima mungkin, sekali lagi Anda

74
00:06:45,670 --> 00:06:48,070
dapat bereksperimen dengan nilai yang berbeda di

75
00:06:48,160 --> 00:06:52,500
sana juga dan saya ingin memiliki radius perbatasan 10 karena Saya ingin sudut membulat

76
00:06:52,510 --> 00:06:54,250
dan lagi, itu sesuatu yang

77
00:06:54,250 --> 00:07:00,400
saya inginkan di sini, sesuatu yang tidak harus Anda lakukan. Saya juga akan menambahkan warna latar belakang putih untuk memastikan

78
00:07:00,430 --> 00:07:05,290
bahwa keranjang kami di sini, produk kami selalu memiliki warna latar belakang ini bahkan jika aplikasi utama

79
00:07:05,290 --> 00:07:14,190
kami harus menggunakan warna latar belakang yang berbeda nanti. Jadi itu produk saya, pembungkus saya di sini di seluruh produk. Saya juga ingin mengatur tinggi badan saya di

80
00:07:14,190 --> 00:07:16,920
sini, setiap produk harus memiliki tinggi 300

81
00:07:16,920 --> 00:07:21,750
piksel dan tentu saja itu adalah nilai yang juga dapat Anda sesuaikan dengan

82
00:07:21,750 --> 00:07:22,670
kebutuhan Anda.

83
00:07:22,740 --> 00:07:28,050
Anda tentu saja dapat juga membuat ini dinamis dengan API dimensi saat Anda

84
00:07:28,050 --> 00:07:34,830
mempelajarinya dalam modul responsif dan saya akan menambahkan margin 20 di semua arah di setiap item

85
00:07:34,860 --> 00:07:42,070
produk, sehingga kami memiliki jarak di semua arah. Dengan pengaturan ini, kita dapat mulai bekerja mengeluarkan sesuatu, sehingga

86
00:07:42,230 --> 00:07:47,330
gambar membutuhkan sumber dan kita akan mendapatkan gambar jaringan di sini karena jika Anda melihat data

87
00:07:47,330 --> 00:07:52,940
dummy, semua URL gambar di sini adalah URL, itu juga yang kami ada dalam model, kami mengharapkan

88
00:07:52,940 --> 00:07:54,260
URL di sini,

89
00:07:54,290 --> 00:07:59,480
jadi untuk gambar jaringan dan itu akan menjadi default saja untuk setiap toko yang Anda bangun

90
00:07:59,480 --> 00:08:06,740
karena Anda tidak akan pernah memasukkan semua gambar produk ke dalam aplikasi Anda, setidaknya jika itu bukan beberapa di app shop untuk sebuah

91
00:08:06,740 --> 00:08:09,070
game tetapi jika ini adalah toko tempat

92
00:08:09,110 --> 00:08:14,070
orang dapat membuat produk, jelas orang akan membuat produk secara dinamis setelah aplikasi Anda didistribusikan,

93
00:08:14,240 --> 00:08:20,300
jadi tidak mungkin bagi Anda untuk memasukkan semua gambar ke dalam aplikasi Anda, alih-alih harus disimpan di server .

94
00:08:21,450 --> 00:08:26,740
Jadi karena itu di sini, kita perlu meneruskan objek ke sumber tempat kita mengatur properti

95
00:08:26,910 --> 00:08:32,120
URI dan yang sekarang akan diterima dari luar karena komponen item produk ini adalah presentasi,

96
00:08:32,130 --> 00:08:38,060
Jadi setiap data yang ditampilkan perlu diteruskan melalui alat peraga dan di sana, kami dapat mengharapkan penyangga

97
00:08:38,070 --> 00:08:40,680
gambar tetapi untuk semua penyangga di

98
00:08:40,680 --> 00:08:47,610
komponen Anda sendiri, Anda dapat memilih nama yang Anda inginkan. Untuk judul, saya berharap untuk mendapatkan prop judul dan untuk harga, saya berharap

99
00:08:47,610 --> 00:08:52,740
untuk mendapatkan prop harga, saya akan menyimpan tanda dolar di sini karena harga hanya akan menjadi nomor dan tentu saja

100
00:08:52,740 --> 00:08:55,210
saya ingin memiliki tanda dolar di depan ini.

101
00:08:55,350 --> 00:09:02,640
Sekarang satu catatan kecil di sini, saya ingin memastikan bahwa harga yang saya peroleh selalu memiliki tepat dua tempat desimal dan

102
00:09:03,020 --> 00:09:10,520
kita dapat mencapainya dengan menelepon untuk memperbaikinya dan meneruskan dua. Untuk memperbaikinya adalah fungsi yang tersedia pada

103
00:09:10,560 --> 00:09:17,940
angka dalam Javascript, yang mengubah ini pada dasarnya string dengan jumlah tetap tempat desimal dan

104
00:09:17,940 --> 00:09:21,870
di sini saya membatasi ini untuk selalu menjadi

105
00:09:21,870 --> 00:09:23,210
dua tempat

106
00:09:23,280 --> 00:09:34,310
desimal, itu Javascript normal, tidak ada yang spesifik untuk Bereaksi Asli. Sekarang ketika kita menekan tombol view details, maka saya akan memicu props pada detail tampilan,

107
00:09:34,400 --> 00:09:41,960
jadi saya kembali menggunakan nama di sini yang dapat Anda konfigurasikan atau beri nama sesuai keinginan Anda tetapi idenya di sini

108
00:09:41,960 --> 00:09:47,240
adalah bahwa props pada view detail menunjuk pada suatu fungsi yang pada akhir dieksekusi

109
00:09:47,240 --> 00:09:51,220
ketika tombol ini ditekan dan oleh karena itu di sini,

110
00:09:51,230 --> 00:09:58,900
jika tombol ini, tombol kereta ditekan, saya akan menunjuk ke fungsi yang saya harapkan untuk masuk ke add on cart prop.

111
00:09:58,940 --> 00:09:59,300
Sekali

112
00:09:59,540 --> 00:10:03,650
lagi, Anda dapat memberi nama props ini apa pun yang Anda inginkan tetapi ketika

113
00:10:03,740 --> 00:10:10,370
Anda menggunakan komponen Anda, Anda harus memastikan mereka tersedia dan bahwa mereka mendapatkan nilai yang merupakan fungsi yang kemudian dipicu melalui tombol-tombol ini.

114
00:10:10,370 --> 00:10:14,300
Sekarang kami mendapatkan semua data. Sekarang untuk gambar, karena

115
00:10:14,420 --> 00:10:21,440
ini adalah gambar jaringan, kita perlu mengatur lebar dan tinggi karena gambar tidak dapat melihat itu di muka karena

116
00:10:21,440 --> 00:10:24,600
dapat melakukannya untuk gambar lokal, tidak dapat melakukan ini

117
00:10:24,620 --> 00:10:31,810
untuk jaringan gambar, jadi di sini saya akan menunjukkan gaya. gambar dan saya akan menambahkan kunci gambar ini ke stylesheet saya di sana untuk saat ini.

118
00:10:31,820 --> 00:10:37,790
Sekali lagi, umumnya terserah Anda bagaimana Anda mendesain ini, tetapi saya akan mengatur ini memiliki lebar

119
00:10:37,790 --> 00:10:38,750
katakanlah 60%,

120
00:10:38,750 --> 00:10:46,580
perlu diingat bahwa produk keseluruhan memiliki lebar 100% tetapi tinggi 60% karena keseluruhan produk barang di sini memiliki tinggi 300 dan

121
00:10:46,580 --> 00:10:52,730
saya ingin memiliki gambar di sana, yang juga harus mengambil sebagian besar tinggi tetapi saya juga memiliki

122
00:10:53,000 --> 00:10:58,520
judul dan harga dan tombol saya dan ini juga harus pas di sana, jadi saya

123
00:10:58,520 --> 00:10:59,920
' Saya akan

124
00:11:00,020 --> 00:11:02,240
memberikan gambar 60% dari tinggi sehingga

125
00:11:02,360 --> 00:11:10,560
hal-hal lain di sini dapat membagi 40% sisanya di antara mereka. Jadi dengan itu, itulah gambarnya, sekarang tentu saja gambar itu

126
00:11:10,560 --> 00:11:16,230
bukan segalanya yang kita miliki di sini, kita juga punya judul, kita punya harga

127
00:11:16,230 --> 00:11:18,800
dan kita ingin gaya itu juga.

128
00:11:18,840 --> 00:11:24,980
Jadi untuk judul, saya akan menambahkan gaya judul di sini dan untuk harga, saya akan menambahkan katakanlah gaya

129
00:11:25,080 --> 00:11:32,490
harga dan di sini untuk tombol-tombol ini, saya juga akan menambahkan gaya ke tampilan sekitarnya dan saya akan beri nama ini tindakan

130
00:11:32,490 --> 00:11:41,020
dan tentu saja semua nama gaya ini seperti biasa sepenuhnya terserah Anda. Di sini, saya ingin menambahkan

131
00:11:41,050 --> 00:11:54,860
judul saya dan properti harga dan tindakan ke stylesheet saya di sini dan sekarang untuk judul, Anda tentu saja dapat gaya

132
00:11:54,860 --> 00:11:59,900
ini dengan cara apa pun yang Anda inginkan.

133
00:11:59,910 --> 00:12:01,970
Kami tidak memiliki font khusus di

134
00:12:02,070 --> 00:12:05,430
sini, saya akan menambahkan beberapa segera tetapi untuk saat ini,

135
00:12:05,610 --> 00:12:11,610
saya akan mengabaikannya dan mulai dengan ukuran font 18 dan saya ingin menambahkan margin vertikal, jadi bagian atas dan bawah

136
00:12:11,610 --> 00:12:21,570
dari 3 atau 4, jadi marginnya sangat kecil tapi masih ada margin di sekitar judul ini. Untuk harga, saya akan menetapkan ukuran font 14

137
00:12:21,840 --> 00:12:30,490
sehingga sedikit lebih kecil dan saya juga akan memberikan warna ini yang seharusnya 888

138
00:12:30,530 --> 00:12:34,380
yang seperti abu-abu, warna abu-abu gelap.

139
00:12:34,380 --> 00:12:39,760
Sekarang tindakan ditempatkan pada tampilan yang menahan tombol dan oleh karena itu, saya ingin memastikan bahwa

140
00:12:39,760 --> 00:12:42,450
tombol duduk bersebelahan, jadi dalam satu baris.

141
00:12:42,670 --> 00:12:53,860
Jadi saya akan memberikan arah baris yang fleksibel di sini dan saya juga akan membenarkan konten untuk memiliki semua ruang yang tersisa di antara

142
00:12:53,860 --> 00:13:02,980
mereka dan di samping itu, saya ingin menyelaraskan item di tengah secara vertikal, jadi di sepanjang sumbu silang yang

143
00:13:02,980 --> 00:13:06,910
untuk arah fleksibel baris adalah sumbu vertikal.

144
00:13:06,910 --> 00:13:08,890
Dengan itu, kami memiliki beberapa gaya dasar,

145
00:13:08,890 --> 00:13:14,920
sekarang mari kita gunakan komponen itu sebelum kita memperbaiki pengaturan dan gaya. Jadi komponen item produk yang kami ekspor

146
00:13:14,920 --> 00:13:20,110
di sini dalam file item produk sekarang dapat digunakan dalam file tinjauan

147
00:13:20,110 --> 00:13:22,850
produk dengan mengimpor item produk dari

148
00:13:22,870 --> 00:13:29,680
sana, jadi mari kita tunjuk folder komponen kami, ada di subfolder toko dan kemudian item produk

149
00:13:29,680 --> 00:13:35,340
dan sekarang ini yang ingin saya gunakan di sini ketika saya memberikan barang saya.

150
00:13:35,350 --> 00:13:40,300
Item produk dapat menjadi komponen penutupan sendiri karena semua data diterima melalui alat peraga dan bukan di antara

151
00:13:40,300 --> 00:13:42,650
tag pembuka dan penutup, sekarang tentu saja

152
00:13:42,670 --> 00:13:45,340
kita perlu mengatur semua hal yang kita harapkan di sini.

153
00:13:45,340 --> 00:13:50,700
Kami mengharapkan gambar, judul, harga, dan dua alat peraga penanganan acara kami di sini, jadi

154
00:13:50,710 --> 00:13:52,870
itulah yang perlu kami sediakan sekarang.

155
00:13:53,560 --> 00:13:55,390
Karenanya di sini pada item produk,

156
00:13:55,510 --> 00:14:02,140
saya akan mulai dengan gambar dan tentu saja itemData. barang. imageUrl dan kamu

157
00:14:02,140 --> 00:14:08,800
harus selalu mengingat itemData itu. item menunjuk sebagai produk sebagaimana didefinisikan dalam model produk kami dan oleh

158
00:14:08,800 --> 00:14:11,910
karena itu akan memiliki properti imageUrl ditulis seperti ini, jika Anda

159
00:14:11,920 --> 00:14:17,980
menulisnya secara berbeda, Anda tentu perlu mengaksesnya secara berbeda. Selain gambar, kami juga akan

160
00:14:17,980 --> 00:14:26,290
memiliki judul yang itemData. barang. judul dan selain itu, kita akan memiliki harga

161
00:14:26,320 --> 00:14:28,500
dengan itemData. barang. harga

162
00:14:28,510 --> 00:14:35,140
dan kemudian kami memiliki dua penangan acara kami di sini karena kami memiliki prop pada tampilan detail dan

163
00:14:35,140 --> 00:14:41,470
prop tambah pada kereta yang perlu kami tambahkan. Jadi pada tampilan detail akan melakukan sesuatu nanti, untuk saat ini

164
00:14:41,890 --> 00:14:45,150
hanya fungsi kosong dan di tambahkan ke keranjang juga akan melakukan

165
00:14:45,160 --> 00:14:47,650
sesuatu nanti, karena sekarang ini juga bisa

166
00:14:47,650 --> 00:14:54,280
menjadi fungsi kosong, ini adalah bagaimana item produk kami harus dirender. Dengan itu jika kita menyimpan ini, ini

167
00:14:54,320 --> 00:14:57,850
adalah apa yang harus Anda lihat, itu belum sempurna

168
00:14:57,860 --> 00:15:01,640
tetapi kita sampai di sana, ini sebenarnya tidak terlalu buruk.

169
00:15:01,700 --> 00:15:07,300
Sekarang tentu saja apa yang Anda perhatikan adalah bahwa tombol-tombolnya berwarna dengan cara yang salah, bahwa ruang

170
00:15:07,300 --> 00:15:12,460
ini tidak benar-benar digunakan dengan cara yang seharusnya digunakan di sana, bahwa kami mungkin juga

171
00:15:12,460 --> 00:15:21,050
ingin memusatkan teks ini tetapi ini tentu saja hal-hal kita bisa bekerja. Jadi untuk memperbaikinya, kembali ke komponen item produk di sini, mari kita

172
00:15:21,100 --> 00:15:23,900
mulai dengan dua teks kami di sini.

173
00:15:23,950 --> 00:15:30,790
Mereka tentu saja harus dipusatkan dan itu dapat dilakukan dengan cara yang sangat sederhana dengan membungkusnya dengan sebuah

174
00:15:30,790 --> 00:15:37,200
tampilan, memindahkan dua teks ini ke sana, memberikan gaya tampilan itu dan tentu saja Anda dapat memberi

175
00:15:37,250 --> 00:15:38,830
nama ini sesuai keinginan

176
00:15:38,840 --> 00:15:43,930
Anda, saya akan menyebutkan itu detail karena kita jenis tata letak detail produk

177
00:15:44,090 --> 00:15:52,710
di sana, jadi saya akan menambahkan gaya detail saya di sini ke stylesheet dan di sana, saya hanya akan mengatur pusat item menyelaraskan.

178
00:15:52,880 --> 00:16:00,440
Ini menggunakan arah lentur kolom, default dan karena itu berpusat pada sumbu silang, selalu melakukan ini tetapi sumbu silang

179
00:16:00,440 --> 00:16:04,870
untuk kolom arah lentur tentu saja dibelokkan ke kanan, sehingga

180
00:16:04,880 --> 00:16:12,920
berpusat secara horizontal yang merupakan apa yang saya inginkan di sini dan saya ' Saya juga akan memberikan ini tinggi 15%.

181
00:16:12,930 --> 00:16:16,830
Perlu diingat bahwa gambar mengambil 60%, jadi kami memberikan ini mungkin

182
00:16:16,830 --> 00:16:21,070
15%, jadi hampir setengah dari 40% sisanya, tidak cukup setengah Dan saya

183
00:16:21,270 --> 00:16:24,960
akan menambahkan sedikit padding di sini dari 10 mungkin.

184
00:16:24,960 --> 00:16:31,780
Dan untuk tombol di sini, ini ada di properti tindakan saya, di sana saya ingin mengatur

185
00:16:31,800 --> 00:16:36,340
ketinggian ke 25% sisanya, yang seharusnya menjadi string tentu saja

186
00:16:36,550 --> 00:16:41,300
karena kita memiliki tinggi 60% di sini, maka kita memiliki 15%

187
00:16:41,460 --> 00:16:43,360
di sini, maka di

188
00:16:43,450 --> 00:16:50,860
sini Saya ingin tetap memiliki 25% sisanya dan jika kita sekarang menyimpan ini, ini terlihat jauh lebih baik.

189
00:16:50,860 --> 00:16:54,360
Sekarang beberapa padding ke kiri dan kanan juga akan bagus

190
00:16:54,370 --> 00:17:01,810
untuk tombol, jadi pada properti style action ini, saya akan menambahkan padding horizontal 20 mungkin, sehingga kita memiliki beberapa jarak

191
00:17:01,810 --> 00:17:05,230
internal kiri atau kanan. Sekarang untuk mengubah warna

192
00:17:05,290 --> 00:17:10,540
tombol, kita bisa pergi ke komponen tombol yang dibangun ke React Native

193
00:17:10,550 --> 00:17:12,140
dan mengatur prop

194
00:17:12,170 --> 00:17:18,250
warna di sini untuk warna yang karena itu Anda perlu mengimpor dari folder konstanta

195
00:17:18,260 --> 00:17:19,530
dan dari

196
00:17:19,630 --> 00:17:30,510
file warna di sana dan mengatur ini kemudian ke warna-warna primer, juga di sini untuk warna kedua, tombol tambahkan ke kereta, tombol kedua karena itu.

197
00:17:30,550 --> 00:17:32,220
Jadi sekarang kita memiliki tombol

198
00:17:32,320 --> 00:17:37,090
kita di sini, tambahkan ke keranjang dan lihat detail dan ini tidak terlihat terlalu buruk.

199
00:17:37,120 --> 00:17:41,860
Satu hal yang tersisa yang mungkin Anda perhatikan adalah bahwa kami tidak memiliki sudut bulat

200
00:17:41,860 --> 00:17:48,280
di sini di bagian atas dan alasannya adalah bahwa gambar kami pada dasarnya seperti hamparan ke latar belakang kami dan latar

201
00:17:48,280 --> 00:17:49,570
belakangnya adalah tampilan

202
00:17:49,570 --> 00:17:53,800
sekeliling, gambar tidak memiliki sudut bundar dan karena itu tumpang tindih sudut kami

203
00:17:53,800 --> 00:17:57,350
yang kami miliki di tampilan sekitarnya. Untuk memperbaikinya, kita dapat membungkus

204
00:17:57,520 --> 00:18:01,200
gambar ke dalam tampilan terpisah dan seperti yang saya sebutkan sebelumnya

205
00:18:01,450 --> 00:18:05,580
dalam kursus, itu benar-benar normal dalam React Native untuk memiliki beberapa tampilan

206
00:18:05,580 --> 00:18:13,480
bersarang karena untuk tampilan ini, kita sekarang dapat melampirkan gaya yang kita mungkin bisa berikan pengenal wadah gambar yang sekarang dapat kita tambahkan ke

207
00:18:14,080 --> 00:18:20,350
stylesheet kita dan sekarang saya akan memberikan wadah gambar ini lebar dan tinggi saya di sini dan pada gambar,

208
00:18:21,040 --> 00:18:24,850
karena itu saya hanya akan menambahkan lebar dan tinggi 100% karena

209
00:18:24,850 --> 00:18:25,900
sekarang di

210
00:18:25,950 --> 00:18:27,500
dalam wadah, ini di sini

211
00:18:27,520 --> 00:18:28,750
merujuk pada induk,

212
00:18:28,750 --> 00:18:31,970
jadi ke wadah ini, sehingga ketinggian 60% kemudian juga

213
00:18:32,110 --> 00:18:35,200
akan diterapkan pada gambar tetapi pada wadah gambar itu,

214
00:18:35,200 --> 00:18:40,200
kita sekarang dapat menambahkan jari-jari batas kiri atas 10 dan batas atas Jari-jari kanan 10

215
00:18:40,210 --> 00:18:42,020
sehingga kita memutari sudut-sudut ini

216
00:18:42,100 --> 00:18:48,520
dan sekarang penting, tambahkan overflow disembunyikan di sini karena ini akan memastikan bahwa setiap anak di sana yang merupakan

217
00:18:48,520 --> 00:18:53,400
gambar kita tentu saja tidak bisa tumpang tindih dengan apa yang kita atur di sini.

218
00:18:53,410 --> 00:18:57,960
Jadi sekarang dengan pengaturan ini, kami menambahkan sudut bulat kami di sini kembali ke atas dan

219
00:18:57,970 --> 00:19:02,860
sekarang ini adalah item gambar yang saya inginkan di sini dan tentu saja itu juga daftar yang dapat

220
00:19:03,070 --> 00:19:08,110
digulir di mana Anda juga melihat bahwa gambar-gambar ini dimuat malas secara otomatis yang dapat Anda terus bekerja dengan.

221
00:19:08,800 --> 00:19:13,270
Tentu saja, tujuan selanjutnya bisa jadi kita juga bisa melihat layar detail.