Aktif ke item keranjang.
Sekarang lagi, saya akan membuat komponen terpisah untuk setiap item keranjang yang ingin
saya hasilkan di sini.
Saya bisa melakukannya di sini tapi sekali lagi, itu akan menjadi komponen yang lebih panjang dan saya tidak ingin mengasapi file ini
dengannya dan saya benar-benar juga akan menggunakannya di tempat lain nanti yang mungkin terdengar aneh
mengingat bahwa kita hanya memiliki satu layar keranjang tetapi Anda akan melihat di mana lagi
kita bisa menggunakan item keranjang nanti.
Jadi untuk itu, mari kita kembali ke folder komponen dan mungkin ada di folder toko
dan tambahkan CartItem. File js di sebelah item produk.
Sekarang tentu saja kita memiliki komponen Bereaksi normal di sana, jadi Anda tahu
permainannya, bagaimana mereka dibuat.
Kami mengimpor Bereaksi dari Bereaksi dan kemudian di sini karena ini adalah komponen yang harus mengeluarkan sesuatu,
kami akan mengimpor banyak komponen dari Bereaksi Asli, inti primitif yang dengannya kami membangun UI.
Saya akan memerlukan tampilan, saya akan membutuhkan teks, saya akan memerlukan stylesheet di sini untuk memastikan dan kemudian saya akan menambahkan konstanta saya di sini, item keranjang
yang menerima alat peraga dan kemudian pada akhirnya di sini mengembalikan beberapa kode JSX. Saya akan menambahkan objek gaya saya
di sini dengan membuat
stylesheet dan saya akan mengekspor ini sebagai item keranjang default.
Sekarang kode jsx yang harus dikembalikan ke sini tentu saja terserah Anda, tetapi saya akan
memiliki pandangan di sini dan dalam pandangan itu, saya ingin menampilkan jumlah dan judul saja, juga jumlah total untuk
item keranjang ini jika-kalau kami menambahkan lebih dari satu, maka ini bukan hanya harga satu item
tetapi tentu saja harga kali kuantitas dan saya sebenarnya juga ingin memiliki tombol yang memungkinkan saya
untuk menghapus item ini dari
keranjang, ikon tempat sampah.
Jadi pada akhirnya, saya akan memiliki baris di sini dengan teks dan teks ini akan memiliki kuantitas dan judul, jadi di
sana saya akan memiliki kuantitas dan judul dan sebenarnya ini harus ditata berbeda, jadi saya akan membungkus kuantitas di sini menjadi simpul
teks yang terpisah dan melakukan hal yang sama untuk judul, sehingga saya memiliki dua simpul
teks yang terpisah di sini pada akhirnya dan kemudian setelah blok teks ini di sini, harus ada pandangan untuk mengelompokkan dua elemen lainnya bersama-sama, bagian
lain dari teks yang merupakan jumlah total untuk item ini di sini, jadi
jumlah dan di samping itu, tombol atau sebenarnya bukan tombol tetapi sebenarnya ikon yang dapat ditekan.
Jadi saya akan membangun benda yang dapat disentuh sendiri dengan opacity yang dapat disentuh
dan tentu saja, Anda dapat melakukan diferensiasi platform lagi untuk efek riak tetapi saya akan menggunakan
opacity pada kedua platform di sini dan saya akan mengimpor ionik dari @ expo / vector-icons yang telah
kita tambahkan
sebelumnya karena saya ingin memiliki hanya ikon di sini yang dapat kita tekan, jadi
di sini saya ingin memiliki opacity terjamah dan membungkusnya di sekitar ikon yang dapat kita tambahkan dengan Ionicons
seperti yang Anda tambahkan sebelumnya dalam kursus ini, dengan ini sebagai sebuah komponen di sini dan kemudian
cukup menggunakan nama yang seharusnya benar-benar berbeda oleh platform karena namanya adalah ikon pengenal dan
di sana, kita dapat memeriksa platform OS dan jika itu adalah Android, maka ikon yang harus digunakan akan memiliki nama md trash dan jika tidak, itu akan menjadi tempat
sampah iOS yang membuat ikon tempat sampah yang bagus dan kami juga dapat memberikan ikon ini ukuran katakanlah 23 yang lagi-lagi
akan terlihat cukup bagus dan berwarna dan di sini, saya akan benar-benar menggunakan merah karena menghapus ini item
jadi itu harus seperti warna-warni ng warna yang akan saya katakan. Opacity terjamah ketika ditekan harus melakukan sesuatu dan itu harus meneruskan acara
pers ke komponen yang menggunakan
komponen item keranjang, jadi saya berharap untuk mendapatkan prop pada penghapusan, nama ini seperti biasa terserah Anda
yang memegang fungsi yang ada di end dieksekusi lalu dan kita juga dapat menambahkan gaya di sini, gaya yang sangat sederhana di mana saya menunjuk pada tombol delete misalnya dan
itu adalah deklarasi gaya yang dapat kita tambahkan sesudahnya.
Berbicara tentang gaya, tentu saja ada lebih
banyak gaya untuk ditambahkan, misalnya pada tampilan paling atas di sini, saya akan
memberikan ini gaya barang keranjang, teks ini
di sini kemudian
akan menerima gaya data barang mungkin. Teks dengan kuantitas ini dapat menerima gaya yang dapat kami beri nama gaya. kuantitas, lagi semua pengidentifikasi
gaya ini seperti biasa sepenuhnya terserah Anda.
Di sini pada judul, saya memiliki gaya
judul dan kemudian di sini pada tampilan ini, saya akan menambahkan gaya data barang lagi, jadi saya akan menggunakan kembali gaya ini karena saya ingin
memiliki set yang sama di sini dan jumlah ini di sini akan juga mendapatkan gaya jumlah. Jadi sekelompok gaya untuk ditambahkan, mari kita pergi ke stylesheet
dan di sana, tambahkan item keranjang
yang merupakan gaya root kami, lalu data
barang dan kuantitas, jadi
jumlah data
barang,
lalu judul di sini dan jumlah dan terakhir dan terakhir tetapi tidak paling tidak, tombol hapus.
Jadi itu juga sesuatu yang harus kita tambahkan di sini. Sekarang pada tombol hapus, itu sederhana, saya
hanya
akan menambahkan margin di sebelah kiri 20 untuk memiliki beberapa jarak antara ikon dan teks yang duduk di sebelahnya dan dengan
itu, mari kita pergi ke item keranjang.
Di sana, saya ingin memiliki padding 10, warna latar belakang putih, saya tidak akan menggunakan kartu saya lihat
di sini, saya tidak akan menambahkan bayangan di sini, Anda bisa melakukan itu tetapi saya lebih suka tampilan yang
berbeda.
Penting adalah baris arah lentur sehingga semua item dalam tampilan itu, jadi teks dan
tampilan ini duduk bersebelahan dalam satu dan baris yang sama. Justifikasi konten harus berupa ruang di antara sehingga
semua ruang kosong di antara dua blok konten ini dan saya juga akan menambahkan margin dalam arah horizontal 20
sehingga ada beberapa jarak
ke kiri dan ke kanan di sekitar item keranjang saya.
Sekarang data item, itulah gaya yang kami ulangi di sekitar kuantitas dan judul dan jumlah
dan tombol hapus, data item harus memiliki arah baris yang fleksibel untuk memastikan item di sana diposisikan dalam satu baris dan saya akan mengatur menyelaraskan
item di sini untuk pusat ke pusat semua konten secara vertikal. Sekarang untuk kuantitas di sini, saya ingin menetapkan keluarga font
open-sans, omong-omong, kita sebenarnya dapat juga menggunakan tampilan di sini alih-alih teks di sekitar dua node teks ini karena saya tidak menetapkan gaya
teks tertentu di sini , jadi mari kita lihat saja tetapi
dengan itu, kembali ke kuantitas. Kita dapat memberikan ini
keluarga font open-sans, warna mungkin ini warna abu-abu gelap yang kita gunakan sebelumnya
untuk harga, sekarang untuk kuantitas dan ukuran font 16 mungkin dan
kemudian di sini untuk judul, saya akan menetapkan font family open sans bold untuk bold, beri
ukuran font 16 juga dan pada jumlah di sini, saya akan melakukan hal yang sama persis.
Oleh karena itu tentu saja kita juga dapat menggabungkan ini menjadi satu dan gaya yang sama, mungkin nama teks utama ini
atau semacamnya,
singkirkan jumlahnya karena kita memiliki definisi gaya yang sama persis dan sekarang menggunakan teks utama di sini alih-alih
judul dan di sini sebagai gantinya jumlah.
Baik.
Ini adalah item
keranjang, sekarang mari kita gunakan di
layar keranjang dengan bantuan daftar datar
di sana karena saat ini kami tidak mengeluarkan barang apa pun di layar keranjang.
Jadi pandangan ini di sini dapat diganti dengan daftar
datar sekarang dan data yang kita duduk harus ada array item keranjang dan itu hanya apa yang kita miliki di
sini dalam konstanta item keranjang,
jadi mari kita gunakan ini di sini.
Sekarang
di sini, saya juga akan menambahkan ekstraktor kunci dan di sini Anda pasti perlu menambahkannya agar Bereaksi Asli
tahu di mana kunci Anda dapat ditemukan karena setiap item di sini pada akhirnya adalah dari format ini dan
ini tidak memiliki kunci maupun Properti ID tetapi kami tahu bahwa ID produk dapat digunakan sebagai kunci karena ini
akan unik untuk setiap item.
Jadi di sini, saya menunjuk item. productId pada akhirnya dan sekarang untuk
membuat item, saya ingin menggunakan item keranjang ini yang baru saja kita tambahkan.
Jadi di sini, kita perlu mengimpor item keranjang dari folder komponen, folder toko dan di sana, item keranjang dan kemudian menggunakan komponen item keranjang
ini di sana dalam fungsi render kami di mana kami mendapatkan data barang kami pada akhirnya
dan di mana kami kemudian mengembalikan item keranjang seperti ini dan sekarang pada item keranjang, kita perlu memasukkan beberapa
data, kan? Dalam item kereta,
saat ini saya memiliki dummy placeholder, tentu saja di sini saya berharap untuk mendapatkan kuantitas saya katakanlah pada prop bernama
kuantitas, saya berharap untuk mendapatkan judul saya pada mungkin prop nama judul dan jumlah pada prop nama jumlah dan di sana, saya akan menelepon untuk
memperbaiki ke 2 memastikan bahwa kami selalu memiliki dua tempat desimal di sana dan kami juga memiliki
prop di hapus yang kami harapkan benar.
Jadi kami mendapatkan kuantitas, judul, jumlah, dan pada penghapusan, jadi kembali ke layar keranjang,
itulah yang harus kami tambahkan, kuantitasnya tentu saja itemData. barang. kuantitas karena satu item di
sini tentu saja item seperti itu dan oleh karena
itu kita akan memiliki kuantitas tetap dan selain kuantitas, kita harus lulus dalam judul, jumlah
dan penghapusan.
Jadi judul tentu saja itemData. barang. produk. judul, itulah nama yang saya
pilih di sana, untuk jumlah yang bisa kami sampaikan pada itemData barang. jika kita melihat bagaimana kita
mendefinisikan data kita, itu akan menjadi jumlah, itu jumlah untuk satu item tidak peduli berapa banyak kuantitas yang kita
miliki di sana atau menghormati jumlah yang kita miliki sebenarnya.
Dan kemudian bertahan tetapi tidak sedikit untuk di hapus, kita harus menunjuk pada suatu fungsi dan pada saat ini, kita tidak memiliki logika untuk ini, jadi saya
hanya akan menunjuk
pada fungsi kosong dan ini sekarang menjadi item keranjang yang ingin saya render Itu. Mari
kita coba ini. Mari kita tambahkan dua kaos merah dan karpet biru, pergi ke troli dan
sekarang saya mendapat string teks harus dirender dalam komponen teks dan itu menunjuk ke item troli, baris 14, jadi mari
kita lihat itu, ya ini dia
di sini yang IDE saya secara otomatis ditambahkan, spasi putih ini saya ingin miliki di sini
setelah kuantitas saya. Saya memang ingin memilikinya di sini,
jadi saya hanya akan menambahkan satu spasi putih di sini sebelum saya menutup teks saya. Sekarang dengan itu, mari kita coba ini lagi,
dua baju merah, satu karpet biru.
Lihat jumlahnya di sini,
lihat judul di sini, lihat
jumlah dan ini tentu saja juga menambahkan hingga jumlah total ini.
Sekarang saatnya untuk membuat tombol hapus ini berfungsi.