1 00:00:02,390 --> 00:00:08,060 Jadi mari kita beralih ke layar filter dan di sana sekarang, saya hanya punya konten 2 00:00:08,060 --> 00:00:11,420 dummy saya, layar filter dan itu tentu saja bukan 3 00:00:11,510 --> 00:00:20,060 yang saya inginkan di sana, sebaliknya di sana saya ingin memiliki beberapa teks di atas sebenarnya di mana saya mengatakan filter yang tersedia 4 00:00:20,060 --> 00:00:25,910 / Pembatasan atau sesuatu seperti ini di mana saya ingin menunjuk objek gaya tertentu dengan gaya, 5 00:00:25,910 --> 00:00:33,560 sebut saja judulnya mungkin karena itu akan menjadi judul utama kami di sini dan di bawahnya, saya ingin memiliki filter yang 6 00:00:33,560 --> 00:00:34,250 berbeda. 7 00:00:34,250 --> 00:00:41,180 Sekarang seperti apa bentuk filter? Kami memerlukan beberapa sakelar, beberapa kotak centang, sesuatu seperti 8 00:00:41,180 --> 00:00:45,210 ini yang memungkinkan kami menghidupkan dan mematikan filter dan label untuk itu. 9 00:00:45,230 --> 00:00:50,840 Sekarang itu berarti bahwa mungkin suatu pandangan masuk akal untuk mengelompokkan label dan beralih 10 00:00:50,840 --> 00:00:52,970 bersama dan memposisikan mereka 11 00:00:52,970 --> 00:01:04,560 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 12 00:01:04,560 --> 00:01:09,300 glutenFree di sana dan di samping itu, sebuah saklar dan untungnya Bereaksi 13 00:01:10,050 --> 00:01:16,080 Asli memiliki saklar bawaan, itu bernama saklar. Komponen sakelar membuat sakelar yang bagus 14 00:01:16,080 --> 00:01:19,140 yang bisa kita gunakan, jadi di sini 15 00:01:19,140 --> 00:01:28,180 kita tinggal menggunakan sakelar seperti ini dan merendernya di layar. Kita harus mengonfigurasi ini tetapi untuk memulai, 16 00:01:28,210 --> 00:01:36,520 kita dapat menggunakannya seperti ini. Sekarang untuk beberapa gaya dasar, untuk judul dan wadah filter di 17 00:01:36,520 --> 00:01:37,780 sini, mari 18 00:01:37,780 --> 00:01:39,490 kita turun di sini, mari 19 00:01:39,490 --> 00:01:48,040 kita tambahkan wadah dan judul filter di sini dan judulnya cukup mudah. Di sana, saya ingin apa yang 20 00:01:48,120 --> 00:01:58,410 menggunakan font family open sans bold dan ukuran font 22, margin di semua arah 20 dan juga 21 00:01:58,550 --> 00:02:08,580 mengatur perataan teks ke pusat ke pusat ini. Layar keseluruhan dengan cara seharusnya tidak memusatkan item pada sumbu utama 22 00:02:08,610 --> 00:02:11,530 lagi, jadi pemusatan vertikal seharusnya tidak 23 00:02:11,700 --> 00:02:14,330 lagi terjadi dan untuk itu, 24 00:02:14,460 --> 00:02:21,610 kita dapat dengan mudah menyingkirkan pusat konten dan menyaring wadah di sisi lain harus memposisikan sakelar 25 00:02:21,640 --> 00:02:24,970 dan teks di samping satu sama lain berturut-turut. 26 00:02:24,970 --> 00:02:34,060 Jadi di sini kita dapat mengatur arah fleksibel ke baris, membenarkan konten mungkin dengan menambahkan ruang di sekitar dan menyelaraskan item pada sumbu 27 00:02:34,060 --> 00:02:40,080 silang di tengah, sehingga terpusat secara vertikal. Sekarang mari kita lihat itu, jika kita menyimpan ini 28 00:02:40,080 --> 00:02:46,290 dan kita pergi ke layar filter, inilah yang kita dapatkan. Di sini kami mendapat sakelar dan seperti yang Anda lihat sekarang 29 00:02:46,290 --> 00:02:47,460 selalu melompat kembali, itu 30 00:02:47,460 --> 00:02:53,130 adalah sesuatu yang akan kami urus dalam hitungan detik, tetapi secara umum, kami melihatnya dan di sini di filter untuk Android, 31 00:02:53,130 --> 00:02:58,380 kami mendapat sakelar Android yang juga melompat kembali tetapi yang nyaman sudah prestyled untuk Android, jadi itu sebenarnya komponen 32 00:02:58,380 --> 00:02:58,920 lain 33 00:02:58,920 --> 00:03:05,300 yang dibangun ke dalam React Native yang memiliki tampilan default untuk Android. Jadi itu tidak terlalu 34 00:03:05,300 --> 00:03:07,240 buruk. 35 00:03:07,250 --> 00:03:13,070 Satu hal yang ingin saya ubah adalah untuk wadah filter, saya ingin menetapkan 36 00:03:13,070 --> 00:03:19,430 lebar tetap katakanlah 80% dan benar-benar mengubahnya di sini untuk ruang di antara, bukan 37 00:03:19,430 --> 00:03:20,480 ruang 38 00:03:20,480 --> 00:03:32,030 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 39 00:03:32,030 --> 00:03:39,440 dan itu tidak melompat kembali ketika kita memicunya. Untuk itu, Anda perlu tahu bahwa untuk sakelar, Anda harus 40 00:03:39,440 --> 00:03:46,130 mengelola keadaannya secara manual dan itu sebenarnya bukan hal baru, dalam Bereaksi sering terjadi bahwa untuk komponen input ini, 41 00:03:46,670 --> 00:03:53,120 Anda perlu menyimpan apa yang dimasukkan pengguna dan memasukkannya kembali ke dalam komponen untuk mencerminkan bahwa dalam UI 42 00:03:53,210 --> 00:03:54,790 yang diperbarui dan kami 43 00:03:55,130 --> 00:03:57,080 melakukan ini dengan manajemen negara. 44 00:03:57,100 --> 00:04:03,040 Jadi kami mengimpor menggunakan negara kait dari Bereaksi sehingga kami dapat mengelola negara di sini 45 00:04:03,290 --> 00:04:13,770 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, 46 00:04:14,660 --> 00:04:16,930 awalnya itu salah dan sekarang yang 47 00:04:17,150 --> 00:04:18,800 beralih di sini, 48 00:04:22,330 --> 00:04:29,650 Anda memiliki properti nilai, itu adalah properti yang dibangun ke dalam saklar bawaan di mana saya memberi makan di 49 00:04:29,650 --> 00:04:36,640 isGlutenFree, jadi ini membutuhkan boolean yang menunjukkan apakah saklar itu dirender sebagai aktif atau tidak aktif, jadi jika 50 00:04:36,640 --> 00:04:42,550 itu ditandai sebagai dicentang atau tidak dicentang saya harus mengatakan dan Anda memiliki properti onValueChange 51 00:04:42,550 --> 00:04:45,160 yang mengambil fungsi yang menyala setiap 52 00:04:45,160 --> 00:04:49,520 kali pengguna mengklik saklar itu. Fungsi ini di sini mendapatkan nilai 53 00:04:49,610 --> 00:04:56,480 baru, jadi jika saklar berada dalam mode salah, dalam mode hapus centang, nilai baru akan benar dan sebaliknya tentu 54 00:04:56,480 --> 00:05:02,750 saja dan kita dapat menggunakannya untuk memperbarui keadaan kita dan mengatur isGlutenFree ke nilai baru dan karena 55 00:05:03,110 --> 00:05:09,050 kami juga memberi makan keadaan ini kembali, sekarang pergantian kami harus dapat diubah dan harus tetap dalam 56 00:05:09,290 --> 00:05:10,800 mode yang diperbarui. 57 00:05:10,820 --> 00:05:17,430 Jadi sekarang jika kita melihat ini, sekarang kita benar-benar dapat beralih dan beralih itu perbaikan. 58 00:05:17,450 --> 00:05:21,800 Penataan tombol bukan yang saya inginkan, tetapi menggunakan beberapa warna default, tentu 59 00:05:21,800 --> 00:05:26,010 saja saya ingin menggunakan warna yang saya gunakan di aplikasi sepanjang waktu 60 00:05:26,180 --> 00:05:30,020 dan untuk itu, kita dapat mengimpor warna kita secara konstan, 61 00:05:30,020 --> 00:05:39,140 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 62 00:05:39,710 --> 00:05:45,130 kita untuk menyesuaikan warna untuk sakelar itu, sehingga warna latar belakang dan seterusnya serta warna 63 00:05:45,140 --> 00:05:52,910 jejak mengambil objek sebagai objek. nilai, maka kami memiliki objek yang kami lewati di sini untuk pengikatan dinamis ini di mana Anda 64 00:05:52,910 --> 00:05:59,030 dapat mengatur warna latar belakang untuk status salah, jadi jika tidak aktif, jika tidak dicentang dan di 65 00:05:59,030 --> 00:06:04,490 sana saya baik-baik saja dengan default sebenarnya, ini terlihat bagus untuk saya tetapi Anda juga dapat 66 00:06:04,490 --> 00:06:05,270 mengatur 67 00:06:05,660 --> 00:06:09,570 satu untuk kasus nyata yang merupakan kasus yang diperiksa dan di 68 00:06:09,740 --> 00:06:15,680 sana saya ingin menggunakan warna, warna primer dan tentu saja Anda dapat mengambil warna yang Anda inginkan. 69 00:06:15,680 --> 00:06:22,580 Dan jika kita melakukan itu dan saya kembali ke filter, sekarang kita menggunakan warna kita sendiri di sini yang 70 00:06:22,580 --> 00:06:24,740 tentu saja lebih sesuai dengan 71 00:06:24,740 --> 00:06:33,340 sisa aplikasi ini dan jelas, ini juga akan bekerja di Android. Kita juga dapat mengatur warna jempol yang merupakan warna jempol ini 72 00:06:33,340 --> 00:06:41,290 di sini yang berwarna hijau di sini di Android dan ini hanya membutuhkan string, string warna, jadi kode hex misalnya, 73 00:06:42,410 --> 00:06:49,530 di sana kita juga dapat menunjuk pada warna warna primer dan jika kami melakukannya, di iOS, sekarang memiliki 74 00:06:49,530 --> 00:06:51,270 warna ini dan sama 75 00:06:55,710 --> 00:06:56,820 di Android. 76 00:06:59,660 --> 00:07:03,420 Sekarang tentu saja di iOS, ini tidak benar-benar terlihat bagus, 77 00:07:03,420 --> 00:07:07,480 di sana saya ingin mempertahankan default dan solusinya cukup sederhana, 78 00:07:07,500 --> 00:07:13,620 kita kembali dapat menggunakan API platform lama yang baik, impor ini dan kemudian di sini 79 00:07:13,620 --> 00:07:21,000 ketika menetapkan warna jempol , Saya memeriksa platform. os sama dengan Android, dalam hal ini saya ingin menggunakan warna utama untuk ibu 80 00:07:21,480 --> 00:07:26,410 jari saya, kalau tidak saya akan mengatur ini ke string kosong yang berarti akan menggunakan default yang putih di iOS. 81 00:07:26,510 --> 00:07:31,650 Dan dengan itu, di sini kita memiliki tampilan yang sama seperti sebelumnya yang saya suka di iOS 82 00:07:31,650 --> 00:07:33,300 tetapi tentu saja, Anda juga 83 00:07:33,300 --> 00:07:40,140 dapat menyesuaikan ini dengan kebutuhan Anda dan di Android, kami masih akan memiliki tampilan yang kami lihat sebelumnya, jika saya pergi ke filter 84 00:07:40,140 --> 00:07:45,650 Layar di sini yang terlihat bagus di sana juga. Jadi itulah sakelar dan bagaimana kita dapat 85 00:07:45,950 --> 00:07:50,060 menambahkannya, sekarang kita hanya perlu mengulanginya untuk semua sakelar kita yang lain 86 00:07:50,120 --> 00:07:55,700 juga, jadi semua filter lain yang saya maksud. Jadi saya dapat menyalin pandangan itu dan menambahkannya 87 00:07:55,700 --> 00:07:56,430 lagi untuk 88 00:07:56,990 --> 00:08:01,960 bebas laktosa atau untuk vegan, tetapi jika Anda menemukan diri Anda menyalin dan menempel berulang kali 89 00:08:02,090 --> 00:08:08,900 seperti yang kami coba lakukan di sini, itu selalu merupakan kasus yang baik untuk membuat komponen terpisah atau fungsi yang membuat kode 90 00:08:08,900 --> 00:08:10,680 yang dapat digunakan kembali ini. 91 00:08:10,730 --> 00:08:15,590 Dan di sini, sekali lagi saya akan membuat komponen terpisah dalam file yang sama karena saya benar-benar hanya menggunakannya 92 00:08:15,590 --> 00:08:16,040 di 93 00:08:16,040 --> 00:08:19,150 sana, sekali lagi Anda juga bisa mencari file terpisah jika Anda mau. 94 00:08:19,390 --> 00:08:23,720 Saya akan menamakannya filter switch dan ini mendapat beberapa alat peraga 95 00:08:23,720 --> 00:08:30,820 dan dalam komponen ini, pada akhirnya saya mengembalikan kode ini, kami menyiapkan untuk dengan tampilan dan teks dan 96 00:08:30,820 --> 00:08:31,410 seterusnya 97 00:08:31,610 --> 00:08:37,100 dan tentu saja sekarang teks harus dinamis. Di sana kita dapat mengatur ini untuk label alat 98 00:08:37,100 --> 00:08:41,810 peraga dan sepenuhnya terserah Anda apa yang Anda pilih di sini karena Anda akan menjadi orang yang meneruskan 99 00:08:43,050 --> 00:08:48,930 nilai alat peraga nanti dan tentu saja di sini, apa yang terjadi pada ValueChange dan apa yang kami sampaikan ke nilai juga berbeda. 100 00:08:48,930 --> 00:08:57,230 Jadi di sini, ini harus berupa alat peraga misalnya atau nilai alat peraga atau apa pun yang ingin Anda gunakan dan di sini 101 00:08:57,310 --> 00:09:03,490 untuk onValueChange, saya hanya akan menunjuk alat peraga. onChange misalnya tetapi sekali lagi semua nama alat 102 00:09:03,490 --> 00:09:08,140 peraga ini tentu saja sepenuhnya terserah Anda karena Anda akan menjadi orang yang 103 00:09:08,140 --> 00:09:16,870 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 104 00:09:16,870 --> 00:09:20,730 saya mengharapkan label prop di sini, jika Anda menamainya secara berbeda, 105 00:09:20,800 --> 00:09:22,990 Anda perlu memberi nama yang 106 00:09:22,990 --> 00:09:29,230 berbeda di sini tentu saja dan label tentu saja adalahGlutenFree karena saya akan mengganti saklar ini di sini. 107 00:09:29,380 --> 00:09:35,830 Maka kita harus lulus dalam keadaan karena saya menambahkan prop negara di sini untuk mengelola nilai saya, jika 108 00:09:35,830 --> 00:09:39,610 Anda menamainya secara berbeda, Anda perlu menyebutkannya secara berbeda di sana 109 00:09:39,620 --> 00:09:42,970 juga dan di sini saya akan menunjuk pada isGlutenFree, 110 00:09:42,970 --> 00:09:45,120 pada kondisi saya dan onChange 111 00:09:45,130 --> 00:09:49,840 needs harus disediakan karena di sini saya menggunakan prop onChange untuk mengikatnya ke onValueChange. 112 00:09:49,840 --> 00:09:55,990 Jadi ini harus menunjuk pada suatu fungsi dan tentu saja di sini, saya hanya akan menjaga fungsi 113 00:09:55,990 --> 00:10:03,550 ini di sini dan karena saya hanya menggunakan onChange di sini untuk meneruskannya ke onValueChange, kita mendapatkan argumen nilai baru di sini juga. 114 00:10:04,870 --> 00:10:10,480 Sekarang kita dapat menyingkirkan tampilan ini di sana dan hanya menggunakan komponen sakelar filter kami dan sekarang 115 00:10:10,510 --> 00:10:13,270 cukup ulangi yang tentu saja lebih mudah. 116 00:10:13,270 --> 00:10:23,450 Jadi sekarang di sini kita juga dapat memiliki lactoseFree, vegan dan vegetarian dan kita perlu menambahkan 117 00:10:24,490 --> 00:10:34,740 tiga status baru sekarang, jadi di sini izinkan saya mereplikasi ini, kita memiliki islactoseFree dan set isLactoseFree, 118 00:10:34,740 --> 00:10:39,210 di sini kita memilikiVegan dan set isVegan 119 00:10:39,270 --> 00:10:42,720 dan di sini kita memiliki isVegetarian 120 00:10:48,010 --> 00:10:51,000 dan dan atur isVegetarian. 121 00:10:51,020 --> 00:10:57,740 Sekarang kita hanya perlu memastikan bahwa kita menggunakan status di tempat yang tepat, jadi untuk sakelar filter 122 00:10:57,760 --> 00:11:02,220 kedua di mana kita memiliki filter lactoseFree, saya meneruskan status isLactoseFree 123 00:11:02,250 --> 00:11:09,100 dan saya memperbarui set isLactoseFree tentu saja. Untuk peralihan vegan, saya meneruskan 124 00:11:09,160 --> 00:11:17,980 isVegan dan kami memperbaruinya dengan set isVegan dan untuk vegetarian, kami meneruskan isVegetarian dan 125 00:11:17,980 --> 00:11:22,060 kami memperbarui set isVegetarian, seperti ini. 126 00:11:25,410 --> 00:11:25,880 OK, 127 00:11:25,970 --> 00:11:31,790 seharusnya begitu, jika kita sekarang menyimpan ini, kita harus memiliki layar filter dengan berbagai filter kita yang dapat kita 128 00:11:31,790 --> 00:11:36,770 atur secara independen karena kita memiliki keadaan independen. Saya pikir akan menyenangkan jika ada 129 00:11:36,770 --> 00:11:43,610 jarak antar baris ini, jadi mari kita terapkan ini. Pada wadah filter kami di sini, kami dapat menambahkan 130 00:11:43,610 --> 00:11:50,570 margin vertikal misalkan 10 atau 50 mungkin, sedikit lebih dan ini harus memastikan bahwa kami memiliki beberapa spasi 131 00:11:50,570 --> 00:11:51,970 di sana, 132 00:11:52,130 --> 00:11:54,550 ya dan ini terlihat cukup bagus.