1
00:00:02,250 --> 00:00:07,290
Sekarang kita memiliki dasar-dasar tentang navigasi ke bawah, bahwa kita dapat meneruskan data, mari

2
00:00:07,350 --> 00:00:14,200
kita mundur dan fokus pada aplikasi yang sedang kita bangun yang tentu saja tidak terlihat bagus dan mari

3
00:00:14,190 --> 00:00:18,450
kita fokus pada item kategori ini di sini di grid.

4
00:00:18,450 --> 00:00:21,210
Kami dapat mengetuknya tetapi jelas

5
00:00:21,210 --> 00:00:27,200
ini bukan aplikasi yang ingin Anda gunakan. Sekarang untuk membuatnya lebih dapat digunakan di layar kategori

6
00:00:27,240 --> 00:00:30,400
di sini, saya akan benar-benar mengambil item ini di sini,

7
00:00:30,490 --> 00:00:36,030
opacity yang dapat disentuh ini, jadi item grid ini dan meng-outsource ini ke dalam komponen yang terpisah, bukan

8
00:00:36,030 --> 00:00:43,210
sesuatu yang harus Anda lakukan tetapi sesuatu yang mungkin ingin Anda pertimbangkan untuk dilakukan hanya untuk menjaga komponen Anda lebih ramping dan bersih.

9
00:00:43,260 --> 00:00:49,890
Untuk itu di folder komponen, saya akan menambahkan CategoryGridTile. File js, nama tentu saja sepenuhnya terserah

10
00:00:49,890 --> 00:00:56,400
Anda dan di sana, kita perlu mengimpor Bereaksi dari Bereaksi, kita tentu juga akan memerlukan beberapa

11
00:00:56,400 --> 00:01:03,990
hal dari Bereaksi Asli untuk membangun komponen di sana, yaitu kita akan perlu opacity terjamah dari tentu saja, kita

12
00:01:04,020 --> 00:01:11,550
akan memerlukan tampilan, kita akan membutuhkan teks dan kita akan memerlukan stylesheet sehingga kita juga dapat gaya ini

13
00:01:11,550 --> 00:01:14,900
di sini dan sekarang kita dapat membuat komponen

14
00:01:14,940 --> 00:01:22,980
kotak kategori kisi di sini yang menerima beberapa alat peraga. Kita akan memerlukan stylesheet di sini yang

15
00:01:22,980 --> 00:01:31,110
akan saya simpan di konstan gaya dan tentu saja seperti biasa, kita dapat mengekspor

16
00:01:31,110 --> 00:01:39,810
komponen dan di dalam fungsi komponen ini, saya akan mengembalikan kode jsx saya hanya memotong

17
00:01:39,810 --> 00:01:46,810
layar kategori di sini . Jadi di sini, pengaturan opacity yang dapat disentuh, item kisi ini sudah diatur

18
00:01:46,810 --> 00:01:52,560
tetapi kita harus mengubah beberapa hal. Di layar kategori misalnya, saya menyiapkan gaya item kotak di sini. Sekarang kita bisa meninggalkannya

19
00:01:52,560 --> 00:01:58,530
di sini dan menyebarkannya ke kotak petak kami dan kemudian menggabungkannya di sana saat Anda mempelajarinya, tetapi

20
00:01:58,530 --> 00:02:03,510
saya hanya akan mengatur semua gaya dalam komponen itu sendiri karena kami hanya akan

21
00:02:03,540 --> 00:02:09,810
menggunakan petak kisi kategori di kisi pada layar kategori. Jadi saya akan menambahkan gaya item kotak di sini

22
00:02:09,870 --> 00:02:10,830
ke stylesheet

23
00:02:10,860 --> 00:02:17,280
dalam file ini, maka ini berfungsi lagi, penangan onPress belum berfungsi, kami akan segera memperbaikinya dan sekarang kami dapat

24
00:02:17,280 --> 00:02:24,720
kembali ke layar kategori dan tentu saja, impor komponen kami. Jadi impor komponen kotak kisi kategori di

25
00:02:24,750 --> 00:02:28,250
sana dari folder komponen dan

26
00:02:28,290 --> 00:02:37,080
di sana, kisi kotak kategori dan sekarang cukup kembalikan di sini ketika kami membuat item baru.

