Jadi mari kita bekerja pada layar pesanan sekarang dan menghasilkan lebih dari sekedar teks membosankan ini.
Sekarang sama seperti layar keranjang dan layar tinjauan umum produk, saya ingin item pesanan lebih kompleks dan
oleh karena itu saya akan membuat komponen item pesanan terpisah di folder komponen dan ada di folder toko.
Seperti biasa, terserah Anda apakah Anda juga
melakukan itu tetapi karena ini bukan komponen yang super kecil, saya lebih suka memilikinya dalam file terpisah.
Jadi saya akan mengimpor Bereaksi dari Bereaksi di sini dan tidak mengherankan tentu saja mengimpor banyak hal
dari Bereaksi Asli dan itu akan menjadi tampilan, teks, stylesheet karena kita pasti akan mengatur beberapa gaya juga
dan juga tombol karena saya juga ingin dapat memperluas pesanan sehingga kami tidak selalu melihat semua item yang merupakan
bagian dari pesanan tetapi kami dapat melihatnya jika ingin. Sekarang dengan itu, kita dapat membuat item pesanan kita konstan di
sini, sehingga akan menjadi komponen itu sendiri yang menerima alat peraga dan kemudian pada akhirnya akan memiliki tubuhnya di sini dan
mengembalikan beberapa kode jsx dan kita memerlukan objek gaya di sini dengan Stylesheet. buat seperti ini dan
juga ekspor item pesanan sebagai default.
Sekarang bagaimana seharusnya barang pesanan terlihat?
Sekarang seperti biasa, terserah Anda, tetapi saya akan bekerja dengan tampilan di sini dan ide saya adalah bahwa saya selalu menunjukkan seperti
jumlah total pesanan dan tanggal dan kemudian tombol detail acara yang dapat kita tekan untuk melihat masing-masing item yang merupakan bagian
dari pesanan dan untuk barang-barang ini, saya akan benar-benar menggunakan komponen barang keranjang di sini karena saya
ingin membuat barang yang sama persis seperti yang saya tampilkan di dalam kereta.
Jadi saya benar-benar akan mengimpor item keranjang dari komponen item keranjang dan menggunakan kembali komponen itu di sini.
Sekarang kembali ke kode jsx itu,
jadi kami memiliki tampilan pembungkus di sekitar seluruh objek pesanan kami, seluruh entri pesanan kami di sini.
Sekarang di sana, saya ingin memiliki baris pertama dan oleh karena itu saya akan
menggunakan tampilan lain sehingga kita dapat gaya ini dengan tepat yang akan menampung beberapa teks yang menampilkan total kami, jadi jumlah dari urutan itu
katakanlah dan teks lain di mana saya menunjukkan tanggal dan ini harus di baris yang sama dengan spasi di antara mereka.
Di bawah mereka seperti yang saya sebutkan harus berupa tombol yang dapat kita tekan untuk menunjukkan detail yang kemudian menunjukkan semua
item yang merupakan bagian dari pesanan itu. Sekarang dengan pengaturan itu,
tentu saja jelas bahwa jumlah di sini harus diterima dengan bantuan alat peraga.
Jadi di sana saya berharap untuk mendapatkan jumlah prop dan saya akan menelepon untuk memperbaiki 2 untuk menampilkan jumlah tempat
desimal yang sesuai. Sekarang untuk tanggal,
saya ingin menampilkan tanggal alat peraga di sini sehingga kami memiliki tanggal yang dapat kami hasilkan. Untuk penataan, secara keseluruhan di sini saya ingin memiliki penugasan
gaya item pesanan sehingga kita dapat menata seluruh pesanan dan kemudian di sana, kita perlu
seperti katakanlah ringkasan gaya sehingga kita dapat mendesain baris ini
dan mengenai teks di sini, ini seharusnya memiliki gaya katakanlah jumlah total, seperti biasa pengidentifikasi gaya ini terserah Anda, di
sini
saya ingin memiliki gaya tanggal.
Tombol juga harus mendapatkan warna sendiri yang akan saya dapatkan dari warna konstan, oleh karena itu impor ini perlu ditambahkan
dan di sana,
saya akan menggunakan warna primer saya. Oke, jadi itu untuk sekarang,
saya akan
kembali ke detail dalam satu detik,
sekarang mari kita terapkan beberapa styling di sini sehingga kita dapat melihat sesuatu. Untuk item pesanan itu sendiri, saya akan menggunakan
kembali tampilan keranjang yang sudah saya miliki di item produk, jadi saya akan menyalin semua pengaturan
ini dari item produk dan memindahkannya ke item pesanan
sehingga bayangan diterapkan , warna latar belakang, radius batas, semua itu harus diterapkan.
Selain itu, saya akan menambahkan margin 20 di semua arah sehingga setiap item pesanan memiliki beberapa spasi di sekitarnya.
Di dalam item pesanan, saya juga ingin memiliki padding 10 sehingga konten di sana
tidak duduk langsung di tepi perbatasan sekitarnya dan seterusnya. Sekarang untuk ringkasan yang merupakan pandangan ini yang memegang
dua potongan teks, di sana gaya sebenarnya
harus bahwa kita memiliki arah fleksibel dari baris tentu saja karena
item harus duduk bersebelahan. Justifikasi konten harus berupa
ruang antara dan di samping itu, sejajarkan item harus berada di tengah, sehingga pada sumbu silang yang di sini
adalah sumbu vertikal, item berada di tengah.
Saya juga ingin memastikan bahwa kami mengambil lebar penuh yang tersedia di sini untuk mendistribusikan teks. Sekarang untuk jumlah total yang merupakan gaya
yang diterapkan pada potongan teks pertama ini yang menghasilkan jumlah, di sana seperti biasa Anda dapat mengaturnya sesuka Anda,
tetapi saya akan menetapkan keluarga font sans terbuka untuk menggunakan versi huruf tebal dari
font saya dan berikan ukuran font 16 katakanlah dan kemudian untuk tanggal yang merupakan gaya saya saya terapkan ke teks
tanggal di sini, di sana saya pada akhirnya juga
ingin menggunakan ukuran font 16 tetapi keluarga font hanya akan menjadi sans terbuka, tanpa versi tebal
dan di
samping itu, kita juga dapat menggunakan kembali warna abu-abu gelap di sini. Sekarang dengan ini, mari kita coba dan mari kita gunakan
item pesanan itu di layar pesanan.
Jadi di sana, pertama-tama kita perlu mengimpor item pesanan dari dan kemudian tentu saja pergi
ke folder komponen, di sana ke folder toko dan kemudian mengimpor item pesanan dari file item
pesanan itu dan di
sini alih-alih merender teks itu, kita sekarang render item pesanan di sini sebagai tag penutup sendiri dan tentu
saja, kita perlu mengkonfigurasi ini.
Ini mengharuskan kita untuk mengirimkan jumlah dan tanggal dan kemudian juga item detail, sehingga item dalam
urutan tetapi itu
akan datang di langkah kedua.
Jadi untuk sekarang di sini, kita perlu memberikan jumlah dan itu tentu saja hanya itemData. item yang merupakan satu pesanan, jangan lupa kami mengulang-ulang semua
pesanan di
sini yang merupakan array pesanan, jadi itu adalah satu
pesanan dan di
sana, jumlah jika kita melihat model pesanan kami disimpan dalam sebuah bidang jumlah total, tanggal kemudian
disimpan di bidang tanggal.
Jadi di sini kita mengakses bidang jumlah total dan untuk prop tanggal yang juga harus kita lewati,
kita dapat mengakses itemData. barang. tanggal. Jika sekarang kita
menyimpan ini dan kita melihatnya, mari kita tambahkan beberapa konten di sini, pesan ini dan kemudian pergi ke layar pesanan kami dan kami mendapatkan kesalahan ini.
Sekarang ini mengacu pada objek yang tidak valid seperti Bereaksi seharusnya dan menunjukkan kepada
kita bahwa pada akhirnya, itu adalah objek keadaan yang mengalami masalah dan itu masuk akal karena tanggal dalam pesanan kami ketika
kami membuatnya di sini di toko Redux kami adalah tanggal Javascript obyek.
Sekarang kita tidak bisa menampilkan ini sebagai teks seperti itu. Untuk meng-output-nya, kita bisa
masuk ke model kita di sini, yang pada akhirnya cetak biru yang kita gunakan untuk
membuat pesanan dan dalam model pemesanan, kita bisa melakukan sesuatu yang belum pernah kita lakukan sebelumnya, kita bisa
menambahkan metode untuk ini model atau lebih tepatnya, pengambil yang merupakan fitur Javascript default dari Javascript modern.
Jadi di sini, kita dapat menggunakan kata kunci get dan kemudian nama apa pun pilihan Anda seperti tanggal
yang dapat dibaca yang seperti fungsi tetapi bukan fungsi yang Anda panggil seperti fungsi tetapi yang Anda
akses seperti properti pada akhirnya yang mengembalikan nilai yang dihitung dan ada Saya ingin mengembalikan tanggal ini, jadi objek tanggal yang
disimpan untuk objek ini, tetapi kemudian kita dapat memanggil ke string tanggal lokal yang merupakan metode Javascript bawaan yang dapat kita gunakan pada objek tanggal
untuk mengonversi objek ini ke tanggal yang dapat dibaca manusia. Di sana kami mengirimkan bahasa yang ingin
kami optimalkan seperti ini misalnya dan sekarang kami dapat mengonfigurasinya dengan argumen
kedua yang merupakan objek Javascript. Di sana Anda dapat menentukan
bagaimana tahun harus dikonfigurasi dan dilampirkan Anda menemukan dokumen terperinci untuk
metode ini jika Anda ingin mempelajari semua tentang hal itu dan misalnya, kita dapat mengatur tahun
ke numerik, bulan ke panjang, hari ke numerik, jam ke dua digit dan menit juga ke dua digit.
Sekarang kita memiliki properti tanggal yang dapat dibaca yang dapat kita akses pada item pesanan apa pun
dan di sana untuk saat ini di layar pesanan, alih-alih meneruskan objek data seperti ini, saya mengakses tanggal yang
dapat dibaca yang sekarang menjadi properti pengambil baru ini yang kita tambahkan dan sekarang apa Anda akan melihat bahwa jika saya sekali
lagi melakukan pemesanan di sini dengan mengklik pesanan sekarang dan sekarang saya pergi ke pesanan saya, sekarang Anda melihat jumlah total dan tanggal ini diformat
rapi dan sekarang jika saya melakukan hal yang sama di Android dan saya melakukan pemesanan di sini dan saya pergi ke
layar pesanan saya, Anda melihat hal yang sama di sana. Sekarang di sana saya hanya ingin mengubah sedikit tombol itu,
secara umum juga di iOS, seharusnya tidak seluas, tidak seluas di sini. Jadi dalam komponen item pesanan di mana saya memiliki tombol ini, pada
akhirnya apa yang dapat kita lakukan adalah pada tampilan ini di sini, kita dapat menambahkan item align center untuk memusatkan konten di sepanjang sumbu silang yang dibiarkan ke kanan dan oleh karena itu sekarang jika saya mencoba ini lagi dan
saya melakukan pemesanan ini dan saya pergi ke pesanan, Anda lihat ini sekarang tidak dapat ditekan di sana dan itu bahkan lebih jelas
di Android jika kita memuatnya kembali di sana dan saya memesan ini dengan sangat
cepat di sini, buka layar pesanan, sekarang kami memiliki tombol ini. Sekarang tentu saja tujuannya adalah ketika kita
menekan tombol ini, pesanan ini diperluas di sini. Omong-omong, apa yang akan Anda catat di Android adalah
bahwa tanggal ini tidak ditampilkan dengan
benar, jadi itu hal lain yang perlu kami perbaiki.
Sekarang alasan untuk itu tidak ditampilkan dengan benar adalah bagaimana React Native bekerja secara internal,
mesin Javascript yang digunakan secara internal dan yang digunakan untuk Android di sana atau pada platform Android tidak
hanya mendukung metode string tanggal yang bagus yang saya gunakan di sini .
Mesin yang digunakan pada iOS tetapi pada
Android, itu tidak terjadi, yang tentu saja tidak nyaman dan tidak terlalu bagus.
Jadi apa yang bisa kita lakukan pada Android untuk memperbaikinya?
Solusinya adalah menginstal perpustakaan terpisah yang disebut momen. js, kami instal dengan npm install
--save moment.
Ini adalah perpustakaan pihak ketiga yang akan
bekerja pada kedua platform yang membuat format tanggal juga sangat sederhana.
Jadi mari kita tunggu sampai instalasi ini selesai.
Sekarang dengan yang diinstal, Anda mengimpor semuanya sebagai momen dari saat dan dari perpustakaan yang baru saja Anda instal dan
sekarang Anda dapat menggunakannya dalam file ini di sini.
Sekarang kita dapat berkomentar di sini dan sebagai gantinya mengembalikan momen, dieksekusi seperti fungsi dan
meneruskannya. tanggal,
jadi objek tanggal yang ingin kita format dan format panggilan. Sekarang format mengambil string di mana Anda dapat mengkonfigurasi cara memformat ini dan
melampirkan, Anda juga menemukan tautan ke dokumen resmi di mana Anda dapat mempelajari semua
tentang kemungkinan yang Anda miliki di sana.
Sekarang di sini, salah satu contoh, satu cara memformat ini, katakanlah bulan yang panjang yang Anda lakukan
dengan 4 modal Ms, maka o untuk memiliki tanggal yang diformat dengan baik di bulan itu, hari
dalam output bulan, tahun diwakili oleh empat digit dan lalu satu jam selalu diwakili dengan dua digit dan menit dan sekarang jika kita
menyimpan ini dan kita
coba ini, mulai dari iOS, tambahkan ini di sini ke troli, pergi ke troli dan pesan ini dan sekarang pergi
ke pesanan, ini terlihat
baik.
Dan sekarang jika kami mencobanya di Android juga, kami
memesannya dan kemudian kami memesan, sekarang juga terlihat bagus di sana.
Nah, itu sedikit perbaikan, sekarang mari kita bekerja
pada tombol dan memberinya spasi juga selain menyusut ukurannya dan itu dapat dilakukan dengan pergi ke ringkasan
di sini yang gaya berlaku untuk tampilan yang memegang dua potongan teks, ada
kita cukup menambahkan margin di bagian bawah misalkan 15 sehingga kita memiliki jarak antara baris ringkasan yang merupakan
baris teks ini di bagian atas dan tombol di bawahnya. Jadi saya akan menambahkan ini ke keranjang saya di sini, pesan ini, lalu kembali ke sini, pergi ke
pesanan, sekarang ini terlihat bagus.
Sekarang mari kita pastikan
tombol detail acara melakukan sesuatu juga.