Jadi mari kita fokus pada layar detail makanan untuk
saat
ini, jadi bagian di sini kita melihat rincian resep yang dipilih.
Saat ini, kami hanya memiliki konten dummy di sana, dari layar detail makanan dan itu tentu saja bukan konten
yang benar-benar ingin saya miliki di sana, alih-alih
apa yang seharusnya ada di sana?
Nah, jika kita melihat pada model makan kita, mungkin masuk akal untuk memiliki gambar di sana, perlu
diingat bahwa judul sudah ditampilkan di header kita, jadi masuk akal untuk memiliki gambar
di sini di bagian atas mungkin dan di bawah itu, mungkin ulangi saja durasi, keterjangkauan dan kompleksitas seperti yang kita lakukan di sini
di bawah resep kami dan kemudian juga di
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
di sini di MealDetailScreen dan oleh karena itu, saya pikir masuk akal untuk
pertama-tama menambahkan tampilan gulir karena kita pasti akan memiliki banyak konten di sana yang
kemungkinan besar tidak akan masuk ke satu layar dan tentu saja tidak pada semua ukuran perangkat yang memungkinkan.
Jadi saya akan menambahkan tampilan gulir di sini dan membungkusnya di sekitar konten saya di sini.
Sekarang kita akan memiliki beberapa bagian
berbeda di sini, misalnya di bagian paling atas, saya ingin memiliki gambar saya dan untuk ini,
saya juga akan mengimpor komponen gambar dari Bereaksi Asli di sini sehingga kami dapat membuat
gambar di sini, tidak gambar latar belakang tetapi
gambar normal dan saya ingin menambahkan ini, katakan saja di sini tepat di atas, sesuatu seperti itu.
Sekarang setelah gambar, saya ingin memiliki tampilan dengan durasi, keterjangkauan dan kompleksitas seperti yang saya sebutkan, jadi pada dasarnya pengaturan
yang sama yang kita miliki di item makanan, ini di sini bisa Anda katakan dan karena itu saya benar-benar akan menyalin
tampilan dari sana dan kemudian kita bisa menyesuaikannya seperti yang kita butuhkan di sini di MealDetailScreen, jadi
saya hanya akan mengganti tampilan ini dengan tampilan salin.
Tentu saja itu mengharuskan kita untuk mengimpor komponen teks
default di
sini, jadi mari kita tambahkan ini, mari kita impor teks
default dari komponen teks standar. Jadi itulah baris berikutnya dan
sesudahnya, saya ingin memiliki bahan dan langkah-langkah yang perlu Anda lakukan.
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
judul karena saya ingin memiliki header
yang tebal di sini, mungkin meningkatkan ukuran font. Di bawah itu, miliki daftar bahan saya, jadi daftar
bahan dan itu tentu saja bukan konten akhir, sebagai gantinya kita akan membuat daftar di sini dan
di bawah itu, saya akan mengulangi ini di sini karena saya ingin memiliki judul di mana saya katakan langkah-langkah dan kemudian daftar
langkah-langkah di bawah itu dan sekarang saya akan menyingkirkan konten lama ini di sana dan itulah yang ingin
saya kerjakan.
Sekarang tentu saja, semua gaya hilang dan juga menopang durasi dan seterusnya, itu tidak
menghasilkan apa-apa, sebaliknya kita harus bekerja dengan makanan yang dipilih di sini, durasi makanan yang
dipilih, kompleksitas makanan yang dipilih, keterjangkauan makanan yang dipilih dan untuk gambar misalnya, saya ingin menambahkan sumber di sini, sumber karena ini adalah gambar
jaringan, adalah objek dengan properti URI yang menunjuk pada selectedMeal. imageUrl untuk memuat ini dan kita juga perlu menerapkan
gaya di sana, untuk mengatur lebar dan tinggi, jadi di sini
saya ingin menunjukkan gaya gambar katakanlah dan semua gaya ini hilang seperti yang saya
katakan jadi mari kita tambahkan itu. Di sini untuk gaya ini, saya juga ingin mengatakan gaya. detail mungkin karena kami menampilkan detail resep
ini dan mari kita turun ke stylesheet karena itu, hapus layar yang tidak kita
butuhkan
lagi, jadi mari kita tambahkan gambar dan detail. Sekarang untuk detail, kita perlu mengatur arah flex ke baris karena itu
harus semua detail dalam satu baris.
Kami dapat menambahkan sedikit padding di semua arah, mungkin 15 dan juga menambahkan konten ruang sekitar
untuk mendistribusikan item detail kami dengan baik di sini, yang seharusnya bagus.
Selain itu, pada gambar di sini, kita juga perlu menambahkan gaya, di sana lebarnya harus 100% katakanlah, untuk
mengambil lebar penuh yang tersedia dan untuk tinggi, saya akan pergi dengan 200, meskipun
tentu saja Anda
bisa menghitung secara dinamis ini dengan dimensi API misalnya untuk selalu mengambil
sebagian tertentu dari ketinggian yang tersedia atau hanya bermain-main dengan nilai yang berbeda di sini.
Saya akan pergi dengan itu dan melihat di sini dan itu
tidak terlihat terlalu buruk, itu
tidak terlalu buruk.
Sekarang Anda pasti dapat juga mencoba beberapa pekerjaan bonus di sini, beberapa tugas bonus dan misalnya mewarnai
detail-detail ini - sederhana, terjangkau dan durasinya tergantung pada apakah itu agak pendek atau tergantung
pada nilai-nilai berbeda yang Anda miliki untuk sederhana, untuk kompleksitas dan keterjangkauan .
Ini bukan sesuatu yang akan saya lakukan di sini, tetapi Anda dapat melihat pada data makanan tentu saja untuk melihat
nilai mana yang kami miliki di sana untuk memperoleh apa yang pendek, apa yang sedang, berapa lama dan untuk melihat nilai mana
yang digunakan untuk kompleksitas dan seterusnya dan kemudian Anda benar-benar dapat menambahkan beberapa jika centang untuk menerapkan
gaya berbeda pada nilai yang berbeda yang kami hasilkan di sini di layar detail makanan untuk detail ini sehingga Anda mewarnai
teks secara berbeda tergantung pada panjang atau tidaknya. Ini bukan sesuatu yang akan saya lakukan
di sini karena ini hanya pekerjaan tambahan yang tidak terlalu menambah navigasi yang merupakan fokus
dari modul ini.
Jadi sebagai gantinya, saya akan fokus pada bahan dan langkah-langkah dan di sana, langkah pertama adalah memastikan bahwa judul di
sini ditata dengan benar.
Jadi mari kita tambahkan judul ke stylesheet dan di sana, saya akan menambahkan keluarga font dan mengatur ini
untuk membuka tanpa huruf tebal, mengatur ukuran font menjadi 22 mungkin dan mengatur teks menyelaraskan ke pusat ke pusat teks
di tengah dan dengan itu jika kami periksa ini, ini terlihat cukup bagus.
Sekarang saya juga ingin menampilkan bahan-bahan saya dalam langkah-langkah saya tentu saja dan untuk itu, penting untuk
memahami bahwa dalam data dummy, ini adalah array, ini adalah
bahan-bahan saya misalnya, ini
adalah langkah-langkah saya dan Anda melihat ada teks di dalamnya array. Jadi saya hanya ingin menampilkan teks saya di sini sebagai
daftar dan saya tidak akan menggunakan FlatList karena Anda bisa melakukan itu, Anda bisa memiliki wadah yang dapat digulir di sana
sehingga untuk mengatakan tapi saya hanya akan membuat bahan dan langkah-langkah di atas masing-masing lain.
Jadi di sini, kita dapat menggunakan pendekatan lama yang baik yang kita kenal dari Vanilla React atau React
untuk web yang juga saya tunjukkan sebelumnya dalam kursus. Kita dapat menggunakan makanan pilihan kita dan di sana, bahan-bahan
yang merupakan rangkaian string dan memetakan ini ke dalam array komponen,
itulah cara Anda dapat menampilkan daftar data dalam Bereaksi dan juga Bereaksi Asli dan sering, Anda menggunakan FlatList
tetapi di sini kami tidak perlu karena itu bukan jumlah yang tak terbatas sehingga
kami tidak perlu optimasi ini dan kami memiliki tampilan gulir pembungkus di seluruh layar sehingga kami juga dapat
menggulir jika kami mengeluarkan lebih dari yang pas di layar, jadi kami benar-benar baik-baik saja
menggunakan pendekatan ini dan oleh karena
itu di sini, saya akan memiliki bahan tunggal saya dalam fungsi peta ini dan peta adalah metode
yang dibangun dalam JavaScript seperti
yang Anda tahu dan di sini kita perlu mengembalikan
elemen jsx sekarang dan apa yang ingin saya kembalikan adalah komponen teks di mana saya hanya menampilkan bahan
karena bahan
adalah array string, jadi bahan hanyalah string
dan kemudian di sini kita juga perlu menyediakan kunci, itu persyaratan oleh React dan
kita bisa menggunakan bahan sebagai kunci karena kita akan selalu miliki setiap bahan hanya sekali.
Jadi itu dijamin unik, begitulah cara
makan kita diatur dan dengan itu jika kita
menyimpan ini dan kita melihat resep di sini, kita melihat bahan-bahan kita. Sekarang untuk penataan, kita tentu dapat melakukan sesuatu
di sana dan saya
akan melakukannya dalam satu detik tetapi sebelum saya melakukannya, izinkan saya mengulangi ini
untuk langkah-langkah di sini, ganti teks ini dengan dipilihMeal. langkah-langkah dan kemudian output setiap langkah di sini yang juga
hanya string dan yang juga unik dalam teks dan dengan itu ditambahkan, kita juga harus melihat langkah-langkah untuk makan kita, memang kita lakukan.
Sekarang lagi, styling dapat ditingkatkan sedikit dan kami akan melakukan itu dan
saya pikir masuk akal untuk membuat komponen terpisah atau membuat fungsi untuk ini dan saya akan membuat komponen terpisah, kami akan
menyimpannya di file yang sama meskipun karena kami benar-benar hanya menggunakannya dalam file itu tetapi Anda juga
bisa
membuat file baru, sepenuhnya terserah Anda. Di sana saya akan memiliki
item daftar saya yang menerima alat peraga tempat saya kembali dan sekarang di sini saya ingin menggunakan tampilan yang
saya impor sebagai pembungkus sehingga saya dapat mendesain wadah ini dan di sana, memiliki
teks saya di mana saya menampilkan alat peraga anak-anak dan sekarang tampilan di sini akan mendapatkan
gaya dari gaya. ListItem mungkin agar kita dapat menata
ini dengan baik dan di sini tentu saja, saya tidak ingin menggunakan teks tetapi sebenarnya teks standar,
juga di sini
tentu saja sehingga kita mengambil keuntungan dari teks kustom kita sendiri.
Sekarang untuk gaya item daftar di sini, mari kita pergi ke stylesheet dan menambahkan item daftar dan setiap item daftar
harus memiliki margin, margin vertikal katakanlah 10 dan margin horizontal katakanlah 20, sehingga lebih banyak jarak ke
kiri dan kanan dan mari kita juga mungkin menambahkan warna perbatasan warna abu-abu terang di sini dengan #ccc dan lebar perbatasan 1,
kita akan melihat bagaimana itu terlihat dan kemudian
juga menambahkan sedikit padding di sana, 10 di semua arah dan kami Akan melihat bagaimana
itu terlihat.
Sekarang kita hanya perlu memastikan bahwa kita menggunakan komponen item daftar kita dan kita menggunakannya dengan mengembalikan bahwa alih-alih teks di sini
saat mengeluarkan bahan, kita masih melewatkan bahan antara tag pembuka dan penutup dari komponen
kustom kita sendiri karena di sana, kita menggunakan alat peraga anak-anak yang menggunakan konten yang kami berikan di
antara tag pembuka dan penutup dan kami melakukan
hal yang sama untuk langkah-langkah kami. Dengan itu,
mari kita lihat ini,
ya tidak terlihat terlalu buruk. Kami mendapatkan langkah-langkah kami di sini, mendapatkan bahan-bahan kami, tentu saja Anda dapat
memperbaiki gaya ini, menyesuaikan dengan kebutuhan Anda, dengan cara yang Anda inginkan terlihat tetapi saya sebenarnya cukup senang dengan itu dan dengan itu,
kami mendapat detail dasar layar dan tentu saja, layar detail ini juga berfungsi untuk favorit kami karena kami
menggunakan satu dan layar yang sama di sana.
Agar terlihat cukup bagus, layar filter adalah apa yang sekarang hilang.