1
00:00:02,420 --> 00:00:06,140
Jadi mari kita fokus pada layar detail makanan untuk

2
00:00:06,170 --> 00:00:06,770
saat

3
00:00:09,660 --> 00:00:13,950
ini, jadi bagian di sini kita melihat rincian resep yang dipilih.

4
00:00:14,070 --> 00:00:19,590
Saat ini, kami hanya memiliki konten dummy di sana, dari layar detail makanan dan itu tentu saja bukan konten

5
00:00:19,590 --> 00:00:21,810
yang benar-benar ingin saya miliki di sana, alih-alih

6
00:00:22,020 --> 00:00:24,190
apa yang seharusnya ada di sana?

7
00:00:24,210 --> 00:00:30,280
Nah, jika kita melihat pada model makan kita, mungkin masuk akal untuk memiliki gambar di sana, perlu

8
00:00:30,330 --> 00:00:35,340
diingat bahwa judul sudah ditampilkan di header kita, jadi masuk akal untuk memiliki gambar

9
00:00:35,340 --> 00:00:43,710
di sini di bagian atas mungkin dan di bawah itu, mungkin ulangi saja durasi, keterjangkauan dan kompleksitas seperti yang kita lakukan di sini

10
00:00:43,710 --> 00:00:47,140
di bawah resep kami dan kemudian juga di

11
00:00:47,370 --> 00:00:56,730
bawah itu, daftar semua bahan dan langkah-langkah yang diperlukan untuk membuat hidangan itu. Jadi pada akhirnya apa yang ingin saya miliki di halaman ini

12
00:00:56,730 --> 00:01:02,170
di sini di MealDetailScreen dan oleh karena itu, saya pikir masuk akal untuk

13
00:01:02,340 --> 00:01:08,220
pertama-tama menambahkan tampilan gulir karena kita pasti akan memiliki banyak konten di sana yang

14
00:01:08,220 --> 00:01:15,340
kemungkinan besar tidak akan masuk ke satu layar dan tentu saja tidak pada semua ukuran perangkat yang memungkinkan.

15
00:01:15,390 --> 00:01:22,320
Jadi saya akan menambahkan tampilan gulir di sini dan membungkusnya di sekitar konten saya di sini.

16
00:01:22,330 --> 00:01:24,920
Sekarang kita akan memiliki beberapa bagian

17
00:01:25,030 --> 00:01:30,750
berbeda di sini, misalnya di bagian paling atas, saya ingin memiliki gambar saya dan untuk ini,

18
00:01:30,750 --> 00:01:36,300
saya juga akan mengimpor komponen gambar dari Bereaksi Asli di sini sehingga kami dapat membuat

19
00:01:36,300 --> 00:01:39,030
gambar di sini, tidak gambar latar belakang tetapi

20
00:01:39,270 --> 00:01:45,260
gambar normal dan saya ingin menambahkan ini, katakan saja di sini tepat di atas, sesuatu seperti itu.

21
00:01:45,260 --> 00:01:51,390
Sekarang setelah gambar, saya ingin memiliki tampilan dengan durasi, keterjangkauan dan kompleksitas seperti yang saya sebutkan, jadi pada dasarnya pengaturan

22
00:01:51,400 --> 00:01:57,930
yang sama yang kita miliki di item makanan, ini di sini bisa Anda katakan dan karena itu saya benar-benar akan menyalin

23
00:01:57,930 --> 00:02:03,330
tampilan dari sana dan kemudian kita bisa menyesuaikannya seperti yang kita butuhkan di sini di MealDetailScreen, jadi

24
00:02:03,360 --> 00:02:06,220
saya hanya akan mengganti tampilan ini dengan tampilan salin.

25
00:02:06,360 --> 00:02:10,510
Tentu saja itu mengharuskan kita untuk mengimpor komponen teks

26
00:02:10,710 --> 00:02:11,700
default di

27
00:02:11,720 --> 00:02:16,370
sini, jadi mari kita tambahkan ini, mari kita impor teks

