Sekarang kita memiliki dasar-dasar tentang navigasi ke bawah, bahwa kita dapat meneruskan data, mari
kita mundur dan fokus pada aplikasi yang sedang kita bangun yang tentu saja tidak terlihat bagus dan mari
kita fokus pada item kategori ini di sini di grid.
Kami dapat mengetuknya tetapi jelas
ini bukan aplikasi yang ingin Anda gunakan. Sekarang untuk membuatnya lebih dapat digunakan di layar kategori
di sini, saya akan benar-benar mengambil item ini di sini,
opacity yang dapat disentuh ini, jadi item grid ini dan meng-outsource ini ke dalam komponen yang terpisah, bukan
sesuatu yang harus Anda lakukan tetapi sesuatu yang mungkin ingin Anda pertimbangkan untuk dilakukan hanya untuk menjaga komponen Anda lebih ramping dan bersih.
Untuk itu di folder komponen, saya akan menambahkan CategoryGridTile. File js, nama tentu saja sepenuhnya terserah
Anda dan di sana, kita perlu mengimpor Bereaksi dari Bereaksi, kita tentu juga akan memerlukan beberapa
hal dari Bereaksi Asli untuk membangun komponen di sana, yaitu kita akan perlu opacity terjamah dari tentu saja, kita
akan memerlukan tampilan, kita akan membutuhkan teks dan kita akan memerlukan stylesheet sehingga kita juga dapat gaya ini
di sini dan sekarang kita dapat membuat komponen
kotak kategori kisi di sini yang menerima beberapa alat peraga. Kita akan memerlukan stylesheet di sini yang
akan saya simpan di konstan gaya dan tentu saja seperti biasa, kita dapat mengekspor
komponen dan di dalam fungsi komponen ini, saya akan mengembalikan kode jsx saya hanya memotong
layar kategori di sini . Jadi di sini, pengaturan opacity yang dapat disentuh, item kisi ini sudah diatur
tetapi kita harus mengubah beberapa hal. Di layar kategori misalnya, saya menyiapkan gaya item kotak di sini. Sekarang kita bisa meninggalkannya
di sini dan menyebarkannya ke kotak petak kami dan kemudian menggabungkannya di sana saat Anda mempelajarinya, tetapi
saya hanya akan mengatur semua gaya dalam komponen itu sendiri karena kami hanya akan
menggunakan petak kisi kategori di kisi pada layar kategori. Jadi saya akan menambahkan gaya item kotak di sini
ke stylesheet
dalam file ini, maka ini berfungsi lagi, penangan onPress belum berfungsi, kami akan segera memperbaikinya dan sekarang kami dapat
kembali ke layar kategori dan tentu saja, impor komponen kami. Jadi impor komponen kotak kisi kategori di
sana dari folder komponen dan
di sana, kisi kotak kategori dan sekarang cukup kembalikan di sini ketika kami membuat item baru.
Sekarang tentu saja seperti
ini tidak akan berfungsi, kita perlu meneruskan beberapa data ke kotak petak agar dapat berfungsi dengan benar di
sana dan kita juga perlu memastikan bahwa menekan ini tidak menavigasi kita. Sekarang untuk itu, saya akan memberikan data yang kita butuhkan di sana
yang merupakan judulnya, jadi itu itemData. barang. judul dan itu sekarang prop yang
dapat kita gunakan dalam ubin kotak kategori dan saya juga ingin meneruskan prop lain yang lulus dalam fungsi yang kemudian dapat kita
jalankan untuk menavigasi dan saya akan memberi nama ini pada Pilih tetapi Anda dapat memberi nama ini apa pun yang Anda inginkan dan di sana, saya
hanya ingin mengeksekusi kode yang saat ini saya jalankan di onPress. Jadi saya akan memotong ini dari sini dari kotak
kisi kategori, pindahkan ini kembali ke layar kategori, ke fungsi ini saya beralih ke onSelect
dan sekarang yang harus kita lakukan adalah memicu onSelect dari dalam kotak kategori
kisi, itu tentu saja pola normal Anda akan tahu dari Bereaksi. Jadi kembali ke ubin kisi kategori, onPress dapat dengan mudah menunjuk ke
props onSelect untuk memicu fungsi yang diteruskan pada prop onSelect.
Sekarang judul yang saya produksi di sini juga bisa menjadi alat peraga. judul karena kami mendapatkan prop
judul ini sebagai penyangga pada kotak kisi kategori kami, kami meneruskannya di sini.
Dengan itu, kami membagi komponen kami sedikit, tetapi tentu saja sekarang saya juga
ingin mengerjakan styling lebih banyak. Jadi kembali ke kotak kisi kategori, saya misalnya
ingin menggunakan warna yang saya siapkan karena setiap kategori mendapatkan warna yang disimpan
dalam properti warna di sini, jadi alangkah baiknya untuk menggunakannya. Oleh karena itu kami dapat meneruskan ubin kotak kategori juga, meneruskan warna di sini, tentu saja Anda
dapat memberi nama prop ini apa pun yang Anda inginkan pada item tersebut. properti warna dan
di sini, itu harus. warna karena kami menamai warna properti di sini dalam model dan sekarang
dalam ubin kotak kategori, kita bisa menggunakan warna itu untuk gaya ini di sini.
Jadi bagaimana kemudian gaya ini, bagaimana seharusnya ini terlihat? Dengan menambahkan gaya ke tampilan yang kami miliki di
dalam opacity yang dapat disentuh karena komponen opacity yang dapat disentuh itu sendiri tidak terlihat tetapi tampilan
tidak dan di sana, kami dapat mengirimkan objek dan mengatur warna latar belakang di
sini untuk alat peraga. warna.
Baiklah mari kita lihat bagaimana kelihatannya, jika kita menyimpannya dan kita menunggu ini untuk
memuat ulang, tidak terlihat terlalu buruk
tetapi terlalu kecil, itu harus mengisi seluruh item kisi dan bukan hanya baris dengan teks di sana.
Jadi untuk meningkatkan itu, saya akan benar-benar memiliki gaya inline di sini tapi saya akan menggabungkan ini bersama-sama menjadi objek di sekitarnya
dengan konfigurasi styling lain yang saya atur di stylesheet dan saya akan memberi nama wadah ini, Anda dapat menamainya apa
pun yang Anda inginkan,
gaya wadah, tarik semua pasangan kunci-nilai di sana
juga sehingga kita menggabungkan gaya ini di sini dan sekarang, wadah adalah objek stylesheet yang dapat kita tambahkan di
sana dan di sini, kita dapat mengatur satu fleksibel untuk memastikan bahwa setiap item mengisi semua
ruang yang didapat dan sekarang ini terlihat jauh lebih baik.
Sekarang saya masih belum 100% senang,
saya ingin menambahkan sedikit radius perbatasan di sini, katakanlah 10 memiliki beberapa sudut bulat dan
tentu saja, Anda dapat mengatur gaya yang Anda inginkan
di sini, Anda lebih suka, saya juga akan mengatur warna bayangan hitam dan bayangan opacity. 26 dan bayangan offset lebar 0, tinggi 2 dan radius bayangan 10 dan ketinggian
3, elevasi untuk Android jika Anda ingat karena properti bayangan ini hanya mempengaruhi iOS, sehingga kami mendapatkan sedikit
kartu tiga dimensi ini. lihat dan tentu saja seperti yang saya
sebutkan, Anda dapat gaya ini dengan cara apa pun yang Anda inginkan.
Sekarang sebagai tambahan, saya ingin memastikan bahwa teks ini di sini berada di sudut kanan bawah dan
tentu saja memiliki
sedikit lapisan di sekitarnya, sedikit jarak di sekitarnya. Jadi saya akan menambahkan sedikit padding di sini,
katakanlah 10 dan sekarang atur konten untuk flex-end, arah flex dalam wadah tentu saja atas ke bawah karena itu kolom, jadi
ujung fleksibel akan memindahkan ini ke bawah sini dan sekarang juga untuk memindahkannya ke kanan
pada sumbu horizontal, saya mengatur menyelaraskan
item ke ujung juga dan ini bergerak ke ujung sumbu silang yang dibiarkan ke kanan
dalam tampilan normal di mana Anda tidak ubah arah fleks. Dengan itu, kita mendapatkan tampilan yang menurut saya lebih
baik, tetapi tentu saja, teks di sini, gaya teks juga dapat berubah dan sedikit lebih padding mungkin terlihat
bagus, mungkin 15
tetapi tentu saja kita dapat bereksperimen dengan itu dan juga satu catatan penting, dalam aplikasi ini
saya tidak akan fokus membangun pengalaman yang benar-benar responsif di sini, saya
akan mencoba untuk membuat ini singkat dan ringkas karena fokus utama dari modul ini tentu saja adalah
navigasi, maka saya tidak akan mengoptimalkan ini untuk semua layar dan platform yang memungkinkan.
Ini adalah sesuatu yang tentu saja dapat Anda lakukan sebagai
latihan, saya tidak akan melakukan hal yang tidak perlu untuk mengasapi modul ini, jadi saya hanya akan mengatur beberapa gaya yang
terlihat bagus pada emulator ini.
Yang sedang berkata, sedikit lebih padding mungkin masuk akal dan saya juga ingin gaya
judul di sini, maka saya akan menambahkan
katakanlah gaya
judul di sini, mengatur di stylesheet,
mari kita tambahkan di sana-sini, saya ingin menggunakan keluarga font saya, buka tanpa huruf tebal yang
bisa saya gunakan tentu saja karena saya mendaftar di sini di app. js, jadi buka sans bold ditambahkan sekarang di sini dan mungkin juga mengubah ukuran
font sedikit menjadi 22. Kami menyimpan ini,
ini terlihat cukup baik.
Sekarang ada satu hal terakhir yang ingin saya
lakukan pada ubin kotak kategori saya, pada teks di sini, saya akan mengatur jumlah baris menjadi 2 sehingga setiap teks yang akan lebih panjang
dari itu sebenarnya hanya akan terpotong yang menurut saya terlihat sedikit lebih baik. Dan yang tak kalah pentingnya, Anda mungkin memperhatikan bahwa
pada Android untuk cahaya dan indah, ini ada di sebelah kiri di sini karena dipecah
menjadi dua baris, untuk memastikan bahwa ini juga di sebelah kanan,
pada judul di sini, saya akan mengatur luruskan teks ke kanan untuk memaksa ini berada di sebelah kanan.
Jadi mari kita tunggu itu untuk
memuat ulang dan sekarang itu terlihat seperti seharusnya.
Nah, itu tidak terlalu buruk di
sini, sekarang Anda mungkin memperhatikan bahwa efeknya terlihat agak aneh jika saya mengetuk item di sini,
kita mendapatkan perbatasan ekstra aneh di sekitarnya.
Sekarang satu hal yang masih akan saya lakukan di sini yang benar-benar opsional tetapi tetap, saya akan menambahkannya di sini, saya akan
menambahkan platform API dan juga menambahkan umpan balik asli yang dapat disentuh untuk benar-benar menggunakan efek riak alih-alih opacity yang dapat
disentuh jika didukung.
Jadi di sini, saya akan memiliki komponen yang dapat disentuh saya yang secara default
adalah opacity terjamah tetapi jika platform. os sama dengan Android dan seperti yang Anda pelajari sebelumnya dalam kursus, versinya lebih besar atau
sama dengan 21, maka kita tahu bahwa umpan balik asli yang disentuh didukung, jadi saya akan
mengatur komponen yang dapat disentuh sama dengan umpan balik asli yang dapat disentuh, seperti ini.
Gunakan komponen yang dapat disentuh di sini alih-alih opacity yang dapat
disentuh dan dengan itu, kita harus memiliki
efek riak yang bagus pada
Android, di iOS kita memiliki efek opacity yang kita inginkan dan di
Android, kita sekarang memiliki efek riak tetapi gaya tidak aktif sekarang.
Namun ini adalah sesuatu yang dapat kita perbaiki dengan menambahkan tampilan tambahan di sekitar ini yang menerima gaya item grid
kita daripada komponen yang dapat disentuh di sini dan dengan
itu, kita hanya perlu menambahkan satu properti style tambahan pada komponen yang dapat disentuh dan mengatur
flex.
Saya melakukannya dengan gaya inline
di sini cepat dan kotor, Anda bisa menambahkan gaya terpisah di stylesheet. Dengan itu terlihat dan terasa sama di
iOS dan
sekarang juga di Android, efek riak ada di sana.
Sekarang ini tidak menggunakan sudut bulat kami, melainkan membuat persegi atau persegi panjang dan Anda juga belajar sebelumnya
bagaimana cara memperbaikinya. Untuk memperbaikinya, yang
harus kita lakukan adalah pada item grid, kita tambahkan radius batas 10
dan kemudian kita benar-benar menambahkan overflow disembunyikan untuk memastikan bahwa item anak tidak dapat dirender di luar
tampilan pembungkus
yang berarti bahwa riak efeknya tidak bisa keluar dari kotak bulat itu
Sekarang kita memiliki tampilan itu dan itu satu penyesuaian yang ingin saya buat di sini untuk platform yang berbeda
dan dengan itu, itu tidak terlihat terlalu buruk, saya akan mengatakan.
Sekarang tentu saja, Anda dapat mengubah tampilan itu, Anda dapat mengubah ukuran font dan sebagainya, membuatnya terlihat
sangat bagus di perangkat yang Anda uji.
Saya senang dengan tampilan ini dan sekarang saatnya untuk membuat beberapa resep ketika kami
memilih kategori di sini.