Untuk memberi style pada item yang terpisah, saya akan membuat lagi komponen yang terpisah
dan saya akan menamainya mealitem. js, nama seperti
biasa sepenuhnya terserah Anda dan di sana, Anda
tahu permainannya, kami membuat komponen Bereaksi
dengan mengimpor Bereaksi, kami mungkin juga akan memerlukan tampilan, teks, dan stylesheet dan mungkin
juga beberapa hal lain dari Bereaksi Asli. Kemudian kami mengatur komponen, makanan, di mana kami menerima alat peraga dan
di mana kami kemudian mengembalikan beberapa JSX pada akhirnya. Siapkan stylesheet di sini, simpan dalam styles konstan dengan stylesheet buat
yang kami berikan objek dan pada akhirnya, kami ekspor item makanan kami di sini sebagai file default. Sekarang dengan itu di sini, dalam item makanan, dalam komponen ini,
kita tentu saja perlu mengembalikan
beberapa kode JSX untuk item makanan itu dan itu adalah sesuatu yang saya dapatkan dari layar
makanan kategori. Di sana
saya memiliki pandangan ini dengan teks saya di sini, itu pada akhirnya apa yang saya inginkan keluaran, sedikit lebih kompleks dari itu tetapi saya
akan memotongnya dari sana dan memindahkannya ke item makanan dan di sana, kembalikan pandangan ini ke
sini tetapi dari Tentu saja kita belum selesai dengan itu. Untuk satu, ini juga harus
menyentuh karena kita dapat memilih makanan, kita dapat memilih resep untuk dibawa
ke layar detail, jadi saya akan mengimpor opacity terjamah.
Sekarang tentu saja, Anda dapat kembali membuat perbedaan itu dan menggunakan efek riak dengan umpan balik
asli yang dapat disentuh di
Android jika Anda mau, saya akan menggunakan opacity yang dapat disentuh untuk saat ini dan membungkus pandangan saya di sini dengan opacity yang
dapat disentuh, seperti ini sehingga kami dapat sebenarnya mengetuk item kami di sini dan diTekan, saya sebenarnya ingin memicu fungsi yang saya harapkan untuk dapatkan di properti yang
belum kami masukkan ke item makanan tetapi karena kami tidak menggunakan item makanan di mana
pun tetapi yang saya inginkan lewat di masa depan, mungkin kita beri nama ini pada makanan pilihan
atau hanya di Pilih, apa pun yang Anda inginkan, saya akan menamainya di CellMeal dan saya berharap untuk mendapatkan prop
pada item makanan ketika kita kemudian menggunakannya di jsx. Jadi itulah opacity terjamah, di sana
saya memiliki pandangan saya dengan judul dan sebenarnya pandangan itu harus sedikit lebih kompleks dari itu.
Saya ingin memiliki tampilan, tampilan bersarang di sana seperti ini dan tampilan lain di bawahnya, jadi saya ingin
memiliki dua baris.
Ini akan ditetapkan sebagai kolom tetapi dua tampilan di sini akan ditetapkan sebagai baris di sini.
Tampilan pertama juga harus membuat gambar latar belakang, sehingga judul berada di depan gambar latar belakang
ini,
tampilan kedua, baris kedua di sini harus membuat beberapa detail tentang resep
yang dipilih, seperti kompleksitas dan durasinya.
Jadi mari kita mulai dengan itu sebelum kita nanti menambahkan gambar, pada kedua pandangan ini,
oleh karena itu saya akan menambahkan properti gaya dan menunjuk pada baris gaya
makan atau apa pun yang Anda ingin nama ini karena itu akan menjadi baris dalam presentasi
makan saya di sini dan saya Karena itu akan menambah baris makan di sana dan mengatur arah fleksibel di sini untuk baris tentu
saja karena itu harus baris data. Sekarang di sekitar keseluruhan item
di sini, saya akan membungkus pandangan lain di mana
saya ingin mengatur gaya umum item gaya makan dan item makanan,
yang juga dikonfigurasi di sini di stylesheet tentu saja dan di sana saya ingin
memberikan setiap makan tinggi dari 200 katakanlah, setiap item dalam daftar di sini dan lebar
100% untuk mengambil lebar penuh yang tersedia dan juga mungkin warna latar belakang tampilan keabu-abuan ini di sini, kita dapat
melihat apakah kita ingin mempertahankannya, untuk saat ini saya akan gunakan itu.
Sekarang kita dapat menggunakan item makanan di sini dan kita belum
selesai dengan itu tetapi kita dapat mulai menggunakannya di sini di layar kategori makan dengan tentu saja mengimpornya, mengimpor item makanan dari folder komponen dan di sana,
dari file item makanan dan kemudian render ini di sini, jadi kembalikan item makanan di sini seperti ini dan tentu saja kita sekarang harus memasukkan beberapa data, data seperti judul
yang kita dapatkan dari itemData. barang. judul dan prop onSelect yang saya
harapkan untuk mendapatkan dalam item makanan yang kita pada akhirnya menghubungkan ke prop onPress opacity terjamah, onSelectMeal, itu
nama yang saya pilih, itu juga sesuatu yang perlu kita atur
di sini
ketika kita menggunakan makanan item dan ini
harus menunjuk pada suatu fungsi yang untuk saat ini tidak melakukan apa-apa
tetapi yang kemudian akan memuat halaman detail untuk makan itu.
Jadi sekarang kita mendapatkan judul pada prop judul, maka item makan, di sini ketika kita output judul kita melakukan ini dengan
bantuan props. judul.
Jika sekarang kita menyimpan ini, kita seharusnya benar-benar dapat melihat sesuatu di sini, jadi mari kita tunggu ini untuk memuat ulang dan ya,
kita melihat makanan
kita di sini dan tentu saja tidak terlalu indah tetapi setidaknya, kita melihat sedikit lebih banyak dari sebelumnya.
Sekarang yang ingin saya miliki di sini adalah sedikit spasi di sekitar daftar tetapi di
dalam spasi, item daftar harus mengambil lebar penuh yang tersedia dan bukan hanya lebar item terluas
yang saat ini sedang terjadi.
Dan untuk itu, kita bisa pergi ke FlatList dan di sana, tambahkan properti style dan atur lebar ini menjadi 100% untuk
memastikan bahwa FlatList itu sendiri mengambil semua lebar yang bisa didapat.
Dengan itu, kita harus melihat yang kita inginkan di sini.
Sekarang tentu saja, item makanan tidak selesai, mereka tidak terlihat seperti yang
saya ingin mereka lihat meskipun kita juga perlahan-lahan sampai di sana. Sekarang di MealItem. File js, kita masih memiliki
beberapa pekerjaan yang harus dilakukan, misalnya tampilan
ini di sini dengan judul nanti juga akan menahan gambar dan oleh karena itu ini harus jauh lebih
besar daripada baris di bawahnya yang nantinya hanya akan menampilkan beberapa rincian.
Oleh karena itu di sini, saya akan menggabungkan gaya baris makanan saya dengan objek gaya lain, jadi dengan gaya yang diatur dalam objek stylesheet lain yang saya akan beri nama header
makan atau apa pun yang Anda ingin beri nama dan hal yang sama di sana dengan cara untuk detailnya
pada akhirnya, di sana saya akan
menggabungkan ini dengan detail gaya makan, sehingga kami telah menggabungkan gaya dan mari kita mulai dengan header makanan yang
dapat kita atur di sini.
Header makan pada akhirnya akan menampung gambar dan juga judul dan saya ingin ketinggian ini
menjadi katakanlah 80%
dari tinggi yang tersedia, jadi ini harus sangat sangat besar. Karenanya, rincian makanan secara otomatis akan mendapatkan 20% sisanya dan untuk melihat
apakah itu berfungsi, mari kita tampilkan beberapa detail di sini, jadi dalam pandangan itu di sini, pada baris
di bawah baris judul kami, saya
juga ingin memiliki beberapa teks di sana-sini. akan
menghasilkan katakanlah durasi alat peraga dan kemudian m setelahnya, untuk menit karena durasi m akan menjadi angka yang kita perlakukan
sebagai menit.
Kita hanya perlu meneruskan durasi dari layar kategori makanan saja, jadi ketika kita
menggunakan item makanan, selain melewati judul, saya akan mengatur prop durasi karena kita sekarang mengharapkan
ini pada item makanan.
Kami mendapatkan ini dari itemData. item yang merupakan makanan kami dan di sana, kami
akan memiliki properti durasi karena makanan kami sebagaimana ditentukan dalam model di sini memang memiliki properti durasi
dan memang jika Anda melihat data dummy, ini di sini adalah durasi Anda yang dimasukkan dalam .
Jika kita menyimpan ini,
sekarang kita melihat durasi kita di sana dan sebenarnya, kita masih dapat mengubah ketinggian di sini menjadi bahkan 90%, harus lebih tinggi daripada di sini,
yang terlihat lebih baik dan tentu
saja Anda
dapat bereksperimen dengan ini juga. Di baris detail makanan,
saya juga ingin memiliki beberapa bantalan horizontal, jadi kiri dan kanan katakanlah 10 dan membenarkan konten saya
di sini dengan ruang di antara, ingatlah ini adalah baris sehingga ini akan membenarkan secara horizontal, sehingga ketika kita memiliki beberapa item,
mereka akan didistribusikan dengan baik di sana.
Jadi kita punya 20 menit, mari kita keluarkan lebih banyak informasi di sana dengan menambahkan teks lain
dan
di sana, keluarkan kerumitannya, jadi di sini saya akan menampilkan
kompleksitas dan setelah itu, saya akan menampilkan keterjangkauan. Sekarang kita hanya perlu memasukkan data itu juga saat membuat item makanan kita.
Jadi di sini selain durasi, kami menyampaikan kompleksitas yang
kami dapatkan di sini, itemData. barang. kompleksitas dan keterjangkauan, itu tentu saja data
data. barang. keterjangkauan, seperti
itu dan jika kita menyimpan ini dan membiarkan ini dibuat ulang, sekarang kita melihat output ini di sini. Masih tidak super cantik dan kita pasti bisa
meningkatkan ini tetapi awal yang bagus. Sekarang sederhana dan terjangkau atau kompleksitas dan keterjangkauan
kami, yang harus ditata sedikit berbeda. Kami tahu ini akan berupa teks dan karena
itu saya dapat menggunakan beberapa fungsi Javascript atau metode yang kami miliki di string,
saya hanya akan menggunakan toUppercase untuk mengubahnya menjadi huruf besar sepenuhnya seperti ini dan sekarang ini seharusnya sudah
terlihat sedikit lebih bagus dari sebelumnya. Sekarang Anda masih dapat mengubah style di sini, saya akan pergi dengan style ini di sini
untuk saat ini dan mari sekarang tambahkan gambar latar belakang di atas.
Jadi untuk ini, kami ingin gambar latar belakang di belakang teks judul ini dan untungnya, React Native membuat
menambahkan gambar latar belakang seperti itu benar-benar sangat sederhana. Bereaksi asli dikirim dengan komponen bawaan, komponen latar
belakang gambar yang dapat kita gunakan untuk membuat gambar di latar belakang
seperti yang Anda bayangkan dengan namanya. Anda menambahkannya di sebelah komponen di mana Anda ingin menambahkannya dan Anda menambahkannya sebelum komponen itu,
jadi di sini saya menambahkan latar belakang gambar dan pada latar belakang gambar seperti pada gambar normal, Anda menetapkan sumber. Di sini sumber saya adalah gambar web, jadi kami mengirimkan sebuah objek, jika
itu akan menjadi gambar lokal, Anda akan menggunakan yang diperlukan dan apa yang Anda pelajari tentang gambar lokal di awal
kursus tetapi di sini, itu adalah gambar web, jadi kami melewati sebuah objek dengan alat peraga URI dan
di sana kami menggunakan alat peraga gambar yang merupakan tempat saya berharap mendapatkan URL itu di komponen ini, jadi tentu saja kita
harus memastikan bahwa kita meneruskan URL pada alat peraga itu. Saya juga akan menambahkan beberapa gaya
di sini dan itu akan menjadi gaya. bgImage yang sekarang akan kita tambahkan ke stylesheet di sana, di
mana pun Anda inginkan, mungkin di sini, tidak masalah. Yang penting di sini, Anda harus mengatur
lebar dan tinggi karena ini adalah gambar dari web dan saya akan
menggunakannya 100% untuk keduanya karena harus mengisi seluruh ruang yang didapat. Sekarang kita hanya perlu memastikan bahwa kita memasukkan prop gambar di sini di layar kategori makanan,
jadi selain judulnya, di sini saya juga ingin mengirimkan itemData. barang. imageUrl adalah nama itu, Anda dapat melihat bahwa dalam model,
imageUrl, jadi itulah yang kami lewati dan kami meneruskan ini ke penyangga gambar karena itulah yang kami harapkan dan
apa yang kami siapkan di sini saat makan barang. Dan jika Anda sekarang menyimpannya dan mari mencampur semuanya
dan menguji ini di Android, hanya butuh sedikit lebih lama untuk memuat itu sebabnya saya biasanya menggunakan iOS di sini
tapi sekarang jika kami menguji ini, kami melihat burger kami di sini. Apa yang tidak kita
lihat lagi adalah gelar kita. Untuk menampilkan judul lagi, pastikan Anda benar-benar membungkus latar
belakang gambar di sekitarnya, ini adalah bagaimana Anda memberi tahu React Native konten mana yang harus berada di
dalam di atas gambar latar belakang itu. Jadi sekarang dengan itu, inilah judul kami, tidak mudah dibaca dan kami akan memperbaikinya tetapi ada di sana lagi.
Jadi kita mulai dengan resep itu di sini, sekarang mari kita pastikan judulnya sedikit
lebih mudah dilihat dengan memberinya gaya di sini, judul gaya yang sekarang dapat kita atur di sana dan saya ingin menetapkan keluarga font yang
terbuka sans
bold, masuk akal karena kita mendaftarkan font ini.
Berikan ukuran font yang kami tingkatkan sedikit, mungkin 22, Anda bisa
bermain-main dengan itu tentu saja.
Berikan warna putih untuk membuatnya sedikit lebih mudah dibaca dan juga menetapkan warna latar belakang sehingga
kita selalu dapat melihatnya, bahkan jika gambar latar belakang
akan putih, dalam hal ini teks putih akan sulit dibaca, dengan memberikan ini warna RGBA yang merupakan
warna yang memiliki transparansi built-in sehingga untuk mengatakan dan ini hanyalah warna hitam yang agak
transparan dan sekarang juga menambahkan sedikit padding
di sini, padding vertikal lima harus terlihat bagus sehingga background kotak berwarna di sini tidak duduk tepat di tepi
teks yang ada di dalam kotak dan padding horizontal 12 mungkin. Dengan itu kita harus selalu melihat judul
kita dan sebenarnya, kita mungkin bisa meningkatkan transparansi itu di
sini, mengurangi opacity, ya itu
terlihat sedikit
lebih bagus menurut saya, seperti ini. Dan satu-satunya hal yang ingin saya lakukan sekarang adalah
saya ingin memindahkan judul itu di bagian bawah gambar ini dan
oleh karena itu pada gaya bgImage yang saya miliki di sini, saya akan mengatur pembenaran konten untuk melenturkan ujung karena gambar latar belakang secara otomatis bertindak sebagai jadi flexbox bisa
dikatakan, seperti tampilan, sehingga kami dapat membenarkan konten kami di sana dan sekarang kami
memiliki judul itu di bagian bawah.
Kita sekarang bisa juga memusatkan teks dengan pergi ke judul di sini dan menambahkan pusat perataan teks dan jika terlalu lama, terlalu besar,
selain tentu saja mengecilkan ukuran
font yang saya akan lakukan sedikit ke 20, tentu saja
Anda bisa buka teks di sini di mana Anda menampilkan judul dan atur jumlah baris ke 1
dan ini akan memastikan bahwa teks secara
otomatis dipersingkat jika terlalu besar, seperti di sini untuk salad dengan tomat ceri. Kami juga melihat efek aneh di sini di iOS di mana
kami memiliki beberapa latar belakang tambahan di belakang teks kami dan bukan hanya kotak berwarna latar belakang di sini.
Itu karena saya menerapkan warna latar belakang saya dan efek langsung pada teks, untuk memperbaikinya kita dapat memotongnya dari judul di
sini dan hanya mengatur warna dan seterusnya dan bukannya menambahkan wadah judul di sini di mana kita menambahkan
warna latar belakang ini dan seterusnya dan bungkus wadah ini di sekitar judul kami, jadi tampilan tambahan yang kami tambahkan
di sini dan cukup normal di Bereaksi Asli untuk membuat sarang beberapa tampilan seperti
itu dan pada tampilan itu, kami sekarang dapat menambahkan gaya, gaya wadah judul dan jika kami menyimpannya, kita harus menyingkirkan perilaku aneh itu di
iOS, ya
sekarang kita tidak memiliki kotak tambahan di
sana, alih-alih kita hanya memiliki satu warna latar belakang dan sama pada Android.
Jadi sekarang ini tidak terlihat terlalu buruk tapi saya tidak sepenuhnya
bahagia, saya ingin memusatkan detail saya di sini secara vertikal juga dan memberikan sedikit lebih banyak ruang kurasa dan
untuk itu kita bisa memberikan header mungkin 85% dari ketinggian dan pada detail makanan di sini, perlu diingat bahwa arah fleksibel kami
adalah baris karena kami menggabungkan detail makanan dan makan di sini dan oleh karena itu sumbu silang kami
adalah dari atas ke bawah, jadi
jika kita ingin memusatkan secara vertikal, yaitu sumbu silang yang kita butuhkan untuk memusatkan.
Jadi di sini kita dapat mengatur item pelurusan yang melakukan pemosisian sumbu silang ke tengah dan juga
mengubah warna kita di sini sedikit menjadi sedikit warna yang lebih bagus, abu-abu
yang sangat terang ini, # f5f5f5 mungkin terlihat sedikit lebih baik, ya itu
pasti tidak .
Sekarang untuk memastikan bahwa kita benar-benar memusatkan secara vertikal, kita hanya perlu lebih eksplisit
tentang tinggi detail makan
kita, kita ambil 85% pada tajuk, jadi pada detail di sini, kita dapat mengatur
ketinggian 15% jelas untuk beristirahat, ya dan saya akan mengatakan ini terlihat cukup baik di sini, tentu daftar
item yang kami dapat bekerja di sini.
Sekarang saya hanya akan menambahkan sedikit radius perbatasan karena Anda tahu saya suka radius
perbatasan, jadi saya akan menambahkan radius perbatasan 10 di sini sehingga kami memiliki beberapa sudut bulat dan dengan itu, jika Anda kembali, kami
Anda hampir sampai di sana tetapi Anda akan melihat bahwa gambar sebenarnya tidak menghormati radius perbatasan.
Sekarang untuk memperbaikinya, pada item makanan, kita hanya harus mengatakan overflow disembunyikan sehingga tidak ada item anak yang bisa keluar dari ruang
ini atau bentuk yang kita bangun di
sini.
Dan dengan itu, itu adalah permulaan, sesuatu yang dapat kita kerjakan,
sekarang tentu saja kita ingin memastikan bahwa ketika kita mengetuk item seperti itu, kita benar-benar pergi ke halaman detail.