28
00:02:16,610 --> 00:02:21,450
default dari komponen teks standar. Jadi itulah baris berikutnya dan

29
00:02:21,500 --> 00:02:26,580
sesudahnya, saya ingin memiliki bahan dan langkah-langkah yang perlu Anda lakukan.

30
00:02:26,890 --> 00:02:39,790
Jadi kita dapat menambahkan beberapa teks di sini di mana kita mengatakan bahan dan di sana, saya ingin juga menerapkan gaya, seperti gaya teks, judul, sesuatu seperti ini atau hanya

31
00:02:39,820 --> 00:02:42,910
judul karena saya ingin memiliki header

32
00:02:45,630 --> 00:02:52,320
yang tebal di sini, mungkin meningkatkan ukuran font. Di bawah itu, miliki daftar bahan saya, jadi daftar

33
00:02:52,320 --> 00:02:58,770
bahan dan itu tentu saja bukan konten akhir, sebagai gantinya kita akan membuat daftar di sini dan

34
00:02:58,770 --> 00:03:07,260
di bawah itu, saya akan mengulangi ini di sini karena saya ingin memiliki judul di mana saya katakan langkah-langkah dan kemudian daftar

35
00:03:07,980 --> 00:03:14,760
langkah-langkah di bawah itu dan sekarang saya akan menyingkirkan konten lama ini di sana dan itulah yang ingin

36
00:03:14,760 --> 00:03:15,940
saya kerjakan.

37
00:03:15,960 --> 00:03:20,790
Sekarang tentu saja, semua gaya hilang dan juga menopang durasi dan seterusnya, itu tidak

38
00:03:20,790 --> 00:03:26,080
menghasilkan apa-apa, sebaliknya kita harus bekerja dengan makanan yang dipilih di sini, durasi makanan yang

39
00:03:26,130 --> 00:03:34,560
dipilih, kompleksitas makanan yang dipilih, keterjangkauan makanan yang dipilih dan untuk gambar misalnya, saya ingin menambahkan sumber di sini, sumber karena ini adalah gambar

40
00:03:34,590 --> 00:03:42,210
jaringan, adalah objek dengan properti URI yang menunjuk pada selectedMeal. imageUrl untuk memuat ini dan kita juga perlu menerapkan

41
00:03:42,240 --> 00:03:47,210
gaya di sana, untuk mengatur lebar dan tinggi, jadi di sini

42
00:03:47,310 --> 00:03:53,190
saya ingin menunjukkan gaya gambar katakanlah dan semua gaya ini hilang seperti yang saya

43
00:03:53,190 --> 00:04:02,470
katakan jadi mari kita tambahkan itu. Di sini untuk gaya ini, saya juga ingin mengatakan gaya. detail mungkin karena kami menampilkan detail resep

44
00:04:02,470 --> 00:04:08,680
ini dan mari kita turun ke stylesheet karena itu, hapus layar yang tidak kita

45
00:04:08,680 --> 00:04:09,340
butuhkan

46
00:04:09,520 --> 00:04:16,920
lagi, jadi mari kita tambahkan gambar dan detail. Sekarang untuk detail, kita perlu mengatur arah flex ke baris karena itu

47
00:04:16,920 --> 00:04:19,180
harus semua detail dalam satu baris.

48
00:04:19,380 --> 00:04:27,060
Kami dapat menambahkan sedikit padding di semua arah, mungkin 15 dan juga menambahkan konten ruang sekitar

49
00:04:27,120 --> 00:04:33,550
untuk mendistribusikan item detail kami dengan baik di sini, yang seharusnya bagus.

50
00:04:35,210 --> 00:04:42,270
Selain itu, pada gambar di sini, kita juga perlu menambahkan gaya, di sana lebarnya harus 100% katakanlah, untuk

51
00:04:42,440 --> 00:04:48,100
mengambil lebar penuh yang tersedia dan untuk tinggi, saya akan pergi dengan 200, meskipun

52
00:04:48,140 --> 00:04:49,580
tentu saja Anda