27
00:02:37,080 --> 00:02:38,990
Sekarang tentu saja seperti

28
00:02:39,000 --> 00:02:45,300
ini tidak akan berfungsi, kita perlu meneruskan beberapa data ke kotak petak agar dapat berfungsi dengan benar di

29
00:02:45,300 --> 00:02:53,880
sana dan kita juga perlu memastikan bahwa menekan ini tidak menavigasi kita. Sekarang untuk itu, saya akan memberikan data yang kita butuhkan di sana

30
00:02:53,880 --> 00:03:01,140
yang merupakan judulnya, jadi itu itemData. barang. judul dan itu sekarang prop yang

31
00:03:01,140 --> 00:03:08,910
dapat kita gunakan dalam ubin kotak kategori dan saya juga ingin meneruskan prop lain yang lulus dalam fungsi yang kemudian dapat kita

32
00:03:08,940 --> 00:03:18,240
jalankan untuk menavigasi dan saya akan memberi nama ini pada Pilih tetapi Anda dapat memberi nama ini apa pun yang Anda inginkan dan di sana, saya

33
00:03:18,240 --> 00:03:26,700
hanya ingin mengeksekusi kode yang saat ini saya jalankan di onPress. Jadi saya akan memotong ini dari sini dari kotak

34
00:03:26,700 --> 00:03:33,000
kisi kategori, pindahkan ini kembali ke layar kategori, ke fungsi ini saya beralih ke onSelect

35
00:03:33,000 --> 00:03:38,700
dan sekarang yang harus kita lakukan adalah memicu onSelect dari dalam kotak kategori

36
00:03:38,730 --> 00:03:48,110
kisi, itu tentu saja pola normal Anda akan tahu dari Bereaksi. Jadi kembali ke ubin kisi kategori, onPress dapat dengan mudah menunjuk ke

37
00:03:48,320 --> 00:03:52,390
props onSelect untuk memicu fungsi yang diteruskan pada prop onSelect.

38
00:03:52,550 --> 00:03:57,370
Sekarang judul yang saya produksi di sini juga bisa menjadi alat peraga. judul karena kami mendapatkan prop

39
00:03:57,380 --> 00:04:03,380
judul ini sebagai penyangga pada kotak kisi kategori kami, kami meneruskannya di sini.

40
00:04:05,100 --> 00:04:11,460
Dengan itu, kami membagi komponen kami sedikit, tetapi tentu saja sekarang saya juga

41
00:04:11,460 --> 00:04:17,130
ingin mengerjakan styling lebih banyak. Jadi kembali ke kotak kisi kategori, saya misalnya

42
00:04:17,130 --> 00:04:21,580
ingin menggunakan warna yang saya siapkan karena setiap kategori mendapatkan warna yang disimpan

43
00:04:21,660 --> 00:04:28,620
dalam properti warna di sini, jadi alangkah baiknya untuk menggunakannya. Oleh karena itu kami dapat meneruskan ubin kotak kategori juga, meneruskan warna di sini, tentu saja Anda

44
00:04:28,620 --> 00:04:34,070
dapat memberi nama prop ini apa pun yang Anda inginkan pada item tersebut. properti warna dan

45
00:04:34,200 --> 00:04:40,950
di sini, itu harus. warna karena kami menamai warna properti di sini dalam model dan sekarang

46
00:04:40,950 --> 00:04:44,360
dalam ubin kotak kategori, kita bisa menggunakan warna itu untuk gaya ini di sini.

47
00:04:44,460 --> 00:04:50,760
Jadi bagaimana kemudian gaya ini, bagaimana seharusnya ini terlihat? Dengan menambahkan gaya ke tampilan yang kami miliki di

48
00:04:50,760 --> 00:04:56,460
dalam opacity yang dapat disentuh karena komponen opacity yang dapat disentuh itu sendiri tidak terlihat tetapi tampilan

49
00:04:56,460 --> 00:05:01,250
tidak dan di sana, kami dapat mengirimkan objek dan mengatur warna latar belakang di

50
00:05:01,260 --> 00:05:04,620
sini untuk alat peraga. warna.

