Mari kita mulai dengan dialog konfirmasi di sini di layar edit produk. Kita cukup mengimpor API peringatan dari React
Native yang memungkinkan kita untuk menampilkan peringatan yang bagus dan kemudian menambahkan metode baru di sini mungkin, kita semua bisa
melakukannya sejalan tetapi memiliki kode yang lebih terstruktur di mana saya memiliki handler hapus saya.
Ngomong-ngomong, bagaimana Anda menyebutkan fungsi Anda sepenuhnya terserah Anda, saya hanya suka penamaan pawang ini di sini jika saya tetapkan itu untuk acara
saya, pemancar dalam kode JSX sehingga bisa dikatakan dan di sana kita bisa memanggil waspada. lansiran untuk menampilkan lansiran dengan judul
Anda yakin
pesan,
apakah Anda benar-benar ingin menghapus item ini dan kemudian
array dengan semua tombol yang
ingin kami sajikan di mana tombol nomor satu memiliki teks tidak dan gaya standar.
Hanya ada tiga gaya default atau gaya prakonfigurasi yang dapat Anda pilih dan tidak ada penangan khusus
pada tombol pertama ini.
Tombol kedua memiliki ya, di sana saya
ingin memiliki gaya destruktif untuk menandai ini karena
hei ini akan menghapus sesuatu dan penangan onPress di sini kemudian pada akhirnya memegang fungsi yang
benar-benar akan mengirimkan tindakan penghapusan.
Jadi sekarang ini adalah delete handler yang ingin saya jalankan ketika kita mengklik tombol delete itu dan tentu saja saya salah komponen
yang baru saja saya lihat.
Mari kita potong ini,
ini bukan di dalam layar edit produk,
kita tidak perlu impor peringatan
di sana, ini adalah layar produk pengguna yang saya bicarakan. Di sana kita perlu mengimpor peringatan, di
sana kita harus menambahkan penangan ini dan sekarang penangan penghapusan harus ditugaskan ke tombol
hapus ini di sini, jadi di sini kita bisa menunjuk pada penangan hapus dan fungsi anonim
ini dapat dipotong dari sana dan dapat pindah ke sini dan ganti penangan onPress ini untuk tombol ini
dan sekarang dengan itu, kita harus mendapatkan popup ini, dialog konfirmasi ini sebelum kita benar-benar menghapus sesuatu.
Jadi jika saya klik hapus, sekarang saya bertanya, jika saya
tekan
tidak, tidak ada yang terjadi,
hanya jika saya klik ya kita hapus ini. Kesalahan kecil tentu saja adalah bahwa
data barang yang kita butuhkan
harus tersedia.
Jadi di sini kita meneruskan ID yang ingin kita hapus,
jadi sebenarnya untuk penangan hapus, kita memerlukan ID dari produk yang kita lamar penangan ini sehingga di
sini saya memiliki ID yang tersedia dan itu berarti bahwa ketika penangan penghapusan dipanggil di
bawah sana, kita harus memastikan mendapat ID.
Jadi ada dua cara untuk melakukan itu, fungsi anonim
di mana kami menjalankan delete handler secara manual dan meneruskan itemData. barang. id atau alternatif
untuk itu, melewati delete handler seperti ini tetapi gunakan bind untuk mengatur ulang argumen apa pun yang
akan didapat fungsi ini. Bind selalu membutuhkan nilai untuk kata kunci ini di dalam fungsi yang akan dijalankannya. Di sana kita hanya bisa
meneruskan ini, itu tidak masalah tetapi argumen kedua
sekarang adalah argumen pertama yang akan dihapus oleh handler, jadi di
sini kita melewati itemData. barang. Indo. Sekarang dengan itu, kami
memastikan bahwa kami benar-benar dapat menekan ya dan itu akan berhasil, jika sekarang kami kembali ke admin, klik hapus, tekan ya,
ini sekarang benar-benar berfungsi dan jika kami menekan tidak, tidak ada yang terjadi, ya hapus.
Jadi itu yang
pertama dan untuk memastikan bahwa kita menavigasi kembali, jika kita menyimpan ini, sekarang kita perlu pergi
ke layar edit produk dan ada di dalam penangan kirim kita, tidak peduli apakah kita mengirim pembaruan atau membuat tindakan produk,
di akhirnya saya ingin juga memanggil alat peraga navigasi kembali untuk kembali ke layar sebelumnya. Dan jika kita sekarang menyimpan ini dan kita pergi ke layar
admin dan saya lakukan untuk sekarang mengirimkan produk kosong, saya tentu saja mendapat
peringatan tetapi ini umumnya berfungsi, ini kembali dan jika saya mengedit produk, ini
juga berfungsi.
Jadi sekarang dengan ini, kita sudah selesai dengan semua manajemen input itu, hal yang
tersisa yang sekarang ingin saya lakukan sebelum saya benar-benar menyelesaikan semua ini adalah untuk sekarang saya
ingin mengoptimalkan item produk sedikit
lebih dan cara kita menggunakan kembali kartu kami lihat di sini dengan bayangan dan sebagainya karena kami menggunakannya
dalam banyak komponen
dan jika Anda menemukan diri Anda menggunakan sesuatu dalam banyak komponen, Anda mungkin selalu ingin memikirkan apakah
Anda dapat mengoptimalkan ini sedikit lebih
banyak dan memang di sini , kami memiliki potensi pengoptimalan.
Jadi bagaimana kita bisa mengoptimalkan ini?
Yah kita bisa membuat komponen terpisah di sini di folder UI kita dari folder
komponen yang kita namakan keranjang. js, tempat kami hanya menyimpan tampilan keranjang ini. Komponen kereta bisa
menjadi komponen yang sangat sederhana pada akhirnya. Kami mengimpor Bereaksi dari Bereaksi di sini karena kami perlu membuat komponen dan
kami mengimpor pandangan dari Bereaksi Asli, seperti itu dan sekarang di sini, kami membuat komponen kereta kami di mana kami mendapatkan alat peraga kami,
mengembalikan beberapa jsx dan mengekspor komponen ini di akhirnya, meskipun kita juga perlu mengatur beberapa gaya karena itulah ide inti
di balik komponen ini, ini semua
tentang memberi kita beberapa gaya yang telah dikonfigurasikan sebelumnya. Jadi saya juga akan menambahkan style saya konstan dengan
Stylesheet. buat
di sana dan sekarang, apa kode jsx saya ingin kembali ke sini?
Nah itu tampilan, tampilan yang benar-benar akan membungkus apa pun yang kami lewati di sana,
jadi di antara tag komponen saya, jadi hanya alat peraga anak-anak di sana tapi
sekarang tampilan itu bisa mendapatkan beberapa style default di sini yang akan saya beri nama keranjang dan yang seharusnya menjadi
gaya yang saya salin di sekitar.
Jadi di sini gaya troli saya dalam komponen troli ini persis seperti yang saya miliki di sini,
item produknya, ini
bayangan di sini, ketinggian, radius batas, dan warna latar belakang. Anda dapat memotong semua itu dan memindahkannya ke troli di
sini.
Sekarang untuk masih dapat mengkonfigurasi ini sedikit, saya akan benar-benar meningkatkan ini
dan mengatur gaya ke objek tempat saya menggabungkan nilai keranjang gaya saya dan nilai apa pun yang saya dapatkan di prop gaya di sini, seperti ini.
Jadi sekarang kita bahkan dapat menetapkan prop gaya ketika kita menggunakan keranjang kita
dan meneruskan gaya kita sendiri yang akan digabung bersama dengan gaya kartu default ini karena ini
sekarang memungkinkan saya untuk menggunakan kereta di sini di item produk misalnya dengan mengimpor keranjang dari , dan sekarang naik satu tingkat ke folder UI, ke dalam file keranjang
dan ganti tampilan
ini di sini, tampilan luar
ini dengan kartu dan tentu saja karena itu juga ganti tag penutup dan masih meneruskan spesifikasi produk
saya di sini, jadi ini tinggi dan margin .
Ini akan digabung dengan tampilan kartu lainnya dan segala sesuatu antara kartu
pembuka dan penutup kartu hanya akan berfungsi, saya meneruskannya ke kartu saya di
sini dengan bantuan alat peraga anak-anak. Sekarang sama untuk item
pesanan, di sana kita hanya perlu mengimpor kartu dari dan sekarang masuk ke folder UI, untuk kartu
di sini dan kemudian menggunakan kartu, bukan tampilan itu,
tampilan luar di sini, ganti dengan kartu dan singkirkan gaya kartu ini di
sini, hal-hal bayangan, ketinggian, radius batas, dan warna latar belakang dan hanya
menyimpan gaya khusus yang ingin Anda gabungkan. Dan sekarang hal terakhir, tempat terakhir di mana kita bisa menggunakan ini
adalah layar keranjang, di sana saya juga memiliki ringkasan saya yang menggunakan gaya kartu ini.
Nah sekali lagi, kita dapat mengimpor komponen kartu dari folder komponen,
folder UI di sana-sini, dari kereta. File js dan sekarang menggunakan komponen kartu alih-alih melihat di tempat
kami menginginkan gaya kartu
ini, jadi di sini yang akan menjadi tampilan yang memiliki gaya
ringkasan, saya akan mengganti ini dengan kartu. Dan pada gaya ringkasan, kami menyimpan
semua yang spesifik untuk layar ini atau komponen ini, tetapi kami dapat menyingkirkan warna
bayangan, radius bayangan, ketinggian, warna latar belakang radius perbatasan, yang semuanya dapat dihapus.
Sekarang mari kita simpan itu dan Anda akan melihat bahwa tentu saja aplikasi masih
bekerja dan terlihat
dengan cara yang sama seperti sebelumnya jika saya menambahkan ini ke keranjang misalnya dan saya memesan ini dan
saya melihat pesanan saya, ini semua terlihat cara itu dilakukan sebelumnya tetapi sekarang melakukannya dengan sedikit kode yang lebih optimal
di mana kita benar-benar menggunakan kembali gaya kita dan memiliki komponen presentasi terpisah
untuk mereka sehingga komponen lain kita bisa sedikit lebih ramping dan kita tidak mengulangi diri
kita sebagai sering ketika mengatur tampilan kereta itu. Keuntungan lain adalah kita tidak bisa salah ketik, jika kita menetapkan
radius shadow ke 8 dalam satu komponen dan 10 di lain komponen, maka aplikasi kita mungkin terlihat sedikit tidak konsisten.
Kami menghindari ini dengan memiliki beberapa komponen penataan gaya terpusat yang mengatur gaya inti ini yang kemudian kami gunakan dalam komponen
lain seperti yang kami lakukan di sini.