53
00:04:49,580 --> 00:04:54,680
bisa menghitung secara dinamis ini dengan dimensi API misalnya untuk selalu mengambil

54
00:04:54,740 --> 00:05:00,720
sebagian tertentu dari ketinggian yang tersedia atau hanya bermain-main dengan nilai yang berbeda di sini.

55
00:05:00,890 --> 00:05:03,520
Saya akan pergi dengan itu dan melihat di sini dan itu

56
00:05:03,740 --> 00:05:04,940
tidak terlihat terlalu buruk, itu

57
00:05:04,970 --> 00:05:06,130
tidak terlalu buruk.

58
00:05:07,450 --> 00:05:13,990
Sekarang Anda pasti dapat juga mencoba beberapa pekerjaan bonus di sini, beberapa tugas bonus dan misalnya mewarnai

59
00:05:13,990 --> 00:05:20,200
detail-detail ini - sederhana, terjangkau dan durasinya tergantung pada apakah itu agak pendek atau tergantung

60
00:05:20,200 --> 00:05:25,810
pada nilai-nilai berbeda yang Anda miliki untuk sederhana, untuk kompleksitas dan keterjangkauan .

61
00:05:25,810 --> 00:05:31,150
Ini bukan sesuatu yang akan saya lakukan di sini, tetapi Anda dapat melihat pada data makanan tentu saja untuk melihat

62
00:05:31,150 --> 00:05:37,090
nilai mana yang kami miliki di sana untuk memperoleh apa yang pendek, apa yang sedang, berapa lama dan untuk melihat nilai mana

63
00:05:37,090 --> 00:05:41,800
yang digunakan untuk kompleksitas dan seterusnya dan kemudian Anda benar-benar dapat menambahkan beberapa jika centang untuk menerapkan

64
00:05:41,800 --> 00:05:47,470
gaya berbeda pada nilai yang berbeda yang kami hasilkan di sini di layar detail makanan untuk detail ini sehingga Anda mewarnai

65
00:05:47,470 --> 00:05:52,360
teks secara berbeda tergantung pada panjang atau tidaknya. Ini bukan sesuatu yang akan saya lakukan

66
00:05:52,360 --> 00:05:58,150
di sini karena ini hanya pekerjaan tambahan yang tidak terlalu menambah navigasi yang merupakan fokus

67
00:05:58,150 --> 00:05:59,740
dari modul ini.

68
00:05:59,740 --> 00:06:08,110
Jadi sebagai gantinya, saya akan fokus pada bahan dan langkah-langkah dan di sana, langkah pertama adalah memastikan bahwa judul di

69
00:06:08,530 --> 00:06:10,250
sini ditata dengan benar.

70
00:06:10,330 --> 00:06:17,660
Jadi mari kita tambahkan judul ke stylesheet dan di sana, saya akan menambahkan keluarga font dan mengatur ini

71
00:06:19,080 --> 00:06:26,790
untuk membuka tanpa huruf tebal, mengatur ukuran font menjadi 22 mungkin dan mengatur teks menyelaraskan ke pusat ke pusat teks

72
00:06:26,810 --> 00:06:32,160
di tengah dan dengan itu jika kami periksa ini, ini terlihat cukup bagus.

73
00:06:32,230 --> 00:06:37,540
Sekarang saya juga ingin menampilkan bahan-bahan saya dalam langkah-langkah saya tentu saja dan untuk itu, penting untuk

74
00:06:37,540 --> 00:06:40,770
memahami bahwa dalam data dummy, ini adalah array, ini adalah

75
00:06:40,780 --> 00:06:42,480
bahan-bahan saya misalnya, ini

76
00:06:42,490 --> 00:06:49,540
adalah langkah-langkah saya dan Anda melihat ada teks di dalamnya array. Jadi saya hanya ingin menampilkan teks saya di sini sebagai

77
00:06:49,720 --> 00:06:56,410
daftar dan saya tidak akan menggunakan FlatList karena Anda bisa melakukan itu, Anda bisa memiliki wadah yang dapat digulir di sana

