Pada layar detail produk, kami sudah mulai mengerjakan itu, tetapi kami tidak benar-benar menghasilkan
sesuatu yang berguna di sana, sekarang
saatnya untuk mengubahnya.
Untuk itu, saya akan mengganti kode jsx yang saat ini kami gunakan di sana dengan tampilan gulir karena
seperti yang saya sebutkan sebelumnya, kami
akan menampilkan gambar kami di sana, deskripsi produk kami dan ini
bisa menjadi deskripsi yang sangat panjang atau
kami hanya melihat ini pada perangkat yang lebih
kecil atau dalam mode lansekap, jadi kami pasti ingin memiliki beberapa konten yang
dapat digulir di sana dan ngomong-ngomong kami tidak perlu daftar
datar di sini karena konten tidak akan lama sekali, kami tahu cukup banyak bahwa itu tidak akan
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
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
teks untuk deskripsi. Jadi untuk gambar, kita
perlu mengatur prop sumber dan itu adalah objek yang memiliki properti URI dan tentu saja kita memiliki produk
pilihan kita di sini, jadi sumbernya hanyalah produk yang dipilih. imageUrl karena produk yang dipilih adalah
jenis yang kami definisikan dalam model produk kami. Pada tombol di sini, kita dapat menambahkan judul
add to cart karena pada akhirnya itulah yang harus dilakukan tombol ini dan onPress tidak melakukan apa-apa untuk
saat ini tetapi nanti kita akan menambahkan ini ke troli. Maka di sini saya ingin menampilkan harga, kami
tidak perlu menampilkan
judul karena itu sudah menjadi bagian dari tajuk,
jadi kami melihat judul di sana tetapi di sini saya ingin menampilkan harga dalam dolar dengan
merujuk ke produk yang dipilih. harga untuk memperbaiki 2 yang
saya lakukan sebelum dan kemudian di sana
juga deskripsi, jadi di sini kami telah memilih Produk. deskripsi, seperti ini.
Oke,
jadi itu terlihat bagus,
sekarang saatnya untuk beberapa gaya tentu saja.
Misalnya untuk gambar kita harus menetapkan lebar dan tinggi karena itu adalah gambar jaringan,
jadi di sini saya akan menambahkan gaya gambar yang harus saya tambahkan ke stylesheet saya.
Sekarang untuk teks di sini, teks ini harus memiliki gaya harga mungkin
yang harus kita tambahkan dan kemudian di sini, teks ini harus memiliki gaya deskripsi, mungkin terdengar seperti nama yang pas.
Sekarang di stylesheet, kita harus menambahkan semua hal ini, jadi mari kita mulai untuk gambar.
Di sana saya akan menambahkan lebar 100%, ini
harus benar-benar mengambil lebar yang tersedia penuh dan ketinggian 300 mungkin dan tentu
saja Anda bisa bermain-main dengan
itu, Anda juga bisa menggunakan nilai persentase untuk itu atau menggunakan dimensi API untuk jenis menghitung ini secara dinamis.
Setelah itu, saya ingin harga saya, teks harga
itu harus memiliki ukuran font 20 karena orang tentu saja dapat melihatnya, warna keabu-abuan itu,
warna keabu-abuan yang gelap ini saya gunakan sebelumnya dan perataan teks pusat sehingga
selalu terpusat,
juga margin pada sumbu vertikal 20 mungkin, jadi di sekitarnya, dari 20 dan kemudian, deskripsi.
Deskripsi sebenarnya dapat memiliki ukuran font katakanlah 14, mari kita lihat apakah itu berfungsi dan di sana, juga
menggunakan pusat pelurusan teks, sesuatu seperti itu. Jika kita menyimpan itu, mari
kita lihat itu, tidak terlihat terlalu buruk. Sekarang untuk tombol, saya ingin mengatur warna yang berbeda, jadi saya akan menambahkan warna di
sini dan mengatur ini untuk warna yang perlu kita impor tentu saja dari folder konstanta kami, Warna. utama dan sekarang jika kita menyimpan
ini, ini terlihat cukup bagus. Di Android, Anda melihat bahwa tombol itu berada tepat di bawah
gambar dan itu adalah tombol lebar penuh.
Ini sama di sini untuk iOS, di
sana kita tidak
melihatnya, tetapi jika saya mengetuk di sini, Anda juga melihat bahwa tombol ini ditekan dan itu sebenarnya bukan yang saya inginkan di sini.
Jadi
yang akan saya lakukan adalah saya akan membungkus tombol ini dalam tampilan yang saya akan memberikan gaya katakanlah tindakan, meskipun hanya satu tindakan di
sini, Anda mungkin dapat memiliki beberapa tombol di sini untuk hal-hal yang berbeda.
Jadi saya akan menambahkan tombol tindakan saya di sini ke stylesheet dan
di sana, kita dapat menetapkan satu margin pada sumbu vertikal 10 ke atas dan bawah dan menyelaraskan item Anda
di tengah yang,
karena arah lengkungan default adalah kolom, tengah itu secara horizontal dan sekarang kita memiliki lebih banyak spasi di sini
dan kita melihat ini lebih baik di
Android, lebih banyak jarak dan tombol sekarang tidak meregang seperti yang seharusnya, pengaturan penyelarasan default lagi
tetapi alih-alih hanya mengambil lebar sebanyak yang dibutuhkan dan disejajarkan berada di tengah.
Jadi ini adalah
pengaturan
yang akan saya ikuti, tentu saja Anda masih dapat mengubah ini dengan cara yang
berbeda jika Anda mau, bagi
saya ini tidak terlihat terlalu buruk, mari kita juga melihat seperti item yang berbeda, mungkin juga yang
ini, ya , itu semua terlihat cukup bagus.
Sekarang untuk teks yang lebih panjang di sini, Anda lihat itu tidak indah, harus ada lebih banyak spasi.
Jadi sebenarnya pada uraian, saya juga akan menambahkan sedikit margin horisontal katakanlah 20 sehingga kita memiliki jarak di sekitar
ini, sehingga jika kita melihat lagi ini, Anda lihat sekarang ini secara otomatis melompat ke baris baru yang
seharusnya .
Oke,
jadi itu terlihat
bagus, sekarang kami memiliki layar detail produk.
Sekarang sebelum kita melanjutkan, saya ingin membawa font saya sendiri dan menggunakannya karena saya tidak senang dengan font
default.