Untuk menambahkan item tindakan ke header, saya akan melakukan sesuatu yang saya lakukan di bagian navigasi juga, di folder
komponen, saya ingin menambahkan tombol
header saya sendiri dan sekarang untuk
ini, saya akan menambahkan subfolder baru di di sana saya akan beri nama UI dan ide saya di sini sederhana.
Saya memiliki folder toko yang menampung semua komponen yang saya gunakan di toko
saya, yang menampilkan beberapa informasi terkait toko. Dalam folder UI, saya ingin memiliki beberapa
blok bangunan UI umum yang tentu saja saya juga gunakan dalam aplikasi toko
ini tetapi yang tidak benar-benar fokus pada keluaran data toko atau produk terkait tetapi yang hanya
ada di sana untuk memberikan beberapa gaya atau tata letak default dan itu di folder UI ini di mana saya akan menambahkan
tombol tajuk saya sendiri dengan masuk ke sana dan mengimpor Bereaksi dari Bereaksi dan kemudian mengimpor tombol tajuk dari tombol navigasi
Navigasi, paket ini saya instal di awal modul, jika Anda belum melakukan ini , pastikan Anda dapat menginstal paket
ini dan kemudian mengimpor ion dari @ expo / ikon-ikon.
Sekarang untuk menjadi super yakin bahwa Anda telah menginstalnya, jalankan npm install --save @ expo / vector-icons, sehingga paket
ini tersedia di proyek Anda.
Ini adalah impor yang saya butuhkan di
sini, sekarang saya juga ingin mengimpor warna saya dari folder konstanta dan di sana, warnanya. File js dan sekarang di sini, saya akan
menambahkan komponen tombol tajuk kustom saya yang merupakan komponen Bereaksi normal pada akhirnya yang menerima alat peraga dan
perlu mengembalikan beberapa jsx dan saya tentu saja akan mengekspor tombol tajuk kustom saya di sini di
akhir dan sekarang jsx yang dikembalikan ini di sini adalah tombol tajuk yang saya impor
dari tombol navigasi Navigasi Tolak tapi saya harus mengkonfigurasinya dengan cara tertentu, gunakan tombol tajuk di
sini dari tombol navigasi Navigasi. Untuk satu, ini harus menerima semua alat peraga
yang kami dapatkan di sini, jadi kami hanya meneruskan itu tetapi di samping itu, saya akan mengatur komponen
ikon saya di sini untuk Ionicons, sehingga kami selalu menggunakan Ionicons untuk
merender itu dan tentu saja Anda dapat menggunakan salah satu dari set ikon vektor yang berbeda disediakan oleh @ expo / vektor-ikon juga.
Saya akan mengatur ukuran ikon menjadi 23 yang saya temukan bekerja dengan sangat baik, tetapi tentu saja Anda dapat bereksperimen
dengan nilai yang berbeda di sini, juga
mungkin jika Anda menggunakan set ikon yang berbeda, cobalah ukuran ikon yang berbeda. Dan untuk warnanya, itu tergantung karena pada Android, kami
memiliki latar belakang
merah di sini, untuk iOS belum, jadi kami perlu mengatur warna berbeda
berdasarkan platform yang kami jalankan, jadi saya akan
sebenarnya mengimpor platform dari React Native di sini dan kemudian kita dapat memeriksa platform di sini dan jika versi OS adalah
Android, maka saya tahu
saya memiliki latar belakang bidang padat ini,
oleh karena itu ikonnya harus berwarna putih. Di iOS di sisi lain, latar belakangnya tidak terisi,
transparan dan karenanya di iOS, saya akan mengatur warna ikon saya menjadi Colors. utama.
Sekarang kita dapat menggunakannya untuk menambahkan ikon di sini di layar ikhtisar produk, di sana di opsi navigasi saya
di
sini, saya ingin menambahkan bagian kanan tajuk saya, jadi ikon di sebelah kanan tajuk saya dan untuk itu di sini,
kita perlu mengimpor beberapa hal, kita perlu mengimpor tombol dan item header dari paket Header navigasi
tombol Bereaksi yang kita instal.
Saya tentu saja juga perlu mengimpor tombol header saya sendiri dari komponen tombol header UI, jadi komponen ini kami hanya
bekerja di dan sekarang di sana, header kanan adalah tombol header sebagai pembungkus untuk mungkin memiliki beberapa item di sana tetapi saya
hanya akan menambahkan satu item, elemen penutup diri, pada tombol header sebelum kita melanjutkan dengan
item, kita harus mengatur komponen tombol header sama dengan tombol header, jadi untuk
tombol header kita sendiri di sini. Dan item tersebut sekarang dapat dikonfigurasikan, ia harus menerima judul yang
dapat
menjadi troli, ia harus menerima nama ikon dan saya benar-benar ingin menggunakan ikon yang berbeda berdasarkan
platform yang kami jalankan, jadi dari React Native, saya akan mengimpor platform, itu opsional, Anda bisa menggunakan satu dan ikon
yang sama untuk kedua platform tapi saya pikir itu juga terlihat bagus untuk memiliki ikon yang berbeda.
Dan kemudian di sini, saya akan memeriksa platform OS dan jika itu Android, maka saya ingin menggunakan ikon keranjang md yang merupakan ikon keranjang Ionicon
untuk desain material dan jika tidak saya akan menggunakan ikon keranjang iOS dan lagi Anda dapat menemukan semua tersedia
ikon dalam daftar ikon ini yang saya
tunjukkan sebelumnya dalam kursus, daftar ikon ikon / ikon pameran dan yang terakhir ketika item ditekan, kita mungkin
ingin melakukan sesuatu dan untuk saat ini, saya tidak melakukan apa-apa selain kita akan segera mengubahnya.
Jika sekarang kita menyimpan
ini,
kita harus melihat ikon ini
di sini, ini dia, ini keranjang kami, juga di Android dan sekarang kita hanya harus memastikan bahwa ketika
kita mengetuk ini, kita dibawa ke layar keranjang kita. Untuk itu tentu saja, kita harus menambahkan beberapa logika atau keluaran ke layar keranjang.
Jadi di dalam layar keranjang, kami tentu saja
memiliki komponen Bereaksi normal, jadi
kami mengimpor Bereaksi dari Bereaksi, kami juga mengimpor sesuatu dari Bereaksi Asli dan bahwa sesuatu adalah komponen tampilan untuk membungkus layar
kami mungkin, kami mungkin akan menampilkan beberapa teks demikian juga.
Kami akan memiliki beberapa item keranjang yang terdaftar di sana yang dapat kami
lakukan dengan daftar datar untuk memiliki optimasi bawaan, mungkin ingin menata beberapa hal dengan
stylesheet dan saya juga akan mengimpor komponen tombol bawaan. Sekarang layar kereta saya di sini seperti biasa adalah komponen Bereaksi dan saya akan
mengatur objek gaya ini di sini dengan Stylesheet. buat sehingga kami dapat menata komponen ini juga
dan pada akhirnya, kami mengekspor layar keranjang kami di sini sebagai default.
Sekarang Anda tentu saja dapat membangun layar kereta ini dengan cara apa pun yang Anda inginkan, saya akan
membuatnya sedemikian rupa sehingga kami memiliki pandangan dan dalam pandangan itu, saya ingin memiliki dua bagian utama. Bagian paling atas adalah seperti ringkasan tempat saya
melihat jumlah total dan di mana saya memiliki tombol pesanan sekarang.
Ini akan berada dalam satu baris, jadi saya akan memiliki tampilan bersarang di sini di mana saya dapat memposisikan item
di samping satu sama lain di mana saya memiliki seperti teks di
mana saya mengatakan total dan kemudian di sini tanda dolar dan kemudian harga total saya mungkin. Kami juga dapat membuat sarang ini, Anda dapat
memiliki komponen teks bersarang jika Anda ingat tanpa masalah untuk memberikan warna yang terpisah misalnya, jadi untuk
sekarang saya hardcode 19. 99 di sana tetapi nanti ini akan diturunkan secara dinamis.
Jadi itu
satu hal dan sebagai tambahan di baris yang sama di sini, saya ingin memiliki tombol dengan judul
pesanan sekarang di mana saya dapat menekannya untuk melakukan pemesanan, membersihkan keranjang saya dan menambahkan
ini ke pesanan saya yang
belum kami kelola dan output pada layar urutan pada akhirnya. Sekarang di bawah bagian ringkasan ini, saya ingin memiliki daftar datar dengan item keranjang terpisah saya, sehingga kita dapat
benar-benar melihat apa yang ada di
keranjang, produk mana yang ada di sana, berapa banyak setiap produk di sana, jadi
itu hal lain yang saya akan menampilkan di sana. Untuk saat ini di sini, saya hanya akan
menambahkan tampilan dengan teks item keranjang sebagai pengganti tetapi sekali lagi, ini akan menjadi daftar datar
di masa depan tetapi mari kita mulai dengan totalnya di sini. Untuk mendapatkan total itu, kita dapat memanfaatkan
Redux karena di sana kita mengelola keranjang kita, sehingga kita dapat menggunakan pemilih penggunaan dari React Redux ketika Anda belajar
untuk mendapatkan data dari toko kami dan di sini, saya memiliki jumlah total keranjang saya mungkin yang
saya dapatkan dengan bantuan pemilih penggunaan dari negara saya. gerobak, iris. kereta di sini karena
di app. File js dalam pengurang gabungan, saya menetapkan kunci keranjang di sini untuk peredam keranjang saya.
Jadi di sini saya punya. gerobak dan kemudian di sana,
di dalam peredam gerobak, saya mengelola jumlah total dan bidang jumlah total sehingga itulah yang perlu kita akses di sini, jumlah total.
Ini memberikan jumlah total keranjang dan sekarang kita dapat menggunakannya di sana dan dengan
itu untuk memastikan bahwa ini juga terlihat bagus, saatnya untuk beberapa gaya.
Jadi pada tampilan paling atas di sini, saya akan menambahkan gaya layar mungkin karena ini membungkus
seluruh layar
pada akhirnya, maka di sini pada tampilan itu, saya akan menambahkan gaya ringkasan karena
itu menampung semua item ringkasan, lalu di sini
pada teks ini, saya akan menambahkan gaya teks ringkasan dan kemudian di sini, saya akan menambahkan gaya jumlah, sehingga kita bisa gaya teks jumlah ini berbeda.
Jadi untuk style
yang ingin saya atur, mari kita pergi ke stylesheet dan menambahkan layar, ringkasan, teks ringkasan dan kemudian, apa yang saya beri nama?
jumlah dan tentu saja itu sepenuhnya terserah Anda bagaimana Anda sekarang ingin gaya ini.
Sekarang saya akan mulai dengan layar, pada akhirnya saya ingin mengambil ukuran layar penuh jika kita perlu dengan
daftar datar nanti tapi saya akan mulai dengan sederhana dan kami hanya akan mengatakan bahwa saya ingin memiliki margin dalam semua arah sebenarnya di
sini dari 20, jadi di sekitar segalanya, sehingga ada beberapa ruang di sekitar segalanya. Kemudian di sini, ringkasan yang merupakan kotak kami dengan semua
item di sana dengan pesanan sekarang dan teks kami harus menggunakan arah baris
yang fleksibel untuk memposisikan item dalam satu baris.
Saya pergi untuk menyelaraskan item di tengah untuk memastikan mereka terpusat secara vertikal dan pada poros
utama mereka, saya ingin menggunakan justifikasi ruang konten di antara sehingga item memiliki ruang kosong di antara mereka dan item adalah
teks ini di sini dan tombol ini. Selain itu, kita dapat menambahkan sedikit margin di sini,
mungkin juga dari
20 yang sebagian besar penting juga untuk memiliki jarak antara ringkasan dan daftar datar kami, oleh karena itu
saya akan benar-benar menggunakan margin bawah di sini untuk hanya memiliki beberapa margin ke bawah dan saya ingin menambahkan padding 10
di sini karena rangkumannya harus berupa dalam kotak yang ditinggikan dan untuk kotak ini
di sini, saya akan pergi ke komponen item produk saya dan saya akan menyalin bayangan saya mengatur di sini dan perbatasan radius mungkin saya miliki di sini dan warna
latar belakang, sehingga saya memiliki tampilan yang sama di sini di kereta dan itu tentu saja terserah Anda
apakah Anda menginginkannya atau tidak, tetapi saya akan menyalinnya di sana.
Untuk teks ringkasan, sekarang saya ingin menggunakan keluarga font open sans bold untuk benar-benar menyorot total ini dan ukuran font
18 dan untuk jumlah teks di sana, saya akan mengatur
warna ke warna. Aksen warna.
Sekarang untuk yang penting tentu saja, Anda perlu mengimpor warna dari folder konstanta dan kemudian saya menggunakan aksen
dan bukan yang utama agar benar-benar menonjol. Untuk melihat apakah itu tampak seperti yang kita inginkan,
kita perlu memastikan bahwa mengetuk tombol tajuk ini di layar gambaran umum produk kita benar-benar
membawa kita ke layar kereta dan untuk itu, diperlukan dua hal.
Pertama, kita perlu menavigasi di sini tetapi sebelum kita bisa melakukannya,
kita perlu mendaftarkan layar kereta di navigator kita. Jadi saya akan melakukan itu dulu, saya akan mengimpor layar kereta saya
di sini dari folder layar tidak mengejutkan, dari folder toko dan di sana dari layar kereta dan sekarang itu layar ketiga
saya tambahkan di sini ke navigator tumpukan ini, titik kereta di layar kereta . Dengan pengaturan yang ditambahkan di sini, kita dapat kembali ke layar
ikhtisar produk dan di sana, kita sekarang memerlukan formulir fungsional untuk opsi navigasi karena data nav kemudian memungkinkan
kita untuk memasuki prop navigasi dan navigasi panggilan, maka kita perlu membungkus
ini di objek lain yang kita kembali dan
kemudian di sini kita dapat memanggil navData. navigasi. navigasi dan di sana, saya pergi ke troli dan
ini tentu saja adalah pengidentifikasi yang baru saja saya pilih di toko navigator
di sini, yang ini. Dengan itu, mari kita lihat,
jika saya klik di sini, ini dia,
ini
adalah total saya,
saya benar-benar berpikir warna aksen tidak terlalu bagus di sana,
jadi saya akan benar-benar kembali ke layar kereta dan gaya ini untuk menggunakan warna primer juga tetapi yang
utama adalah kita bisa pergi ke sana dan jika sekarang saya mencoba menambahkan item ke troli, saya menambahkan baju
dua kali dan karpet sekali, jumlah total terlihat bagus untuk saya. Mari kita coba juga ini di Android tentu saja untuk memastikan
itu bekerja di sana juga dan umumnya berfungsi, saya menambahkan satu lagi kaos merah dan karena itu di sini
kita juga melihat masalah dengan cara ini ditampilkan. Untuk memperbaikinya, pada layar keranjang, pastikan bahwa pada harga, kami
selalu hanya menampilkan dua tempat desimal pada jumlah yang harus diperbaiki juga. Ngomong-ngomong jika Anda bertanya-tanya dari mana asalnya, angka
yang panjang ini, ini bukan
bug atau tidak ada yang benar-benar untuk Bereaksi Asli, ini adalah perilaku Javascript
normal ketika Anda bekerja dengan angka floating point dan tentu saja untuk memperbaiki tidak boleh dipanggil pada gaya
di sini tetapi pada jumlah total keranjang. Jadi ini adalah perilaku normal, bukan
bug, ini adalah bagaimana Javascript secara internal menyimpan angka floating point yang bisa Anda katakan, tetapi
sekarang kami memastikan bahwa ini adalah output yang benar dengan dua tempat desimal. Yang hilang adalah tombol dan di sini saya sekarang benar-benar ingin menggunakan warna, warna
aksen untuk memiliki tombol berwarna aksen saya. Jadi jika saya sekarang pergi ke troli saya di sini di iOS, ini adalah
bagaimana tombolnya terlihat di sana, ini sekarang terlihat seperti di Android.
Kami selalu dapat menekan ini, tentu saja saya ingin menonaktifkannya jika tidak ada dalam keranjang
dan untuk itu, kami sekarang perlu mendapatkan barang-barang keranjang kami juga. Jadi item keranjang juga bisa diambil dengan pemilih penggunaan, juga
dari irisan keranjang tapi di sana, itu adalah barang-barang yang menopang dari keranjang peredam yang kami tertarik.
Jadi jika saya melihat peredam gerobak, di sana Anda melihat kami memiliki properti item.
Ini adalah objek yang sedang saya
ambil sekarang, jadi item keranjang adalah objek, bukan array, sebenarnya array akan lebih baik untuk saya di sini dan karena itu saya akan menggunakan formulir
panjang untuk mendapatkan ini dan saya akan mengembalikan array di sini dan bukan objek. Jadi kita bisa mendapatkan item keranjang yang diubah
di sini, misalnya dengan membuat array baru di sini di dalam fungsi pemilih ini dan kemudian kita bisa menambahkan loop for / in untuk
melewati semua kunci dalam keadaan. gerobak. item, jadi untuk mengulang
semua pasangan nilai kunci dalam objek item
keranjang yang kita miliki di sana dan saya ingin
menambahkan masing-masing sebagai item ke item keranjang yang diubah. Jadi di sana saya akan mendorong objek Javascript yang memiliki ID produk
katakanlah yang hanya kunci saya karena dalam objek item keranjang ID, ID produk disimpan sebagai kunci jika
Anda ingat,
jadi sekarang saya menambahkan ini ke properti ID produk dalam objek ini saya menambah array item keranjang berubah dan
selain itu, saya akan memiliki judul produk saya yang tentu saja keadaan. gerobak. item untuk kunci yang
diberikan. productTitle.
Jika Anda melihat model item keranjang Anda, Anda akan melihat di sana, judul produk dan harga produk adalah nama
properti yang menyimpan judul produk dan harga produk, jadi
itulah cara kami mengakses keduanya,
jadi saya akan melakukan hal yang sama di sini untuk harga produk dan sesudahnya, saya juga
perlu kuantitas yang menyatakan. gerobak. item untuk kunci yang diberikan. kuantitas dan tentu saja juga jumlah yang merupakan negara. gerobak. barang. kunci. jumlah, lagi pada dasarnya hanya apa yang kita miliki di sini di item keranjang
Jadi yang saya lakukan adalah mengatakan
saya sedang membuat item keranjang baru, bukan dengan model saya karena ini adalah
item keranjang dengan properti ID produk tambahan sehingga saya memilikinya di sini dan sekarang array item keranjang yang diubah ini yang
saya kembalikan setelah ini untuk loop, sehingga pemilih ini pada akhirnya mengembalikan array dan bukan objek, jadi item
keranjang sekarang adalah
array yang membuatnya lebih mudah bagi kita untuk menggunakannya dalam daftar datar dan juga memungkinkan kita untuk memeriksa di
sini di tombol pesanan sekarang apakah kita ingin menonaktifkannya dengan hanya memeriksa panjang array yang sekarang
kita miliki dalam item keranjang.
Jadi di sini di tombol,
kita dapat mengatur penonaktifan penonaktifan yang didukungnya untungnya, ini adalah komponen bawaan yang hanya memiliki penonaktifan penonaktifan dan di
sana saya dapat memeriksa apakah panjang item keranjang sama dengan nol, jika ya, maka saya tahu itu kosong dan kemudian memang saya ingin menonaktifkan tombol. Jadi dinonaktifkan menerima benar atau salah, secara default itu salah tetapi saya akan mengaturnya menjadi benar jika
panjang item keranjang adalah 0. Dan sekarang Anda melihat apakah saya
membuka layar keranjang, ini dinonaktifkan, jika saya menambahkan
produk dan saya pergi ke sana, itu diaktifkan dan tentu saja Anda juga dapat menggunakan warna berbeda untuk tombol pesanan sekarang jika Anda mau.
Sekarang dengan itu, kita selangkah lebih dekat ke
gerobak yang sudah jadi dan tentu saja tujuan berikutnya adalah untuk menghasilkan barang-barang gerobak.