78
00:06:56,410 --> 00:07:01,470
sehingga untuk mengatakan tapi saya hanya akan membuat bahan dan langkah-langkah di atas masing-masing lain.

79
00:07:01,480 --> 00:07:07,690
Jadi di sini, kita dapat menggunakan pendekatan lama yang baik yang kita kenal dari Vanilla React atau React

80
00:07:07,690 --> 00:07:14,140
untuk web yang juga saya tunjukkan sebelumnya dalam kursus. Kita dapat menggunakan makanan pilihan kita dan di sana, bahan-bahan

81
00:07:14,140 --> 00:07:17,640
yang merupakan rangkaian string dan memetakan ini ke dalam array komponen,

82
00:07:17,650 --> 00:07:23,230
itulah cara Anda dapat menampilkan daftar data dalam Bereaksi dan juga Bereaksi Asli dan sering, Anda menggunakan FlatList

83
00:07:23,230 --> 00:07:27,660
tetapi di sini kami tidak perlu karena itu bukan jumlah yang tak terbatas sehingga

84
00:07:27,670 --> 00:07:33,300
kami tidak perlu optimasi ini dan kami memiliki tampilan gulir pembungkus di seluruh layar sehingga kami juga dapat

85
00:07:33,400 --> 00:07:38,050
menggulir jika kami mengeluarkan lebih dari yang pas di layar, jadi kami benar-benar baik-baik saja

86
00:07:38,050 --> 00:07:39,950
menggunakan pendekatan ini dan oleh karena

87
00:07:39,950 --> 00:07:45,220
itu di sini, saya akan memiliki bahan tunggal saya dalam fungsi peta ini dan peta adalah metode

88
00:07:45,220 --> 00:07:46,900
yang dibangun dalam JavaScript seperti

89
00:07:46,990 --> 00:07:50,030
yang Anda tahu dan di sini kita perlu mengembalikan

90
00:07:50,170 --> 00:07:55,660
elemen jsx sekarang dan apa yang ingin saya kembalikan adalah komponen teks di mana saya hanya menampilkan bahan

91
00:07:55,720 --> 00:07:56,880
karena bahan

92
00:07:56,890 --> 00:07:59,010
adalah array string, jadi bahan hanyalah string

93
00:07:59,020 --> 00:08:03,280
dan kemudian di sini kita juga perlu menyediakan kunci, itu persyaratan oleh React dan

94
00:08:03,280 --> 00:08:07,980
kita bisa menggunakan bahan sebagai kunci karena kita akan selalu miliki setiap bahan hanya sekali.

95
00:08:07,990 --> 00:08:10,230
Jadi itu dijamin unik, begitulah cara

96
00:08:10,240 --> 00:08:12,510
makan kita diatur dan dengan itu jika kita

97
00:08:12,550 --> 00:08:19,520
menyimpan ini dan kita melihat resep di sini, kita melihat bahan-bahan kita. Sekarang untuk penataan, kita tentu dapat melakukan sesuatu

98
00:08:19,520 --> 00:08:21,620
di sana dan saya

99
00:08:21,650 --> 00:08:26,960
akan melakukannya dalam satu detik tetapi sebelum saya melakukannya, izinkan saya mengulangi ini

100
00:08:26,960 --> 00:08:34,250
untuk langkah-langkah di sini, ganti teks ini dengan dipilihMeal. langkah-langkah dan kemudian output setiap langkah di sini yang juga

101
00:08:34,350 --> 00:08:41,910
hanya string dan yang juga unik dalam teks dan dengan itu ditambahkan, kita juga harus melihat langkah-langkah untuk makan kita, memang kita lakukan.

102
00:08:42,630 --> 00:08:46,730
Sekarang lagi, styling dapat ditingkatkan sedikit dan kami akan melakukan itu dan

103
00:08:47,010 --> 00:08:53,460
saya pikir masuk akal untuk membuat komponen terpisah atau membuat fungsi untuk ini dan saya akan membuat komponen terpisah, kami akan