51
00:05:04,740 --> 00:05:08,860
Baiklah mari kita lihat bagaimana kelihatannya, jika kita menyimpannya dan kita menunggu ini untuk

52
00:05:08,950 --> 00:05:11,080
memuat ulang, tidak terlihat terlalu buruk

53
00:05:11,110 --> 00:05:15,970
tetapi terlalu kecil, itu harus mengisi seluruh item kisi dan bukan hanya baris dengan teks di sana.

54
00:05:16,180 --> 00:05:25,210
Jadi untuk meningkatkan itu, saya akan benar-benar memiliki gaya inline di sini tapi saya akan menggabungkan ini bersama-sama menjadi objek di sekitarnya

55
00:05:25,210 --> 00:05:33,770
dengan konfigurasi styling lain yang saya atur di stylesheet dan saya akan memberi nama wadah ini, Anda dapat menamainya apa

56
00:05:33,790 --> 00:05:35,610
pun yang Anda inginkan,

57
00:05:35,680 --> 00:05:39,270
gaya wadah, tarik semua pasangan kunci-nilai di sana

58
00:05:39,620 --> 00:05:47,450
juga sehingga kita menggabungkan gaya ini di sini dan sekarang, wadah adalah objek stylesheet yang dapat kita tambahkan di

59
00:05:47,540 --> 00:05:54,530
sana dan di sini, kita dapat mengatur satu fleksibel untuk memastikan bahwa setiap item mengisi semua

60
00:05:54,530 --> 00:05:58,880
ruang yang didapat dan sekarang ini terlihat jauh lebih baik.

61
00:05:59,030 --> 00:06:02,330
Sekarang saya masih belum 100% senang,

62
00:06:03,080 --> 00:06:10,080
saya ingin menambahkan sedikit radius perbatasan di sini, katakanlah 10 memiliki beberapa sudut bulat dan

63
00:06:10,400 --> 00:06:14,310
tentu saja, Anda dapat mengatur gaya yang Anda inginkan

64
00:06:14,570 --> 00:06:28,320
di sini, Anda lebih suka, saya juga akan mengatur warna bayangan hitam dan bayangan opacity. 26 dan bayangan offset lebar 0, tinggi 2 dan radius bayangan 10 dan ketinggian

65
00:06:28,380 --> 00:06:37,010
3, elevasi untuk Android jika Anda ingat karena properti bayangan ini hanya mempengaruhi iOS, sehingga kami mendapatkan sedikit

66
00:06:37,020 --> 00:06:42,720
kartu tiga dimensi ini. lihat dan tentu saja seperti yang saya

67
00:06:42,810 --> 00:06:48,680
sebutkan, Anda dapat gaya ini dengan cara apa pun yang Anda inginkan.

68
00:06:48,690 --> 00:06:54,240
Sekarang sebagai tambahan, saya ingin memastikan bahwa teks ini di sini berada di sudut kanan bawah dan

69
00:06:54,240 --> 00:06:55,380
tentu saja memiliki

70
00:06:55,380 --> 00:07:00,960
sedikit lapisan di sekitarnya, sedikit jarak di sekitarnya. Jadi saya akan menambahkan sedikit padding di sini,

71
00:07:01,140 --> 00:07:08,730
katakanlah 10 dan sekarang atur konten untuk flex-end, arah flex dalam wadah tentu saja atas ke bawah karena itu kolom, jadi

72
00:07:08,730 --> 00:07:14,340
ujung fleksibel akan memindahkan ini ke bawah sini dan sekarang juga untuk memindahkannya ke kanan

73
00:07:14,340 --> 00:07:17,100
pada sumbu horizontal, saya mengatur menyelaraskan

74
00:07:17,220 --> 00:07:22,770
item ke ujung juga dan ini bergerak ke ujung sumbu silang yang dibiarkan ke kanan

75
00:07:22,800 --> 00:07:29,900
dalam tampilan normal di mana Anda tidak ubah arah fleks. Dengan itu, kita mendapatkan tampilan yang menurut saya lebih

76
00:07:29,930 --> 00:07:36,230
baik, tetapi tentu saja, teks di sini, gaya teks juga dapat berubah dan sedikit lebih padding mungkin terlihat

