1
00:00:02,180 --> 00:00:07,440
Pada layar detail produk, kami sudah mulai mengerjakan itu, tetapi kami tidak benar-benar menghasilkan

2
00:00:07,850 --> 00:00:10,240
sesuatu yang berguna di sana, sekarang

3
00:00:10,250 --> 00:00:11,600
saatnya untuk mengubahnya.

4
00:00:11,690 --> 00:00:17,570
Untuk itu, saya akan mengganti kode jsx yang saat ini kami gunakan di sana dengan tampilan gulir karena

5
00:00:17,570 --> 00:00:19,790
seperti yang saya sebutkan sebelumnya, kami

6
00:00:19,790 --> 00:00:23,510
akan menampilkan gambar kami di sana, deskripsi produk kami dan ini

7
00:00:23,510 --> 00:00:25,790
bisa menjadi deskripsi yang sangat panjang atau

8
00:00:25,850 --> 00:00:28,410
kami hanya melihat ini pada perangkat yang lebih

9
00:00:28,640 --> 00:00:33,020
kecil atau dalam mode lansekap, jadi kami pasti ingin memiliki beberapa konten yang

10
00:00:33,100 --> 00:00:36,420
dapat digulir di sana dan ngomong-ngomong kami tidak perlu daftar

11
00:00:36,440 --> 00:00:42,020
datar di sini karena konten tidak akan lama sekali, kami tahu cukup banyak bahwa itu tidak akan

12
00:00:42,020 --> 00:00:50,210
menjadi yang lama di muka, sehingga tampilan gulir baik-baik saja dan dalam tampilan gulir itu, Anda sekarang dapat menambahkan komponen gambar yang menampilkan gambar produk

13
00:00:50,220 --> 00:01:01,560
di atas katakanlah dan di bawah itu, kita kemudian dapat menambahkan tombol kami untuk memungkinkan kami untuk tambahkan ini ke troli dan di bawahnya, kita dapat memiliki teks kita, seperti menampilkan harga dan mungkin

14
00:01:01,560 --> 00:01:04,260
teks untuk deskripsi. Jadi untuk gambar, kita

15
00:01:04,270 --> 00:01:08,980
perlu mengatur prop sumber dan itu adalah objek yang memiliki properti URI dan tentu saja kita memiliki produk

16
00:01:09,330 --> 00:01:14,530
pilihan kita di sini, jadi sumbernya hanyalah produk yang dipilih. imageUrl karena produk yang dipilih adalah

17
00:01:14,620 --> 00:01:20,680
jenis yang kami definisikan dalam model produk kami. Pada tombol di sini, kita dapat menambahkan judul

18
00:01:20,680 --> 00:01:26,530
add to cart karena pada akhirnya itulah yang harus dilakukan tombol ini dan onPress tidak melakukan apa-apa untuk

19
00:01:26,620 --> 00:01:32,970
saat ini tetapi nanti kita akan menambahkan ini ke troli. Maka di sini saya ingin menampilkan harga, kami

20
00:01:33,010 --> 00:01:34,390
tidak perlu menampilkan

21
00:01:34,390 --> 00:01:37,600
judul karena itu sudah menjadi bagian dari tajuk,

22
00:01:37,600 --> 00:01:43,630
jadi kami melihat judul di sana tetapi di sini saya ingin menampilkan harga dalam dolar dengan

23
00:01:43,630 --> 00:01:47,810
merujuk ke produk yang dipilih. harga untuk memperbaiki 2 yang

24
00:01:48,100 --> 00:01:50,410
saya lakukan sebelum dan kemudian di sana

25
00:01:50,410 --> 00:01:56,170
juga deskripsi, jadi di sini kami telah memilih Produk. deskripsi, seperti ini.

26
00:01:56,200 --> 00:01:56,560
Oke,

27
00:01:56,590 --> 00:01:57,670
jadi itu terlihat bagus,

28
00:01:57,670 --> 00:01:59,380
sekarang saatnya untuk beberapa gaya tentu saja.

29
00:01:59,380 --> 00:02:04,270
Misalnya untuk gambar kita harus menetapkan lebar dan tinggi karena itu adalah gambar jaringan,

30
00:02:04,270 --> 00:02:09,350
jadi di sini saya akan menambahkan gaya gambar yang harus saya tambahkan ke stylesheet saya.

31
00:02:09,460 --> 00:02:15,040
Sekarang untuk teks di sini, teks ini harus memiliki gaya harga mungkin

32
00:02:15,580 --> 00:02:24,490
yang harus kita tambahkan dan kemudian di sini, teks ini harus memiliki gaya deskripsi, mungkin terdengar seperti nama yang pas.

33
00:02:24,490 --> 00:02:31,690
Sekarang di stylesheet, kita harus menambahkan semua hal ini, jadi mari kita mulai untuk gambar.

34
00:02:31,980 --> 00:02:34,580
Di sana saya akan menambahkan lebar 100%, ini

35
00:02:34,580 --> 00:02:38,730
harus benar-benar mengambil lebar yang tersedia penuh dan ketinggian 300 mungkin dan tentu

36
00:02:38,740 --> 00:02:40,570
saja Anda bisa bermain-main dengan

37
00:02:40,570 --> 00:02:46,810
itu, Anda juga bisa menggunakan nilai persentase untuk itu atau menggunakan dimensi API untuk jenis menghitung ini secara dinamis.