104
00:08:53,460 --> 00:08:58,830
menyimpannya di file yang sama meskipun karena kami benar-benar hanya menggunakannya dalam file itu tetapi Anda juga

105
00:08:58,830 --> 00:08:59,310
bisa

106
00:08:59,340 --> 00:09:03,260
membuat file baru, sepenuhnya terserah Anda. Di sana saya akan memiliki

107
00:09:03,270 --> 00:09:11,340
item daftar saya yang menerima alat peraga tempat saya kembali dan sekarang di sini saya ingin menggunakan tampilan yang

108
00:09:11,350 --> 00:09:17,500
saya impor sebagai pembungkus sehingga saya dapat mendesain wadah ini dan di sana, memiliki

109
00:09:17,500 --> 00:09:24,690
teks saya di mana saya menampilkan alat peraga anak-anak dan sekarang tampilan di sini akan mendapatkan

110
00:09:24,700 --> 00:09:28,450
gaya dari gaya. ListItem mungkin agar kita dapat menata

111
00:09:28,450 --> 00:09:33,490
ini dengan baik dan di sini tentu saja, saya tidak ingin menggunakan teks tetapi sebenarnya teks standar,

112
00:09:33,490 --> 00:09:34,630
juga di sini

113
00:09:34,780 --> 00:09:38,010
tentu saja sehingga kita mengambil keuntungan dari teks kustom kita sendiri.

114
00:09:38,170 --> 00:09:47,430
Sekarang untuk gaya item daftar di sini, mari kita pergi ke stylesheet dan menambahkan item daftar dan setiap item daftar

115
00:09:47,460 --> 00:09:55,530
harus memiliki margin, margin vertikal katakanlah 10 dan margin horizontal katakanlah 20, sehingga lebih banyak jarak ke

116
00:09:55,530 --> 00:10:05,600
kiri dan kanan dan mari kita juga mungkin menambahkan warna perbatasan warna abu-abu terang di sini dengan #ccc dan lebar perbatasan 1,

117
00:10:05,600 --> 00:10:09,540
kita akan melihat bagaimana itu terlihat dan kemudian

118
00:10:09,540 --> 00:10:16,730
juga menambahkan sedikit padding di sana, 10 di semua arah dan kami Akan melihat bagaimana

119
00:10:17,570 --> 00:10:18,930
itu terlihat.

120
00:10:18,950 --> 00:10:25,910
Sekarang kita hanya perlu memastikan bahwa kita menggunakan komponen item daftar kita dan kita menggunakannya dengan mengembalikan bahwa alih-alih teks di sini

121
00:10:25,910 --> 00:10:30,590
saat mengeluarkan bahan, kita masih melewatkan bahan antara tag pembuka dan penutup dari komponen

122
00:10:30,590 --> 00:10:36,200
kustom kita sendiri karena di sana, kita menggunakan alat peraga anak-anak yang menggunakan konten yang kami berikan di

123
00:10:36,470 --> 00:10:38,920
antara tag pembuka dan penutup dan kami melakukan

124
00:10:39,110 --> 00:10:43,870
hal yang sama untuk langkah-langkah kami. Dengan itu,

125
00:10:44,530 --> 00:10:47,520
mari kita lihat ini,

126
00:10:47,670 --> 00:10:55,870
ya tidak terlihat terlalu buruk. Kami mendapatkan langkah-langkah kami di sini, mendapatkan bahan-bahan kami, tentu saja Anda dapat

127
00:10:55,870 --> 00:11:02,650
memperbaiki gaya ini, menyesuaikan dengan kebutuhan Anda, dengan cara yang Anda inginkan terlihat tetapi saya sebenarnya cukup senang dengan itu dan dengan itu,

128
00:11:02,650 --> 00:11:08,050
kami mendapat detail dasar layar dan tentu saja, layar detail ini juga berfungsi untuk favorit kami karena kami

129
00:11:08,050 --> 00:11:10,610
menggunakan satu dan layar yang sama di sana.

130
00:11:10,660 --> 00:11:15,500
Agar terlihat cukup bagus, layar filter adalah apa yang sekarang hilang.