Jadi, mari kita pastikan bahwa item produk kami pada layar tinjauan produk terlihat sedikit lebih bagus
daripada yang sedang mereka cari. Sekarang tentu saja, setiap item produk hanya diterjemahkan
sebagai teks, sebagai komponen teks dan bukan itu yang saya inginkan di sini, sebagai gantinya saya akan menghapus impor itu dan saya
akan membuat komponen baru yang harus bertanggung jawab atas item produk saya.
Sekarang satu catatan penting tentang di mana kita membuat komponen itu, kita dapat membuatnya
di sini di ProductsOverview. File js juga, kita tentu saja
dapat memiliki lebih dari satu komponen per file, jadi di sini saya dapat menambahkan komponen item produk saya atau bagaimanapun Anda ingin
menyebutnya, seperti ini, maka kita dapat menggunakan komponen ini dalam file ini yang tentu saja apa yang saya rencanakan.
Ini adalah pola yang dapat Anda gunakan jika Anda memiliki komponen yang benar-benar sangat terkait dengan komponen
lain dan Anda hanya membaginya sehingga setiap komponen sedikit lebih mudah dibaca.
Setelah komponen terpisah ini menjadi sangat besar, Anda tetap harus mempertimbangkan memecahnya menjadi file terpisah sehingga
file Anda tetap kecil dan jika orang ingin melihat salah satu dari dua komponen,
mereka tidak harus menggulir ke komponen lain. mereka mungkin tidak tertarik.
Jadi itu satu hal yang perlu diingat. Tentu saja jika Anda juga berencana menggunakan komponen di
komponen lain, Anda harus selalu menyimpannya dalam file terpisah, tidak hanya agar Anda dapat mengekspornya sebagai default karena Anda juga dapat
mengekspor ini jika disimpan bersama dengan komponen lain, itu bukan alasan
utama tetapi kebanyakan untuk membuatnya sangat jelas bahwa ini adalah komponen mandiri yang mungkin dan akan digunakan di
berbagai bagian aplikasi Anda.
Sekarang item produk di sini tidak hanya tidak akan super kecil yang dengan sendirinya akan menjadi alasan untuk meletakkannya
di file yang terpisah tetapi saya juga akan menggunakannya dalam komponen yang berbeda nanti atau
di berbagai tempat aplikasi, itu tidak hanya relevan ke layar ikhtisar produk dan oleh karena itu, saya akan
menambahkannya di folder komponen dan di folder komponen itu, untuk mengatur jenis komponen saya sedikit, saya
akan menambahkan subfolder toko di mana saya ingin menempatkan semua komponen yang langsung terkait dengan fitur toko
atau fitur-fitur pada umumnya aplikasi saya.
Jadi di sana di subfolder toko, saya akan menambahkan ProductItem ini. File js dan Anda akan melihat folder lain yang
akan saya tambahkan di sini nanti.
Sekarang lagi, semua pola dan praktik yang saya tunjukkan di sini hanya cara yang mungkin untuk melakukan ini, secara umum
dalam kursus saya dan dalam kursus ini juga, saya menunjukkan semua praktik terbaik yang dapat Anda gunakan tetapi sering dalam
pemrograman, tidak ada hanya satu cara yang benar
atau salah, sehingga praktik dan pola yang saya tunjukkan di sini adalah praktik dan pola yang akan Anda lihat
di proyek lain juga, tetapi Anda mungkin juga melihat struktur folder lain, pada akhirnya Anda selalu dapat
bekerja dengan struktur yang bekerja untuk Anda, tidak ada pilihan benar atau salah di sini, saya hanya ingin menjelaskan alasan saya untuk
menggunakan struktur ini yang mudah-mudahan membantu Anda memahami mengapa saya menggunakannya dan mengapa ini mungkin patut dipikirkan.
Jadi di sini, file item produk, ProductItem. File js tentu saja akan menahan komponen item produk yang merupakan komponen fungsional normal
yang menerima alat peraga dan pada akhirnya akan mengembalikan kode jsx dan karena itu memegang kode jsx,
kita perlu mengimpor Bereaksi dari Bereaksi dan di sini, saya juga akan mengimpor sesuatu dari React Native karena di sini saya
sekarang akan bekerja dengan primitif React Native ini untuk benar-benar membangun komponen saya karena dari sana, saya memerlukan pandangan, saya akan membutuhkan
teks, saya juga ingin menggunakan gambar karena kami Saya akan menampilkan gambar produk di
sini dan juga stylesheet karena kami pasti akan juga gaya ini. Karenanya, Anda juga dapat menambahkan konstanta gaya di
sini yang kami buat dengan Stylesheet. buat yang kami berikan objek Javascript dan pada
akhirnya, kami mengekspor item produk ini di sini sebagai default saja. Sekarang di sini, dalam komponen ini yang saya maksud, kita
dapat mulai membuat kode jsx membuat item produk dan ini akan menjadi komponen presentasi, yang berarti
tidak akan ada logika di sini, kita tidak akan mengelola keadaan internal apa pun, ini hanya
akan menjadi komponen yang bisa kita gunakan di komponen lain untuk mendapatkan gaya dan tata letak
yang tepat di luar kotak, jadi komponen ini di sini akan bertanggung jawab untuk menggunakan komponen Asli Bereaksi
tertentu dan meletakkannya dan menatanya dengan cara tertentu. Jadi di sini, saya pada akhirnya ingin mengembalikan
tampilan yang membungkus segalanya, yang mengatur segalanya, yang kami juga dapat gaya untuk mendapatkan
tampilan keranjang ini dengan mungkin bayangan, mungkin sudut bulat, apa pun yang Anda inginkan dan di sana, kami sekarang
memiliki bagian yang berbeda, misalnya kita pasti akan memiliki gambar di sana, gambar produk, saya juga ingin memiliki judul dan
harganya, jadi kita akan memerlukan beberapa teks
di sini, jadi untuk judul di sini dan di sini, maka untuk harga dalam dolar dan di bawahnya, saya juga ingin memiliki tampilan dengan tombol, jadi
di sini kita dapat menggunakan komponen
tombol bawaan untuk saat ini, di mana kita kemudian dapat menambahkan produk ke keranjang atau juga melihat
detailnya , jadi di mana kita memiliki dua opsi ini pada dasarnya dan tentu saja kita perlu menambahkan
penangan onPress di sini. Jadi itu kerangka yang sangat mendasar, mungkin bukan
yang terakhir, kita harus melihat bagaimana kita dapat menata semuanya di sini, tetapi itulah tata
letak yang saya inginkan.
Saya membungkus tombol saya di sini agar dapat dilihat karena saya ingin memilikinya berdampingan dalam barisan dan
dengan memiliki pandangan di sekelilingnya, kita dapat menata tampilan tersebut sedemikian rupa sehingga menggunakan baris arah yang fleksibel
dan seterusnya.
Jadi
itu adalah pengaturan yang dapat
kita gunakan di sini, sekarang mari
kita tambahkan beberapa gaya dan untuk itu saya ingin menggunakan
atau mulai di sini pada tampilan sekitarnya di mana saya mengatur produk gaya seperti ini,
oleh karena itu di sini di stylesheet, saya menambahkan
produk seperti itu, tambahkan kunci produk saya di
sini dan tentu saja sekarang lagi, itu sepenuhnya terserah Anda bagaimana Anda ingin gaya ini, saya ingin memiliki kartu yang terlihat, jadi karena itu saya akan
menambahkan bayangan, warna bayangan yang bisa hitam, opacity bayangan yang bisa 0. 26, offset bayangan di mana saya memiliki offset lebar nol dan
tinggi offset dua dan radius bayangan delapan mungkin dan seperti
biasa bermain-main dengan nilai-nilai ini untuk menemukan konfigurasi Anda.
Sekarang Anda mungkin ingat bahwa shadow hanya berfungsi di
iOS, jadi untuk Android saya akan menambahkan properti elevasi di sini dan mengatur ini menjadi lima mungkin, sekali lagi Anda
dapat bereksperimen dengan nilai yang berbeda di
sana juga dan saya ingin memiliki radius perbatasan 10 karena Saya ingin sudut membulat
dan lagi, itu sesuatu yang
saya inginkan di sini, sesuatu yang tidak harus Anda lakukan. Saya juga akan menambahkan warna latar belakang putih untuk memastikan
bahwa keranjang kami di sini, produk kami selalu memiliki warna latar belakang ini bahkan jika aplikasi utama
kami harus menggunakan warna latar belakang yang berbeda nanti. Jadi itu produk saya, pembungkus saya di sini di seluruh produk. Saya juga ingin mengatur tinggi badan saya di
sini, setiap produk harus memiliki tinggi 300
piksel dan tentu saja itu adalah nilai yang juga dapat Anda sesuaikan dengan
kebutuhan Anda.
Anda tentu saja dapat juga membuat ini dinamis dengan API dimensi saat Anda
mempelajarinya dalam modul responsif dan saya akan menambahkan margin 20 di semua arah di setiap item
produk, sehingga kami memiliki jarak di semua arah. Dengan pengaturan ini, kita dapat mulai bekerja mengeluarkan sesuatu, sehingga
gambar membutuhkan sumber dan kita akan mendapatkan gambar jaringan di sini karena jika Anda melihat data
dummy, semua URL gambar di sini adalah URL, itu juga yang kami ada dalam model, kami mengharapkan
URL di sini,
jadi untuk gambar jaringan dan itu akan menjadi default saja untuk setiap toko yang Anda bangun
karena Anda tidak akan pernah memasukkan semua gambar produk ke dalam aplikasi Anda, setidaknya jika itu bukan beberapa di app shop untuk sebuah
game tetapi jika ini adalah toko tempat
orang dapat membuat produk, jelas orang akan membuat produk secara dinamis setelah aplikasi Anda didistribusikan,
jadi tidak mungkin bagi Anda untuk memasukkan semua gambar ke dalam aplikasi Anda, alih-alih harus disimpan di server .
Jadi karena itu di sini, kita perlu meneruskan objek ke sumber tempat kita mengatur properti
URI dan yang sekarang akan diterima dari luar karena komponen item produk ini adalah presentasi,
Jadi setiap data yang ditampilkan perlu diteruskan melalui alat peraga dan di sana, kami dapat mengharapkan penyangga
gambar tetapi untuk semua penyangga di
komponen Anda sendiri, Anda dapat memilih nama yang Anda inginkan. Untuk judul, saya berharap untuk mendapatkan prop judul dan untuk harga, saya berharap
untuk mendapatkan prop harga, saya akan menyimpan tanda dolar di sini karena harga hanya akan menjadi nomor dan tentu saja
saya ingin memiliki tanda dolar di depan ini.
Sekarang satu catatan kecil di sini, saya ingin memastikan bahwa harga yang saya peroleh selalu memiliki tepat dua tempat desimal dan
kita dapat mencapainya dengan menelepon untuk memperbaikinya dan meneruskan dua. Untuk memperbaikinya adalah fungsi yang tersedia pada
angka dalam Javascript, yang mengubah ini pada dasarnya string dengan jumlah tetap tempat desimal dan
di sini saya membatasi ini untuk selalu menjadi
dua tempat
desimal, itu Javascript normal, tidak ada yang spesifik untuk Bereaksi Asli. Sekarang ketika kita menekan tombol view details, maka saya akan memicu props pada detail tampilan,
jadi saya kembali menggunakan nama di sini yang dapat Anda konfigurasikan atau beri nama sesuai keinginan Anda tetapi idenya di sini
adalah bahwa props pada view detail menunjuk pada suatu fungsi yang pada akhir dieksekusi
ketika tombol ini ditekan dan oleh karena itu di sini,
jika tombol ini, tombol kereta ditekan, saya akan menunjuk ke fungsi yang saya harapkan untuk masuk ke add on cart prop.
Sekali
lagi, Anda dapat memberi nama props ini apa pun yang Anda inginkan tetapi ketika
Anda menggunakan komponen Anda, Anda harus memastikan mereka tersedia dan bahwa mereka mendapatkan nilai yang merupakan fungsi yang kemudian dipicu melalui tombol-tombol ini.
Sekarang kami mendapatkan semua data. Sekarang untuk gambar, karena
ini adalah gambar jaringan, kita perlu mengatur lebar dan tinggi karena gambar tidak dapat melihat itu di muka karena
dapat melakukannya untuk gambar lokal, tidak dapat melakukan ini
untuk jaringan gambar, jadi di sini saya akan menunjukkan gaya. gambar dan saya akan menambahkan kunci gambar ini ke stylesheet saya di sana untuk saat ini.
Sekali lagi, umumnya terserah Anda bagaimana Anda mendesain ini, tetapi saya akan mengatur ini memiliki lebar
katakanlah 60%,
perlu diingat bahwa produk keseluruhan memiliki lebar 100% tetapi tinggi 60% karena keseluruhan produk barang di sini memiliki tinggi 300 dan
saya ingin memiliki gambar di sana, yang juga harus mengambil sebagian besar tinggi tetapi saya juga memiliki
judul dan harga dan tombol saya dan ini juga harus pas di sana, jadi saya
' Saya akan
memberikan gambar 60% dari tinggi sehingga
hal-hal lain di sini dapat membagi 40% sisanya di antara mereka. Jadi dengan itu, itulah gambarnya, sekarang tentu saja gambar itu
bukan segalanya yang kita miliki di sini, kita juga punya judul, kita punya harga
dan kita ingin gaya itu juga.
Jadi untuk judul, saya akan menambahkan gaya judul di sini dan untuk harga, saya akan menambahkan katakanlah gaya
harga dan di sini untuk tombol-tombol ini, saya juga akan menambahkan gaya ke tampilan sekitarnya dan saya akan beri nama ini tindakan
dan tentu saja semua nama gaya ini seperti biasa sepenuhnya terserah Anda. Di sini, saya ingin menambahkan
judul saya dan properti harga dan tindakan ke stylesheet saya di sini dan sekarang untuk judul, Anda tentu saja dapat gaya
ini dengan cara apa pun yang Anda inginkan.
Kami tidak memiliki font khusus di
sini, saya akan menambahkan beberapa segera tetapi untuk saat ini,
saya akan mengabaikannya dan mulai dengan ukuran font 18 dan saya ingin menambahkan margin vertikal, jadi bagian atas dan bawah
dari 3 atau 4, jadi marginnya sangat kecil tapi masih ada margin di sekitar judul ini. Untuk harga, saya akan menetapkan ukuran font 14
sehingga sedikit lebih kecil dan saya juga akan memberikan warna ini yang seharusnya 888
yang seperti abu-abu, warna abu-abu gelap.
Sekarang tindakan ditempatkan pada tampilan yang menahan tombol dan oleh karena itu, saya ingin memastikan bahwa
tombol duduk bersebelahan, jadi dalam satu baris.
Jadi saya akan memberikan arah baris yang fleksibel di sini dan saya juga akan membenarkan konten untuk memiliki semua ruang yang tersisa di antara
mereka dan di samping itu, saya ingin menyelaraskan item di tengah secara vertikal, jadi di sepanjang sumbu silang yang
untuk arah fleksibel baris adalah sumbu vertikal.
Dengan itu, kami memiliki beberapa gaya dasar,
sekarang mari kita gunakan komponen itu sebelum kita memperbaiki pengaturan dan gaya. Jadi komponen item produk yang kami ekspor
di sini dalam file item produk sekarang dapat digunakan dalam file tinjauan
produk dengan mengimpor item produk dari
sana, jadi mari kita tunjuk folder komponen kami, ada di subfolder toko dan kemudian item produk
dan sekarang ini yang ingin saya gunakan di sini ketika saya memberikan barang saya.
Item produk dapat menjadi komponen penutupan sendiri karena semua data diterima melalui alat peraga dan bukan di antara
tag pembuka dan penutup, sekarang tentu saja
kita perlu mengatur semua hal yang kita harapkan di sini.
Kami mengharapkan gambar, judul, harga, dan dua alat peraga penanganan acara kami di sini, jadi
itulah yang perlu kami sediakan sekarang.
Karenanya di sini pada item produk,
saya akan mulai dengan gambar dan tentu saja itemData. barang. imageUrl dan kamu
harus selalu mengingat itemData itu. item menunjuk sebagai produk sebagaimana didefinisikan dalam model produk kami dan oleh
karena itu akan memiliki properti imageUrl ditulis seperti ini, jika Anda
menulisnya secara berbeda, Anda tentu perlu mengaksesnya secara berbeda. Selain gambar, kami juga akan
memiliki judul yang itemData. barang. judul dan selain itu, kita akan memiliki harga
dengan itemData. barang. harga
dan kemudian kami memiliki dua penangan acara kami di sini karena kami memiliki prop pada tampilan detail dan
prop tambah pada kereta yang perlu kami tambahkan. Jadi pada tampilan detail akan melakukan sesuatu nanti, untuk saat ini
hanya fungsi kosong dan di tambahkan ke keranjang juga akan melakukan
sesuatu nanti, karena sekarang ini juga bisa
menjadi fungsi kosong, ini adalah bagaimana item produk kami harus dirender. Dengan itu jika kita menyimpan ini, ini
adalah apa yang harus Anda lihat, itu belum sempurna
tetapi kita sampai di sana, ini sebenarnya tidak terlalu buruk.
Sekarang tentu saja apa yang Anda perhatikan adalah bahwa tombol-tombolnya berwarna dengan cara yang salah, bahwa ruang
ini tidak benar-benar digunakan dengan cara yang seharusnya digunakan di sana, bahwa kami mungkin juga
ingin memusatkan teks ini tetapi ini tentu saja hal-hal kita bisa bekerja. Jadi untuk memperbaikinya, kembali ke komponen item produk di sini, mari kita
mulai dengan dua teks kami di sini.
Mereka tentu saja harus dipusatkan dan itu dapat dilakukan dengan cara yang sangat sederhana dengan membungkusnya dengan sebuah
tampilan, memindahkan dua teks ini ke sana, memberikan gaya tampilan itu dan tentu saja Anda dapat memberi
nama ini sesuai keinginan
Anda, saya akan menyebutkan itu detail karena kita jenis tata letak detail produk
di sana, jadi saya akan menambahkan gaya detail saya di sini ke stylesheet dan di sana, saya hanya akan mengatur pusat item menyelaraskan.
Ini menggunakan arah lentur kolom, default dan karena itu berpusat pada sumbu silang, selalu melakukan ini tetapi sumbu silang
untuk kolom arah lentur tentu saja dibelokkan ke kanan, sehingga
berpusat secara horizontal yang merupakan apa yang saya inginkan di sini dan saya ' Saya juga akan memberikan ini tinggi 15%.
Perlu diingat bahwa gambar mengambil 60%, jadi kami memberikan ini mungkin
15%, jadi hampir setengah dari 40% sisanya, tidak cukup setengah Dan saya
akan menambahkan sedikit padding di sini dari 10 mungkin.
Dan untuk tombol di sini, ini ada di properti tindakan saya, di sana saya ingin mengatur
ketinggian ke 25% sisanya, yang seharusnya menjadi string tentu saja
karena kita memiliki tinggi 60% di sini, maka kita memiliki 15%
di sini, maka di
sini Saya ingin tetap memiliki 25% sisanya dan jika kita sekarang menyimpan ini, ini terlihat jauh lebih baik.
Sekarang beberapa padding ke kiri dan kanan juga akan bagus
untuk tombol, jadi pada properti style action ini, saya akan menambahkan padding horizontal 20 mungkin, sehingga kita memiliki beberapa jarak
internal kiri atau kanan. Sekarang untuk mengubah warna
tombol, kita bisa pergi ke komponen tombol yang dibangun ke React Native
dan mengatur prop
warna di sini untuk warna yang karena itu Anda perlu mengimpor dari folder konstanta
dan dari
file warna di sana dan mengatur ini kemudian ke warna-warna primer, juga di sini untuk warna kedua, tombol tambahkan ke kereta, tombol kedua karena itu.
Jadi sekarang kita memiliki tombol
kita di sini, tambahkan ke keranjang dan lihat detail dan ini tidak terlihat terlalu buruk.
Satu hal yang tersisa yang mungkin Anda perhatikan adalah bahwa kami tidak memiliki sudut bulat
di sini di bagian atas dan alasannya adalah bahwa gambar kami pada dasarnya seperti hamparan ke latar belakang kami dan latar
belakangnya adalah tampilan
sekeliling, gambar tidak memiliki sudut bundar dan karena itu tumpang tindih sudut kami
yang kami miliki di tampilan sekitarnya. Untuk memperbaikinya, kita dapat membungkus
gambar ke dalam tampilan terpisah dan seperti yang saya sebutkan sebelumnya
dalam kursus, itu benar-benar normal dalam React Native untuk memiliki beberapa tampilan
bersarang karena untuk tampilan ini, kita sekarang dapat melampirkan gaya yang kita mungkin bisa berikan pengenal wadah gambar yang sekarang dapat kita tambahkan ke
stylesheet kita dan sekarang saya akan memberikan wadah gambar ini lebar dan tinggi saya di sini dan pada gambar,
karena itu saya hanya akan menambahkan lebar dan tinggi 100% karena
sekarang di
dalam wadah, ini di sini
merujuk pada induk,
jadi ke wadah ini, sehingga ketinggian 60% kemudian juga
akan diterapkan pada gambar tetapi pada wadah gambar itu,
kita sekarang dapat menambahkan jari-jari batas kiri atas 10 dan batas atas Jari-jari kanan 10
sehingga kita memutari sudut-sudut ini
dan sekarang penting, tambahkan overflow disembunyikan di sini karena ini akan memastikan bahwa setiap anak di sana yang merupakan
gambar kita tentu saja tidak bisa tumpang tindih dengan apa yang kita atur di sini.
Jadi sekarang dengan pengaturan ini, kami menambahkan sudut bulat kami di sini kembali ke atas dan
sekarang ini adalah item gambar yang saya inginkan di sini dan tentu saja itu juga daftar yang dapat
digulir di mana Anda juga melihat bahwa gambar-gambar ini dimuat malas secara otomatis yang dapat Anda terus bekerja dengan.
Tentu saja, tujuan selanjutnya bisa jadi kita juga bisa melihat layar detail.