Jadi mari kita beralih ke layar filter dan di sana sekarang, saya hanya punya konten
dummy saya, layar filter dan itu tentu saja bukan
yang saya inginkan di sana, sebaliknya di sana saya ingin memiliki beberapa teks di atas sebenarnya di mana saya mengatakan filter yang tersedia
/ Pembatasan atau sesuatu seperti ini di mana saya ingin menunjuk objek gaya tertentu dengan gaya,
sebut saja judulnya mungkin karena itu akan menjadi judul utama kami di sini dan di bawahnya, saya ingin memiliki filter yang
berbeda.
Sekarang seperti apa bentuk filter? Kami memerlukan beberapa sakelar, beberapa kotak centang, sesuatu seperti
ini yang memungkinkan kami menghidupkan dan mematikan filter dan label untuk itu.
Sekarang itu berarti bahwa mungkin suatu pandangan masuk akal untuk mengelompokkan label dan beralih
bersama dan memposisikan mereka
berdampingan mungkin dan saya akan memberikan pandangan gaya wadah filter, sesuatu seperti itu dan di sana, seperti yang saya katakan, saya ingin punya teks dengan label, misalnya say
glutenFree di sana dan di samping itu, sebuah saklar dan untungnya Bereaksi
Asli memiliki saklar bawaan, itu bernama saklar. Komponen sakelar membuat sakelar yang bagus
yang bisa kita gunakan, jadi di sini
kita tinggal menggunakan sakelar seperti ini dan merendernya di layar. Kita harus mengonfigurasi ini tetapi untuk memulai,
kita dapat menggunakannya seperti ini. Sekarang untuk beberapa gaya dasar, untuk judul dan wadah filter di
sini, mari
kita turun di sini, mari
kita tambahkan wadah dan judul filter di sini dan judulnya cukup mudah. Di sana, saya ingin apa yang
menggunakan font family open sans bold dan ukuran font 22, margin di semua arah 20 dan juga
mengatur perataan teks ke pusat ke pusat ini. Layar keseluruhan dengan cara seharusnya tidak memusatkan item pada sumbu utama
lagi, jadi pemusatan vertikal seharusnya tidak
lagi terjadi dan untuk itu,
kita dapat dengan mudah menyingkirkan pusat konten dan menyaring wadah di sisi lain harus memposisikan sakelar
dan teks di samping satu sama lain berturut-turut.
Jadi di sini kita dapat mengatur arah fleksibel ke baris, membenarkan konten mungkin dengan menambahkan ruang di sekitar dan menyelaraskan item pada sumbu
silang di tengah, sehingga terpusat secara vertikal. Sekarang mari kita lihat itu, jika kita menyimpan ini
dan kita pergi ke layar filter, inilah yang kita dapatkan. Di sini kami mendapat sakelar dan seperti yang Anda lihat sekarang
selalu melompat kembali, itu
adalah sesuatu yang akan kami urus dalam hitungan detik, tetapi secara umum, kami melihatnya dan di sini di filter untuk Android,
kami mendapat sakelar Android yang juga melompat kembali tetapi yang nyaman sudah prestyled untuk Android, jadi itu sebenarnya komponen
lain
yang dibangun ke dalam React Native yang memiliki tampilan default untuk Android. Jadi itu tidak terlalu
buruk.
Satu hal yang ingin saya ubah adalah untuk wadah filter, saya ingin menetapkan
lebar tetap katakanlah 80% dan benar-benar mengubahnya di sini untuk ruang di antara, bukan
ruang
di sekitar karena saya pikir itu terlihat sedikit lebih baik sekarang, ya pasti, juga di Android dan sekarang, kita dapat memastikan bahwa peralihan ini benar-benar berfungsi
dan itu tidak melompat kembali ketika kita memicunya. Untuk itu, Anda perlu tahu bahwa untuk sakelar, Anda harus
mengelola keadaannya secara manual dan itu sebenarnya bukan hal baru, dalam Bereaksi sering terjadi bahwa untuk komponen input ini,
Anda perlu menyimpan apa yang dimasukkan pengguna dan memasukkannya kembali ke dalam komponen untuk mencerminkan bahwa dalam UI
yang diperbarui dan kami
melakukan ini dengan manajemen negara.
Jadi kami mengimpor menggunakan negara kait dari Bereaksi sehingga kami dapat mengelola negara di sini
dalam komponen fungsional ini dan bahwa di sini, saya akan memiliki status gluten saya dan saya akan beri nama ini adalah GlutenFree dan menetapkan status penggunaan GlutenFree,
awalnya itu salah dan sekarang yang
beralih di sini,
Anda memiliki properti nilai, itu adalah properti yang dibangun ke dalam saklar bawaan di mana saya memberi makan di
isGlutenFree, jadi ini membutuhkan boolean yang menunjukkan apakah saklar itu dirender sebagai aktif atau tidak aktif, jadi jika
itu ditandai sebagai dicentang atau tidak dicentang saya harus mengatakan dan Anda memiliki properti onValueChange
yang mengambil fungsi yang menyala setiap
kali pengguna mengklik saklar itu. Fungsi ini di sini mendapatkan nilai
baru, jadi jika saklar berada dalam mode salah, dalam mode hapus centang, nilai baru akan benar dan sebaliknya tentu
saja dan kita dapat menggunakannya untuk memperbarui keadaan kita dan mengatur isGlutenFree ke nilai baru dan karena
kami juga memberi makan keadaan ini kembali, sekarang pergantian kami harus dapat diubah dan harus tetap dalam
mode yang diperbarui.
Jadi sekarang jika kita melihat ini, sekarang kita benar-benar dapat beralih dan beralih itu perbaikan.
Penataan tombol bukan yang saya inginkan, tetapi menggunakan beberapa warna default, tentu
saja saya ingin menggunakan warna yang saya gunakan di aplikasi sepanjang waktu
dan untuk itu, kita dapat mengimpor warna kita secara konstan,
jadi mengimpor warna dari konstanta / Warna dan sakelar memiliki properti lain yang membantu kita dengan gaya di sini, kita dapat menambahkan warna trek yang memungkinkan
kita untuk menyesuaikan warna untuk sakelar itu, sehingga warna latar belakang dan seterusnya serta warna
jejak mengambil objek sebagai objek. nilai, maka kami memiliki objek yang kami lewati di sini untuk pengikatan dinamis ini di mana Anda
dapat mengatur warna latar belakang untuk status salah, jadi jika tidak aktif, jika tidak dicentang dan di
sana saya baik-baik saja dengan default sebenarnya, ini terlihat bagus untuk saya tetapi Anda juga dapat
mengatur
satu untuk kasus nyata yang merupakan kasus yang diperiksa dan di
sana saya ingin menggunakan warna, warna primer dan tentu saja Anda dapat mengambil warna yang Anda inginkan.
Dan jika kita melakukan itu dan saya kembali ke filter, sekarang kita menggunakan warna kita sendiri di sini yang
tentu saja lebih sesuai dengan
sisa aplikasi ini dan jelas, ini juga akan bekerja di Android. Kita juga dapat mengatur warna jempol yang merupakan warna jempol ini
di sini yang berwarna hijau di sini di Android dan ini hanya membutuhkan string, string warna, jadi kode hex misalnya,
di sana kita juga dapat menunjuk pada warna warna primer dan jika kami melakukannya, di iOS, sekarang memiliki
warna ini dan sama
di Android.
Sekarang tentu saja di iOS, ini tidak benar-benar terlihat bagus,
di sana saya ingin mempertahankan default dan solusinya cukup sederhana,
kita kembali dapat menggunakan API platform lama yang baik, impor ini dan kemudian di sini
ketika menetapkan warna jempol , Saya memeriksa platform. os sama dengan Android, dalam hal ini saya ingin menggunakan warna utama untuk ibu
jari saya, kalau tidak saya akan mengatur ini ke string kosong yang berarti akan menggunakan default yang putih di iOS.
Dan dengan itu, di sini kita memiliki tampilan yang sama seperti sebelumnya yang saya suka di iOS
tetapi tentu saja, Anda juga
dapat menyesuaikan ini dengan kebutuhan Anda dan di Android, kami masih akan memiliki tampilan yang kami lihat sebelumnya, jika saya pergi ke filter
Layar di sini yang terlihat bagus di sana juga. Jadi itulah sakelar dan bagaimana kita dapat
menambahkannya, sekarang kita hanya perlu mengulanginya untuk semua sakelar kita yang lain
juga, jadi semua filter lain yang saya maksud. Jadi saya dapat menyalin pandangan itu dan menambahkannya
lagi untuk
bebas laktosa atau untuk vegan, tetapi jika Anda menemukan diri Anda menyalin dan menempel berulang kali
seperti yang kami coba lakukan di sini, itu selalu merupakan kasus yang baik untuk membuat komponen terpisah atau fungsi yang membuat kode
yang dapat digunakan kembali ini.
Dan di sini, sekali lagi saya akan membuat komponen terpisah dalam file yang sama karena saya benar-benar hanya menggunakannya
di
sana, sekali lagi Anda juga bisa mencari file terpisah jika Anda mau.
Saya akan menamakannya filter switch dan ini mendapat beberapa alat peraga
dan dalam komponen ini, pada akhirnya saya mengembalikan kode ini, kami menyiapkan untuk dengan tampilan dan teks dan
seterusnya
dan tentu saja sekarang teks harus dinamis. Di sana kita dapat mengatur ini untuk label alat
peraga dan sepenuhnya terserah Anda apa yang Anda pilih di sini karena Anda akan menjadi orang yang meneruskan
nilai alat peraga nanti dan tentu saja di sini, apa yang terjadi pada ValueChange dan apa yang kami sampaikan ke nilai juga berbeda.
Jadi di sini, ini harus berupa alat peraga misalnya atau nilai alat peraga atau apa pun yang ingin Anda gunakan dan di sini
untuk onValueChange, saya hanya akan menunjuk alat peraga. onChange misalnya tetapi sekali lagi semua nama alat
peraga ini tentu saja sepenuhnya terserah Anda karena Anda akan menjadi orang yang
menggunakan komponen itu dan kami benar-benar akan menggunakannya sekarang di sini, seperti ini, jadi komponen penutup sendiri, di mana kita sekarang dapat menetapkan label karena
saya mengharapkan label prop di sini, jika Anda menamainya secara berbeda,
Anda perlu memberi nama yang
berbeda di sini tentu saja dan label tentu saja adalahGlutenFree karena saya akan mengganti saklar ini di sini.
Maka kita harus lulus dalam keadaan karena saya menambahkan prop negara di sini untuk mengelola nilai saya, jika
Anda menamainya secara berbeda, Anda perlu menyebutkannya secara berbeda di sana
juga dan di sini saya akan menunjuk pada isGlutenFree,
pada kondisi saya dan onChange
needs harus disediakan karena di sini saya menggunakan prop onChange untuk mengikatnya ke onValueChange.
Jadi ini harus menunjuk pada suatu fungsi dan tentu saja di sini, saya hanya akan menjaga fungsi
ini di sini dan karena saya hanya menggunakan onChange di sini untuk meneruskannya ke onValueChange, kita mendapatkan argumen nilai baru di sini juga.
Sekarang kita dapat menyingkirkan tampilan ini di sana dan hanya menggunakan komponen sakelar filter kami dan sekarang
cukup ulangi yang tentu saja lebih mudah.
Jadi sekarang di sini kita juga dapat memiliki lactoseFree, vegan dan vegetarian dan kita perlu menambahkan
tiga status baru sekarang, jadi di sini izinkan saya mereplikasi ini, kita memiliki islactoseFree dan set isLactoseFree,
di sini kita memilikiVegan dan set isVegan
dan di sini kita memiliki isVegetarian
dan dan atur isVegetarian.
Sekarang kita hanya perlu memastikan bahwa kita menggunakan status di tempat yang tepat, jadi untuk sakelar filter
kedua di mana kita memiliki filter lactoseFree, saya meneruskan status isLactoseFree
dan saya memperbarui set isLactoseFree tentu saja. Untuk peralihan vegan, saya meneruskan
isVegan dan kami memperbaruinya dengan set isVegan dan untuk vegetarian, kami meneruskan isVegetarian dan
kami memperbarui set isVegetarian, seperti ini.
OK,
seharusnya begitu, jika kita sekarang menyimpan ini, kita harus memiliki layar filter dengan berbagai filter kita yang dapat kita
atur secara independen karena kita memiliki keadaan independen. Saya pikir akan menyenangkan jika ada
jarak antar baris ini, jadi mari kita terapkan ini. Pada wadah filter kami di sini, kami dapat menambahkan
margin vertikal misalkan 10 atau 50 mungkin, sedikit lebih dan ini harus memastikan bahwa kami memiliki beberapa spasi
di sana,
ya dan ini terlihat cukup bagus.