77
00:07:36,230 --> 00:07:37,430
bagus, mungkin 15

78
00:07:37,430 --> 00:07:43,100
tetapi tentu saja kita dapat bereksperimen dengan itu dan juga satu catatan penting, dalam aplikasi ini

79
00:07:43,100 --> 00:07:47,330
saya tidak akan fokus membangun pengalaman yang benar-benar responsif di sini, saya

80
00:07:47,330 --> 00:07:53,450
akan mencoba untuk membuat ini singkat dan ringkas karena fokus utama dari modul ini tentu saja adalah

81
00:07:53,690 --> 00:07:58,720
navigasi, maka saya tidak akan mengoptimalkan ini untuk semua layar dan platform yang memungkinkan.

82
00:07:58,720 --> 00:08:01,200
Ini adalah sesuatu yang tentu saja dapat Anda lakukan sebagai

83
00:08:01,250 --> 00:08:06,860
latihan, saya tidak akan melakukan hal yang tidak perlu untuk mengasapi modul ini, jadi saya hanya akan mengatur beberapa gaya yang

84
00:08:06,860 --> 00:08:08,450
terlihat bagus pada emulator ini.

85
00:08:08,450 --> 00:08:14,520
Yang sedang berkata, sedikit lebih padding mungkin masuk akal dan saya juga ingin gaya

86
00:08:14,720 --> 00:08:17,740
judul di sini, maka saya akan menambahkan

87
00:08:17,810 --> 00:08:19,330
katakanlah gaya

88
00:08:19,430 --> 00:08:22,040
judul di sini, mengatur di stylesheet,

89
00:08:22,040 --> 00:08:28,670
mari kita tambahkan di sana-sini, saya ingin menggunakan keluarga font saya, buka tanpa huruf tebal yang

90
00:08:28,670 --> 00:08:39,110
bisa saya gunakan tentu saja karena saya mendaftar di sini di app. js, jadi buka sans bold ditambahkan sekarang di sini dan mungkin juga mengubah ukuran

91
00:08:39,110 --> 00:08:42,870
font sedikit menjadi 22. Kami menyimpan ini,

92
00:08:42,880 --> 00:08:45,340
ini terlihat cukup baik.

93
00:08:45,470 --> 00:08:48,560
Sekarang ada satu hal terakhir yang ingin saya

94
00:08:49,750 --> 00:08:58,330
lakukan pada ubin kotak kategori saya, pada teks di sini, saya akan mengatur jumlah baris menjadi 2 sehingga setiap teks yang akan lebih panjang

95
00:08:58,330 --> 00:09:07,800
dari itu sebenarnya hanya akan terpotong yang menurut saya terlihat sedikit lebih baik. Dan yang tak kalah pentingnya, Anda mungkin memperhatikan bahwa

96
00:09:07,870 --> 00:09:14,560
pada Android untuk cahaya dan indah, ini ada di sebelah kiri di sini karena dipecah

97
00:09:14,560 --> 00:09:19,670
menjadi dua baris, untuk memastikan bahwa ini juga di sebelah kanan,

98
00:09:19,720 --> 00:09:27,900
pada judul di sini, saya akan mengatur luruskan teks ke kanan untuk memaksa ini berada di sebelah kanan.

99
00:09:28,000 --> 00:09:30,420
Jadi mari kita tunggu itu untuk

100
00:09:33,070 --> 00:09:35,720
memuat ulang dan sekarang itu terlihat seperti seharusnya.

101
00:09:35,720 --> 00:09:38,020
Nah, itu tidak terlalu buruk di

102
00:09:38,060 --> 00:09:43,850
sini, sekarang Anda mungkin memperhatikan bahwa efeknya terlihat agak aneh jika saya mengetuk item di sini,

103
00:09:43,850 --> 00:09:46,520
kita mendapatkan perbatasan ekstra aneh di sekitarnya.

104
00:09:46,550 --> 00:09:53,750
Sekarang satu hal yang masih akan saya lakukan di sini yang benar-benar opsional tetapi tetap, saya akan menambahkannya di sini, saya akan

105
00:09:53,750 --> 00:10:00,710
menambahkan platform API dan juga menambahkan umpan balik asli yang dapat disentuh untuk benar-benar menggunakan efek riak alih-alih opacity yang dapat