38
00:02:48,000 --> 00:02:52,970
Setelah itu, saya ingin harga saya, teks harga

39
00:02:53,080 --> 00:03:01,810
itu harus memiliki ukuran font 20 karena orang tentu saja dapat melihatnya, warna keabu-abuan itu,

40
00:03:01,870 --> 00:03:09,670
warna keabu-abuan yang gelap ini saya gunakan sebelumnya dan perataan teks pusat sehingga

41
00:03:09,670 --> 00:03:11,780
selalu terpusat,

42
00:03:11,850 --> 00:03:20,640
juga margin pada sumbu vertikal 20 mungkin, jadi di sekitarnya, dari 20 dan kemudian, deskripsi.

43
00:03:21,240 --> 00:03:30,660
Deskripsi sebenarnya dapat memiliki ukuran font katakanlah 14, mari kita lihat apakah itu berfungsi dan di sana, juga

44
00:03:30,680 --> 00:03:38,810
menggunakan pusat pelurusan teks, sesuatu seperti itu. Jika kita menyimpan itu, mari

45
00:03:38,810 --> 00:03:47,420
kita lihat itu, tidak terlihat terlalu buruk. Sekarang untuk tombol, saya ingin mengatur warna yang berbeda, jadi saya akan menambahkan warna di

46
00:03:47,450 --> 00:03:56,170
sini dan mengatur ini untuk warna yang perlu kita impor tentu saja dari folder konstanta kami, Warna. utama dan sekarang jika kita menyimpan

47
00:03:56,200 --> 00:04:03,500
ini, ini terlihat cukup bagus. Di Android, Anda melihat bahwa tombol itu berada tepat di bawah

48
00:04:03,680 --> 00:04:06,300
gambar dan itu adalah tombol lebar penuh.

49
00:04:06,320 --> 00:04:07,900
Ini sama di sini untuk iOS, di

50
00:04:07,910 --> 00:04:08,830
sana kita tidak

51
00:04:08,840 --> 00:04:13,940
melihatnya, tetapi jika saya mengetuk di sini, Anda juga melihat bahwa tombol ini ditekan dan itu sebenarnya bukan yang saya inginkan di sini.

52
00:04:14,150 --> 00:04:14,590
Jadi

53
00:04:14,600 --> 00:04:23,310
yang akan saya lakukan adalah saya akan membungkus tombol ini dalam tampilan yang saya akan memberikan gaya katakanlah tindakan, meskipun hanya satu tindakan di

54
00:04:23,310 --> 00:04:28,160
sini, Anda mungkin dapat memiliki beberapa tombol di sini untuk hal-hal yang berbeda.

55
00:04:28,350 --> 00:04:32,890
Jadi saya akan menambahkan tombol tindakan saya di sini ke stylesheet dan

56
00:04:33,030 --> 00:04:40,530
di sana, kita dapat menetapkan satu margin pada sumbu vertikal 10 ke atas dan bawah dan menyelaraskan item Anda

57
00:04:41,930 --> 00:04:43,260
di tengah yang,

58
00:04:43,430 --> 00:04:50,740
karena arah lengkungan default adalah kolom, tengah itu secara horizontal dan sekarang kita memiliki lebih banyak spasi di sini

59
00:04:50,740 --> 00:04:53,750
dan kita melihat ini lebih baik di

60
00:04:53,780 --> 00:05:00,100
Android, lebih banyak jarak dan tombol sekarang tidak meregang seperti yang seharusnya, pengaturan penyelarasan default lagi

61
00:05:00,100 --> 00:05:05,230
tetapi alih-alih hanya mengambil lebar sebanyak yang dibutuhkan dan disejajarkan berada di tengah.

62
00:05:05,240 --> 00:05:06,310
Jadi ini adalah

63
00:05:06,440 --> 00:05:07,050
pengaturan

64
00:05:07,070 --> 00:05:11,480
yang akan saya ikuti, tentu saja Anda masih dapat mengubah ini dengan cara yang

65
00:05:11,480 --> 00:05:13,150
berbeda jika Anda mau, bagi

66
00:05:13,160 --> 00:05:18,360
saya ini tidak terlihat terlalu buruk, mari kita juga melihat seperti item yang berbeda, mungkin juga yang

67
00:05:18,440 --> 00:05:20,820
ini, ya , itu semua terlihat cukup bagus.

68
00:05:20,870 --> 00:05:25,790
Sekarang untuk teks yang lebih panjang di sini, Anda lihat itu tidak indah, harus ada lebih banyak spasi.

69
00:05:26,240 --> 00:05:34,700
Jadi sebenarnya pada uraian, saya juga akan menambahkan sedikit margin horisontal katakanlah 20 sehingga kita memiliki jarak di sekitar

70
00:05:34,700 --> 00:05:42,600
ini, sehingga jika kita melihat lagi ini, Anda lihat sekarang ini secara otomatis melompat ke baris baru yang

71
00:05:42,600 --> 00:05:43,890
seharusnya .

72
00:05:44,970 --> 00:05:45,290
Oke,

73
00:05:45,360 --> 00:05:46,290
jadi itu terlihat

74
00:05:46,290 --> 00:05:48,380
bagus, sekarang kami memiliki layar detail produk.

75
00:05:48,480 --> 00:05:53,970
Sekarang sebelum kita melanjutkan, saya ingin membawa font saya sendiri dan menggunakannya karena saya tidak senang dengan font

76
00:05:53,970 --> 00:05:54,420
default.