Mari kita bekerja pada layar pesanan sebelum kita menambahkan navigasi, kita tidak
perlu menyelesaikannya tetapi saya ingin dapat melihatnya.
Jadi di sana, saya mengimpor React dari React sehingga saya dapat membangun komponen React yang valid, mengimpor sesuatu dari
React Native seperti biasa dan sesuatu juga sudah biasa kita gunakan, kan?
Tidak pernah mengejutkan.
Kami akan
memerlukan tampilan, kami mungkin perlu daftar datar karena kami akan memiliki beberapa pesanan berpotensi, jumlah yang tak
terbatas dan saya ingin dapat membuat itu dan dengan itu di sini, kami dapat membangun layar pesanan kami seperti ini.
Saya juga akan mengekspor ini dan penataan gaya seharusnya tidak diperlukan di sini, sebenarnya kita bahkan tidak perlu melihat di sini
karena saya hanya ingin menampilkan daftar pesanan saya. Jadi tentu saja data yang kita butuhkan di sini
akan berasal dari Redux, jadi
kita harus mengimpor pemilih penggunaan dari React Redux yang memungkinkan kita untuk memasuki toko Redux.
Jadi di sini, kita bisa mendapatkan pesanan kami dengan menggunakan selector penggunaan dan gunakan selector sekarang poin di negara. pesanan dan tentu saja adalah pengidentifikasi saya ditugaskan di
sini dalam pesanan reduksi gabungan di sini, ini memberi kita akses ke irisan negara yang
dikelola oleh peredam pesanan dan di sana,
kami memiliki properti pesanan lain yang menyimpan berbagai pesanan sebenarnya.
Jadi di sini saya perlu mengakses negara. pesanan. pesanan pada akhirnya,
yang memberi saya pesanan saya yang disimpan di Redux.
Sekarang di sini, kita hanya perlu mengembalikan daftar datar kita dan ini menerima pesanan
yang harus berupa array dan sebagai data. Sekarang ekstraktor kunci tidak diperlukan dalam versi React Native yang lebih baru karena
setiap pesanan jika Anda melihat model memiliki ID dan versi React yang lebih baru harus
mencarinya tetapi agar aman, saya akan menambahkannya di sini dan membuat item sekarang tentu saja harus memiliki fungsi yang menerima data item dan pada akhirnya
mengembalikan apa pun yang ingin kami render per pesanan. Sekarang item pesanan akan lebih kompleks di masa depan, untuk saat
ini
saya hanya akan menampilkan beberapa teks, lagi sehingga kita dengan cepat memiliki sesuatu di layar yang dapat
kita lihat sebelum kita memperbaiki ini.
Teks di sini untuk item yang diberikan bisa jadi dan
sekarang mari kita lihat urutannya, di sana kita memiliki ID, kita memiliki item yang
merupakan
daftar lain, jadi hal termudah untuk menghasilkan adalah jumlah. Jadi di sini saya hanya akan menampilkan jumlah total
properti yang pesanan saya miliki di sini.
Inilah yang saya tampilkan
dalam daftar datar, sekarang kami memiliki
layar pesanan dasar, tentu saja kami sekarang harus dapat mencapainya. Jadi mari kita pergi ke navigator toko dan
mengimpor layar pesanan di sini, layar pesanan dari folder layar, dari layar pesanan toko dan sekarang di sini yang penting adalah
saya tidak ingin menambahkannya ke navigator tumpukan ini karena ini bukan bagian dari ini stack,
sebagai
gantinya saya ingin mencapainya dengan menu, dengan menu samping.
Jadi kita perlu membangun navigator laci.
Tentu saja Anda juga dapat bekerja dengan tab jika Anda suka ini, tetapi saya ingin bekerja dengan laci
di sini, jadi kami membutuhkan navigator laci itu.
Sekarang layar pesanan, meskipun itu akan menjadi satu-satunya item, itu harus di tumpukan sendiri
sehingga kami juga memiliki header di sana.
Oleh karena itu, saya akan membuat navigator pesanan baru di sini di mana saya membuat navigator tumpukan lain dan di sana, satu-satunya pemetaan yang saya butuhkan adalah pesanan yang
menunjuk pada layar pesanan, argumen kedua di sini masih harus mengatur beberapa opsi navigasi default dan saya akan menggunakan opsi yang
sama seperti yang saya lakukan di sini, maka saya akan
benar-benar mengambil objek ini, hentikan itu dari sini dan simpan dalam konstanta terpisah, opsi nav default, seperti
ini, ini adalah pola saya
juga sudah digunakan dalam modul navigasi karena sekarang kita dapat menggunakan konstanta ini
di sini di navigator produk untuk opsi navigasi default dan juga di sini di navigator pesanan.
Sekarang tentu saja tujuannya adalah untuk membuat navigator laci yang akan saya beri nama navigator toko secara keseluruhan
karena menggabungkan berbagai fitur toko
yang bisa Anda katakan dengan bantuan membuat laci navigator. Di sana saya sekarang ingin menggabungkan
dua tumpukan ini, navigator produk dan navigator pesanan
ke dalamnya, jadi di sini kita membutuhkan produk dengan navigator produk dan pesanan yang menunjuk
pada navigator pesanan, sehingga pada navigator tumpukan ini. Saya juga ingin mengkonfigurasi opsi konten saya di
sana di laci, ini memungkinkan saya untuk misalnya mengatur warna warna item ketika mereka dipilih
dan di sana saya ingin mengatur warna warna aktif ke Warna. primer sehingga diwarnai dengan warna primer jika dipilih.
Sekarang navigator toko yang harus dikembalikan ke sini. Ini saja tidak akan berhasil tetapi ini adalah langkah
pertama, sekarang
sebelum kita menambahkan tombol menu, mari kita pergi ke layar pesanan dan sebenarnya ada menambahkan judul, jadi saya akan menambahkan opsi navigasi
di sana, mengatur ini ke objek, saat ini kami
tidak memerlukan opsi dinamis
di sini karena saya hanya ingin mengatur judul tajuk untuk pesanan Anda dan sekarang saya memikirkannya, kami juga
harus
menambahkan ini di layar kereta
di mana saya belum melakukan ini. Di sana saya
juga ingin mengatur ini di layar keranjang, mengatur ini ke keranjang Anda.
Jadi ini sekarang di opsi navigasi layar kereta,
ini ada di layar perintah atau navigator ini sudah diatur. Dengan itu semua diatur, kita perlu menambahkan tombol
menu ini, ikon hamburger ini misalnya pada layar gambaran umum produk di mana saya ingin dapat membuka
laci dan pergi ke pesanan saya. Sekarang untuk menambahkannya di sana, mari kita
pergi ke opsi navigasi layar ikhtisar produk yang sudah dinamis yang
baik
dan kemudian selain menambahkan header tepat untuk ikon keranjang ini, mari kita tambahkan headerLeft dan headerLeft
harus menahan tombol header juga tentu saja tetapi ada , itu akan menjadi item menu saya, jadi saya akan menamainya seperti
itu dan di sana, saya ingin menggunakan menu md atau menu ios tergantung pada platform yang kita jalankan dan saya
ingin menavigasi tentu saja
di mana saja, alih-alih dengan navigasi menopang sini jadi untuk mengatakan, saya ingin memanggil toggle drawer yang akan
membuka laci samping. Sekarang pengaturan yang
sama dengan cara juga diperlukan di layar pesanan sehingga kita dapat meninggalkan layar itu.
Jadi sebenarnya di sini, kita akan memerlukan pengaturan dinamis dari opsi navigasi di mana kita
memiliki fungsi di sini di mana kita mengembalikan objek konfigurasi kita sehingga di sana, kita juga dapat menambahkan
headerLeft dengan tombol header, dengan menu kita yang mengganti laci yang bergantung pada data nav
di sini dan tentu saja untuk itu, kita perlu mengimpor tombol tajuk, tombol tajuk dan item, jadi pada layar ikhtisar
produk pada akhirnya, saya perlu mengimpor
hal-hal ini di sini, dua baris ini perlu ditambahkan ke layar pesanan juga.
Jadi di sana, izinkan
saya menambahkannya, menambahkan tombol tajuk dan impor item dari Bereaksi tombol tajuk navigasi dan
tombol tajuk impor dari komponen khusus kami. Sekarang dengan itu, jika kita menyimpan ini, kita harus memiliki
tombol menu di sini dan kita lakukan, itu membuka laci, kita dapat pergi ke pesanan dan saya mendapatkan kesalahan di sini karena
di layar pesanan, tentu saja saya menggunakan
platform API jadi kita harus mengimpornya di sana, mari
kita lakukan itu, mari kita tambahkan platform dan sekarang jika kita kembali, kita dapat pergi ke pesanan dan di sana kita juga dapat kembali dan hal yang sama terjadi di Android.
Sekarang dengan itu, kami menambahkan laci.
Ada satu hal yang ingin saya tambahkan ke
laci yang belum pernah saya lakukan sebelum saya terus mengerjakan daftar pesanan saya, kami belum mengeluarkan apa-apa karena
kami belum benar-benar menambahkan pesanan, kami belum menghubungkan ini Tombol pesan sekarang, kami tidak melihat apa pun
yang berubah jika kami menambahkan sesuatu ke keranjang, klik pesan sekarang sekali,
mengkliknya beberapa kali akan memberi Anda kesalahan sekarang dan kemudian kami melihat
pesanan itu di sini. Sekarang kita perlu menghapus keranjang,
itu hal lain yang perlu kita lakukan tetapi sebelum kita melakukannya, di laci, aku sebenarnya juga
ingin memiliki ikon di sebelah entri saya di sini dan menambahkan ikon ini sebenarnya sangat sederhana, ' t
melakukan ini dalam modul navigasi tetapi kami akan melakukannya sekarang. Untuk menambahkan ikon, Anda hanya perlu pergi ke layar
yang Anda navigasikan ke dalam laci
Anda dan dalam kasus kami, itu tentu saja dua navigator ini, jadi ini bukan layar
tetapi dua navigator ini dan pada navigator ini atau jika mereka layar , pada layar ini, Anda
dapat mengatur opsi navigasi dan dengan itu, maksud saya bukan opsi navigasi default yang Anda tetapkan untuk semua
layar navigator itu, tetapi Anda mengatur navigator ini jika digunakan di dalam navigator lain seperti halnya di sini.
Jadi kita dapat menambahkan
opsi navigasi di sini, sekali lagi ini tidak akan diterapkan
ke layar navigator ini tetapi sebaliknya, ini
akan mengkonfigurasi navigator ini jika itu layar navigator lain dan di sini perintah navigator adalah layar
navigator toko pada akhirnya. dan di sana dalam opsi navigasi ini, kita dapat menambahkan entri ikon laci yang dapat menjadi fungsi yang misalkan konfigurasi laci,
fungsi ini dipanggil untuk Anda oleh React navigation dan memberi Anda konfigurasi laci
ini yang paling penting memberitahu Anda misalnya apa warna warna Anda karena di sini Anda sekarang dapat
mengembalikan komponen, seperti komponen Ionik untuk membuat ikon. Untuk itu Anda hanya perlu memastikan bahwa Anda mengimpor
ionik dari @ expo
/ vektor-ikon, jadi Anda perlu menambahkan impor itu di file
navigator toko dan sekarang dengan itu ditambahkan, jika kita pergi ke sini, saya mengembalikan saya Ionicon, sekarang saya
bisa
mengkonfigurasinya karena saya selalu melakukan ini dan untuk itu lagi, kita bisa menggunakan platform API
yang sudah kita impor di sini, jika tidak, pastikan Anda melakukannya. Kita dapat menggunakannya untuk memeriksa sistem operasi dan jika itu sama
dengan Android, maka di sini saya akan membuat md
buat sebagai ikon, jika tidak iOS buat dan ini hanya satu ikon yang saya ambil sebelumnya.
Sekarang tentu saja, kita juga dapat mengkonfigurasi ukuran di sini dan saya akan menempel pada 23 lama saya yang baik dan
selain itu, mengatur warna jika Anda ingin dan sekarang tentu saja, yang seharusnya tidak menjadi
warna primer karena ikon ini akan selalu memiliki warna itu, sebaliknya warna ini harus ditetapkan oleh laci
yang merupakan hal yang tahu apakah item dipilih atau tidak dan yang akan mengubah warna dengan tepat.
Jadi di sini, Anda harus mengakses konfigurasi laci. TintColor dan ini memberi
tahu Anda warna apa yang seharusnya dimiliki saat ini dan warna warna ini akan berubah tergantung
pada apakah ini sedang dipilih atau tidak.
Nah, itu kasus untuk pesanan saya, permisi, ikon di
sini
harus menjadi daftar md dan daftar iOS, bukan buat. Jadi itu adalah pengaturan pesanan saya sekarang dengan ikon daftar dan tentu saja hal
yang sama dapat dilakukan di sini dengan menyalinnya di navigator produk dan di sana, saya ingin menggunakan keranjang md atau keranjang
iOS, jadi ikon keranjang ini lagi dan sekarang ini hampir siap digunakan. Namun satu hal yang perlu Anda lakukan adalah Anda
perlu mengimpor Bereaksi dari Bereaksi sekarang di file navigator ini karena sekarang
Anda menggunakan komponen dengan sintaks jsx itu. Seperti yang Anda ketahui,
jsx dikompilasi atau dikonversi menjadi Bereaksi. createElement pada akhirnya dan karena itu Anda perlu mengimpor Bereaksi untuk sintaks
ini untuk bekerja di sini.
Sekarang dengan itu jika Anda kembali, Anda memiliki ikon-ikon yang bagus di sini di sebelah item Anda
dan mereka juga diwarnai
dengan benar, juga di sini di Android tentu saja.
Jadi sekarang laci samping sudah selesai, kita juga bisa pergi ke layar pesanan dan kita bahkan bisa melihat pesanan
di sana.
Namun saat ini, keranjang tidak dihapus dan oleh karena itu jika Anda mengklik ini berkali-kali, Anda
benar-benar akan mendapat peringatan karena apa yang Anda lakukan adalah mengklik ini terlalu cepat dan karenanya Anda
membuat banyak pesanan dengan ID unik semu yang sama tempat kami pada akhirnya gunakan cap waktu saat ini, jika Anda
mengklik ini terlalu cepat beberapa kali
itu cap waktu yang sama, itu sebabnya peringatan ini datang dan saya ingin menghapus keranjang setelah melakukan pemesanan.
Jadi, mari kita pastikan kita menghapus keranjang setelah melakukan pemesanan dan tentu saja mari kita pastikan kita menghasilkan pesanan dengan
cara yang lebih baik daripada yang kita lakukan saat ini.