106
00:10:00,710 --> 00:10:02,090
disentuh jika didukung.

107
00:10:02,090 --> 00:10:11,600
Jadi di sini, saya akan memiliki komponen yang dapat disentuh saya yang secara default

108
00:10:11,790 --> 00:10:21,510
adalah opacity terjamah tetapi jika platform. os sama dengan Android dan seperti yang Anda pelajari sebelumnya dalam kursus, versinya lebih besar atau

109
00:10:21,510 --> 00:10:26,340
sama dengan 21, maka kita tahu bahwa umpan balik asli yang disentuh didukung, jadi saya akan

110
00:10:26,340 --> 00:10:31,100
mengatur komponen yang dapat disentuh sama dengan umpan balik asli yang dapat disentuh, seperti ini.

111
00:10:31,290 --> 00:10:35,820
Gunakan komponen yang dapat disentuh di sini alih-alih opacity yang dapat

112
00:10:35,820 --> 00:10:38,730
disentuh dan dengan itu, kita harus memiliki

113
00:10:38,730 --> 00:10:41,000
efek riak yang bagus pada

114
00:10:41,130 --> 00:10:46,070
Android, di iOS kita memiliki efek opacity yang kita inginkan dan di

115
00:10:46,080 --> 00:10:50,520
Android, kita sekarang memiliki efek riak tetapi gaya tidak aktif sekarang.

116
00:10:50,550 --> 00:10:57,830
Namun ini adalah sesuatu yang dapat kita perbaiki dengan menambahkan tampilan tambahan di sekitar ini yang menerima gaya item grid

117
00:10:57,840 --> 00:11:01,840
kita daripada komponen yang dapat disentuh di sini dan dengan

118
00:11:02,010 --> 00:11:08,220
itu, kita hanya perlu menambahkan satu properti style tambahan pada komponen yang dapat disentuh dan mengatur

119
00:11:08,220 --> 00:11:08,700
flex.

120
00:11:08,730 --> 00:11:10,430
Saya melakukannya dengan gaya inline

121
00:11:10,440 --> 00:11:16,770
di sini cepat dan kotor, Anda bisa menambahkan gaya terpisah di stylesheet. Dengan itu terlihat dan terasa sama di

122
00:11:16,800 --> 00:11:17,800
iOS dan

123
00:11:17,910 --> 00:11:21,370
sekarang juga di Android, efek riak ada di sana.

124
00:11:21,370 --> 00:11:27,870
Sekarang ini tidak menggunakan sudut bulat kami, melainkan membuat persegi atau persegi panjang dan Anda juga belajar sebelumnya

125
00:11:28,080 --> 00:11:31,100
bagaimana cara memperbaikinya. Untuk memperbaikinya, yang

126
00:11:31,110 --> 00:11:35,820
harus kita lakukan adalah pada item grid, kita tambahkan radius batas 10

127
00:11:35,910 --> 00:11:42,930
dan kemudian kita benar-benar menambahkan overflow disembunyikan untuk memastikan bahwa item anak tidak dapat dirender di luar

128
00:11:42,930 --> 00:11:43,950
tampilan pembungkus

129
00:11:43,950 --> 00:11:49,010
yang berarti bahwa riak efeknya tidak bisa keluar dari kotak bulat itu

130
00:11:49,020 --> 00:11:54,540
Sekarang kita memiliki tampilan itu dan itu satu penyesuaian yang ingin saya buat di sini untuk platform yang berbeda

131
00:11:54,540 --> 00:11:58,050
dan dengan itu, itu tidak terlihat terlalu buruk, saya akan mengatakan.

132
00:11:58,050 --> 00:12:04,110
Sekarang tentu saja, Anda dapat mengubah tampilan itu, Anda dapat mengubah ukuran font dan sebagainya, membuatnya terlihat

133
00:12:04,110 --> 00:12:07,080
sangat bagus di perangkat yang Anda uji.

134
00:12:07,080 --> 00:12:11,940
Saya senang dengan tampilan ini dan sekarang saatnya untuk membuat beberapa resep ketika kami

135
00:12:11,970 --> 00:12:13,470
memilih kategori di sini.