Jadi saya akan pergi ke layar ikhtisar produk karena sebelum saya menambahkan navigator,
saya ingin setidaknya dapat melihat
sesuatu pada layar itu dan karena itu di sini, kita sekarang perlu mengimpor pemilih penggunaan dari React Redux karena itu akan memungkinkan kita
untuk masuk ke toko Redux dan dapatkan produk kami dari sana.
Jadi di sini pada akhirnya apa yang bisa kita lakukan adalah kita bisa mendapatkan produk kita dan menyimpannya
dalam produk yang konstan dengan memanggil
selektor penggunaan dan seperti yang Anda pelajari dalam modul sebelumnya tentang manajemen negara di Redux, selektor penggunaan
mengambil fungsi yang secara otomatis menerima status , negara Redux sebagai input dan yang kemudian mengembalikan data apa pun yang ingin
Anda dapatkan dari
sana dan di negara
Redux, saya ingin memanfaatkan potongan produk saya dan Anda harus menggunakan nama yang Anda gunakan di sini dalam reduksi
gabungan untuk mendapatkan ini menyatakan, data dikelola dengan produk untuk pengguna.
Jadi di sini saya akan mengatakan produk negara dan sekarang dalam potongan negara kita, saya ingin mendapatkan produk yang
tersedia, jadi mari kita dapatkan. produk yang tersedia di sini dan
ini adalah sintaks fungsi panah pendek ini di mana bagian di sebelah kanan panah
secara otomatis dikembalikan.
Jadi itulah yang sekarang disimpan dalam produk dan oleh karena itu di sini pada
daftar datar, kita tentu saja dapat mengatur prop data sama dengan produk kami di sini yang kami pilih karena itu
akan menjadi array dan itulah yang dibutuhkan data.
Saya juga akan menambahkan ekstraktor utama di sini, tergantung pada versi Bereaksi Asli yang Anda gunakan, Anda
tidak akan memerlukan ini karena setiap produk di aplikasi kami memiliki ID dan versi daftar datar yang lebih baru juga mencari ID dan bukan
hanya untuk kunci tetapi jika Anda bekerja dengan versi yang lebih lama, maka Anda perlu mengatur fungsi ekstraktor kunci ini dan ini mengambil
fungsi yang memberi Anda item yang dilihatnya
dan Anda perlu memberi tahu apa yang harus menjadi kunci unik Anda pada itu item
dan tentu saja itu item. id, sekali lagi,
versi asli dari Bereaksi Asli tidak memerlukan itu. Sekarang dengan itu, kita juga perlu menyediakan prop
item render yang menunjuk pada fungsi yang membuat item daftar yang berbeda dan di sini, saya akan mulai
sederhana dan kami akan memperbaikinya nanti dan untuk saat ini, saya hanya akan mengimpor komponen teks dari
Bereaksi Asli dan output judul produk dalam komponen teks.
Jadi di sini, kita mendapatkan data item kita dan nilai balik fungsi yang harus kita berikan
untuk membuat item harus mengembalikan
elemen jsx pada akhirnya.
Jadi di sini saya akan mengembalikan elemen teks dan di sana, output itemData. barang. judul dan saya bisa melakukan ini karena
data barang diterima oleh React Native, ini memiliki item prop, itu juga sesuatu yang React Native memberi Anda
dan setiap item di sini tentu saja hanya satu item dalam produk kami, jadi
karena itu dari jenis ini data dan oleh karena itu memiliki prop judul karena tentu saja itulah yang
saya tetapkan di
sini, jadi kami akan memiliki prop judul di sini yang dapat saya hasilkan dan tentu saja, ini
bukan bentuk akhir dari bagaimana sebuah produk seharusnya terlihat seperti di daftar tapi itu yang
saya gunakan untuk memulai sehingga kita melihat sesuatu di layar. Dengan itu, berbicara tentang layar, tentu saja saatnya untuk mengatur
navigator sehingga kita benar-benar dapat melihat sesuatu di layar dan kita memiliki layar.
Karenanya di sini di folder navigasi, saya akan menambahkan ShopNavigator saya. File js dan di sana, kita akan menambahkan
banyak navigasi di seluruh modul ini, jadi kita pasti perlu mengimpor dari Navigasi Bereaksi dan saya tentu saja akan
mulai sederhana dengan navigator tumpukan normal yang dapat kita buat dengan bantuan buat fungsi navigator
tumpukan dan kemudian kita akan membuatnya di sini dan saya akan menamainya navigator produk, itulah
yang saya simpan di
sini, hasil
membuat stack navigator dan hasilnya adalah komponen Bereaksi jika Anda ingat dan jika
Anda juga ingat , buat stack navigator mengambil objek Javascript sebagai argumen pertama di mana kita
memetakan pengidentifikasi layar untuk Bereaksi komponen yang harus dimuat sebagai layar.
Jadi di sini tentu saja saya akan mulai dengan layar ikhtisar produk dan saya mengimpornya dari folder layar
dan di sana dari bagian toko dan di sana dari file layar ikhtisar produk dan oleh karena itu hal pertama
yang saya ingin petakan dalam navigator
tumpukan ini adalah produk tinjauan umum atau bagaimana pun Anda ingin memberi nama ini, yang dipetakan ke layar tinjauan
umum produk.
Sekarang tentu saja untuk navigator stack ini yang pada akhirnya akan memiliki beberapa layar, saya juga akan memberikan argumen
kedua untuk membuat stack navigator yang merupakan objek yang memungkinkan kita untuk mengkonfigurasi seluruh navigator
dan di sana kita dapat misalnya mengatur opsi navigasi default untuk setiap layar dan di
sana, saya ingin mengatur warna latar belakang header saya dan sebagainya.
Jadi di sini saya akan mengatur objek Javascript di mana saya dapat mengatur gaya header ke objek Javascript lain di mana kita dapat
mengatur warna latar belakang ke warna pilihan Anda dan di situlah folder konstanta akan
ikut bermain, di mana saya akan menambahkan sebuah warna. file js, di mana saya hanya ingin mengekspor objek Javascript
default dengan warna primer dan warna aksen dan Anda dapat memberi nama tombol ini apa pun yang Anda inginkan dan sekarang saya memilih
beberapa warna yang bagus yang ingin
saya gunakan di sini tetapi Anda dapat menggunakan warna apa saja yang Anda inginkan ingin.
Warna utama saya akan memiliki kita kode hex # c2185b dan warna aksen memiliki
kode hex # ffc107.
Sekarang karena itu kembali di navigator toko, kita dapat mengimpor dari folder konstanta itu, masih dari warna yang
kita temukan di folder konstanta seperti ini dan kemudian di sini, warna latar yang akan saya atur untuk gaya
header di sini adalah warna. utama.
Sekarang dengan yang ditambahkan, saya juga
akan menambahkan warna tajuk warna yang mewarnai teks judul misalnya dan saya akan mengatur ini menjadi
putih karena warna primer yang saya atur ini seperti warna merah muda-kemerahan yang cukup kuat dan oleh karena
itu putih warna yang harus kita gunakan sehingga mudah dibaca dan saya benar-benar ingin berbeda tentang bagaimana
tampilan header berdasarkan pada platform yang kita jalankan.
Jadi sudah waktunya untuk mengimpor platform dari React Native dan satu catatan di sini, dalam aplikasi praktik ini, saya
sebenarnya tidak akan terlalu fokus pada perbedaan platform dan desain responsif, saya akan melakukannya
hingga batas tertentu sehingga ada beberapa perbedaan mendasar antara platform yang berbeda dan bahwa
aplikasi terlihat bagus pada ukuran perangkat yang
berbeda tetapi saya tidak akan mengujinya pada berbagai ukuran perangkat.
Anda telah mempelajari semua yang Anda butuhkan untuk menjadikannya sebagai responsif mungkin, jadi
pasti merasa bebas untuk selalu men-tweak ini lebih dari yang saya lakukan di sini di modul ini.
Pada akhirnya saya hanya ingin memastikan bahwa modul ini tidak memakan waktu ratusan jam, jadi
karena itu saya akan menjaga ini seminimal mungkin.
Dengan set itu, platform di sini nampaknya penting bagi saya karena saya benar-benar ingin
memiliki tampilan berbeda pada header berdasarkan apakah kita menjalankan iOS atau Android.
Jadi warna latar sebenarnya bukan selalu warna utama tetapi sebagai gantinya saya hanya akan mengatur ini
jika sistem operasi yang kita jalankan adalah Android, kalau
tidak saya akan mengatur warna latar belakang ke string kosong yang berarti default akan diambil
dan oleh karena
itu untuk warna nada tajuk,
ini juga seharusnya hanya putih jika kita menggunakan Android, kalau tidak saya tidak akan mengaturnya ke string kosong tetapi sebaliknya,
saya ingin menggunakan warna primer sebagai warna teks
pada iOS, jadi jika kami tidak di Android. Dengan itu, navigator produk sudah diatur.
Sekarang seperti yang Anda pelajari di modul navigasi, Anda tidak mengekspor navigator ini,
sebaliknya Anda membungkusnya dalam wadah aplikasi yang Anda buat dengan fungsi membuat wadah aplikasi yang
Anda dapatkan dari Bereaksi navigasi.
Jadi di sini kita sekarang dapat mengekspor default membuat wadah aplikasi dan mengirimkan navigator produk, seperti ini.
Ini sekarang navigasi ekspor yang diatur dan inilah yang sekarang dapat
kita gunakan di aplikasi. js.
Jadi dalam aplikasi. js, kita sekarang dapat mengimpor navigator toko kami
dari navigasi, navigator toko dan itulah yang sekarang saya gunakan di dalam tag penyedia saya di
sini, jadi navigator toko seperti ini. Ini juga berarti bahwa kita dapat menghilangkan impor Bereaksi Asli
ini karena kita tidak menggunakan komponen Bereaksi Asli ini dalam komponen ini lagi. Dengan semua pekerjaan itu, kita sekarang
seharusnya dapat benar-benar menjalankan aplikasi kita dan mudah-mudahan, mendarat di layar ikhtisar produk tempat
kita melihat daftar judul produk yang tidak dilacak yang mendasar.
Jadi jika saya menyimpannya sekarang, simpan semua perubahan ini dan Anda memastikan bahwa Anda memiliki
npm mulai berjalan dan Anda memiliki emulator
dan berjalan di mana Anda memuat ini, saya mendapatkan kesalahan bahwa objek bukan konstruktor, mengevaluasi standar produk baru.
Masalahnya adalah bahwa dalam folder model saya di sini, saya lupa untuk mengekspor kelas produk saya sebagai default.
Itu tentu saja perlu ditambahkan di
sini, jika tidak Anda tidak dapat mengimpor dari
file ini, masuk akal.
Jadi sekarang ini berfungsi dan sekarang
memang di sini, saya melihat judul produk saya.
Kami juga melihat tajuk yang berbeda,
yang tidak kami lihat adalah tajuk karena saya belum menambahkannya. Karenanya di layar ikhtisar produk, tentu
saja kita dapat menambahkan opsi navigasi khusus layar saja yang akan digabungkan dengan opsi navigasi
default yang kita atur langsung pada navigator dengan menggunakan layar ikhtisar produk, konstanta kita di sini
yang memegang komponen kita dan menambahkan properti opsi navigasi dan di sini kita
dapat menggunakan opsi navigasi statis untuk saat ini, menambahkan judul header dan mengatur ini untuk semua produk misalnya dan
jika kita sekarang
menyimpan ini, kita melihat semua produk di sini di header.
Jadi sekarang ini benar-benar terlihat layak, kita dapat melihat produk kami.
Tentu saja produk-produk ini tidak benar-benar terlihat seperti seharusnya, jadi
langkah selanjutnya adalah memastikan bahwa di sini kita benar-benar mendapatkan tampilan yang kita butuhkan dalam aplikasi ini.