Mari kita mulai dengan menata laci di layar filter,
itu tidak sulit,
itu adalah sesuatu yang kami lakukan sebelumnya. Di navigator filter di sini,
di navigator tumpukan, kami pada akhirnya hanya perlu mengatur opsi navigasi default yang kami
juga gunakan untuk navigator favorit di navigator makanan kami. Jadi kita bisa menyalin objek konfigurasi kedua ini di sini
dan menambahkan ini pada navigator filter kami di sini sebagai argumen kedua untuk membuat stack navigator.
Tentu saja, kami dapat menghapus baris komentar
itu tetapi dengan perubahan sederhana ini, kami memastikan kami menggunakan bilah navigasi atau gaya bilah tindakan yang sama
di sini.
Jadi itu perubahan yang sederhana namun bermanfaat, sekarang untuk laci itu sendiri, bagaimana dengan
tampilan ini di sini dan gaya laci itu?
Sekarang untuk satu, Anda dapat jika Anda ingin mengontrol seluruh laci dan mengubah bagaimana item diletakkan di sana dan tidak menggunakan default
ini memiliki daftar dengan efek riak di sini di Android dan efek yang berbeda pada iOS tapi
saya pikir
itu adalah standar yang bagus yang sebenarnya saya tidak ingin berubah.
Namun jika Anda mau, Anda dapat mengganti seluruh komponen ini yang dirender di sini dan dilampirkan, Anda
menemukan tautan ke dokumen resmi tempat Anda dapat mempelajari lebih lanjut tentang ini jika Anda perlu
menyesuaikan ini.
Apa yang tentu saja ingin saya ubah adalah gaya barang-barang ini dan teks yang ditampilkan di sini.
Nah, itu tidak
terlalu sulit, mari kita mulai dengan teks. Sebagai teks, seperti yang Anda tahu, secara default mengambil
pengidentifikasi ini di sini, penyaring makanan.
Sekarang tentu saja, itu bisa dilakukan tetapi makan, itu bukan teks
yang ingin kami tunjukkan kepada pengguna kami.
Oleh karena itu, saya ingin menimpa ini dan kita dapat melakukan ini dengan opsi navigasi lama
yang bagus yang sama seperti sebelumnya dengan tab di mana kita juga dapat mengontrol teks label, kita harus mengatur
navigator tumpukan kita, baik ketika kita membuat stack navigator, ada di samping pengaturan opsi navigasi default untuk setiap layar
di navigator itu, kita dapat mengatur opsi navigasi untuk keseluruhan navigator itu sendiri yang kemudian bukan
untuk layar di navigator tetapi untuk navigator ketika digunakan sebagai layar yang merupakan apa
yang kita
Sedang dilakukan di sini dan kemudian di sini kita dapat menetapkan label laci dan dapat mengatur ini untuk menyaring dengan beberapa tanda seru hanya
agar kita melihat bahwa ini memiliki efek,
sekarang kita melihat itu di
sini, sehingga di situlah kita dapat mengatur ini, satu opsi.
Atau di sini saat membuat navigator laci, kita dapat menggunakan formulir yang lebih panjang di mana
kita mengatur layar dan di mana kita kemudian mengatur opsi navigasi di sini dan ini
hanyalah alternatif di mana keduanya
tidak lebih baik
atau lebih buruk, Anda dapat menggunakan salah satu dari mereka dan sekarang di sini, saya akan menetapkan
label laci untuk makanan katakanlah, itu lebih masuk akal bagi saya daripada makanan favorit.
Jadi dengan itu jika saya sekarang membuka laci, saya melihat makanan dan filter. Untuk filter, saya sekarang tidak mengganti judul
karena saya baik-baik saja dengan default mengambil pengenal saya
tetapi untuk makanan, saya menimpanya.
Sekarang bagaimana dengan styling, warna dan sebagainya?
Nah itu tentu saja bisa dikontrol juga. Nah seperti sebelumnya dengan misalnya tab di mana kita
juga bisa memberikan argumen kedua untuk membuat navigator tab bawah untuk mengontrol tata letak dan gaya tab
secara umum,
kita dapat melakukan hal yang sama untuk laci. Untuk membuat drawer navigator, kita dapat memberikan argumen kedua yang
merupakan objek yang dikonfigurasikan ke drawer navigator itu sendiri dan di
sana, kita mendapatkan beberapa opsi.
Sekali lagi, dokumen resmi memberi Anda daftar lengkap segala sesuatu yang dapat Anda konfigurasi,
misalnya Anda punya opsi konten yang memungkinkan Anda untuk mengontrol konten di laci, sehingga item laci
sampai akhir dan di sana, Anda punya banyak pengaturan yang dapat Anda atur, misalnya Anda
dapat mengatur warna warna aktif yang pada dasarnya untuk warna item memiliki ketika itu aktif dan di sana, kita dapat
mengatur ini untuk warna, aksen warna jika kita mau, daripada menggunakan standar biru itu dan oleh karena itu sekarang,
ini
berwarna oranye dan ini adalah betapa mudahnya untuk mengubah ini, ini yang perlu kita lakukan.
Sekarang jika kita juga ingin mengubah font yang
digunakan di sana, kita juga bisa melakukannya. Selain mengatur warna warna aktif di sini pada opsi konten,
kita dapat mengatur
gaya label di sini dan yang mengambil objek gaya yang akan diterapkan pada komponen teks
yang mendasarinya di laci, sehingga kita dapat mengatur hal-hal
seperti penyelarasan teks di sana jika kami ingin atau dalam kasus saya di sini, cukup mengatur keluarga font dan mengatur ini untuk membuka sans, mungkin
seperti ini, bahkan bukan versi berani. Jika kita melakukan itu, kita jelas melihat perbedaannya.
Sekarang saya akan mengaturnya kembali ke huruf tebal sebenarnya karena itu lebih baik tetapi untuk melihat perbedaan,
saya pikir itu jelas tanpa huruf tebal.
Jadi sekarang, kami menggunakan font
kami sendiri di sini, versi yang berani
dan warna
kami sendiri dan itu cukup rapi menurut saya, hal yang sama juga berlaku di Android.
Ini adalah bagaimana Anda dapat bekerja dengan laci Anda, bagaimana Anda
juga dapat menata segalanya di sana dan dengan
itu, Anda belajar tentang pola navigasi utama yang dapat Anda tambahkan ke aplikasi Anda dengan
bantuan React navigation.
Sekarang jelas ketika saya menekankan beberapa kali di seluruh modul ini, ada banyak yang harus dikonfigurasikan, semua navigator ini
memiliki opsi dan pengaturan navigasi yang berbeda untuk navigator itu sendiri dan oleh karena itu pasti
memeriksa dokumen resmi dan hanya bermain-main dengan pengaturan berbeda yang Anda lihat di sana untuk
bereksperimenlah dengan apa yang dapat Anda lakukan. Hal-hal yang saya perlihatkan di sini dan hal-hal yang kami ubah di
sini mungkin adalah hal-hal umum yang ingin Anda sesuaikan. Itulah mengapa saya menunjukkannya di
sini, tetapi sekali lagi ada
banyak hal yang harus dilakukan, pasti lihat dokumen resmi. Untuk aplikasi ini, bagian
navigasi pada dasarnya sudah selesai, tidak ada
terlalu banyak untuk ditambahkan, sekarang saatnya
untuk meninjau kembali gaya umum, misalnya pastikan kita menggunakan font
yang tepat di mana-mana, juga di tab dan di header dan untuk Sebagai contoh juga untuk
teks di sini yang saat ini kita tidak dan kemudian
mengisi sisa aplikasi dengan beberapa daging. Misalnya halaman detail di sini yang masih
memiliki beberapa konten dummy saat ini dan juga halaman filter kami yang juga hanya memiliki konten dummy.
Itulah yang akan saya lakukan di sisa
modul ini, setelah itu di modul berikutnya, kami juga akan memastikan bahwa kami menambahkan lebih banyak logika dan bahwa kita
misalnya dapat menandai sesuatu sebagai favorit dan karenanya dapat menambahkannya ke favorit tab yang saat ini tidak berfungsi.
Namun untuk sekarang, mari selesaikan penataan dan tambahkan tata letak dan konten lainnya ke aplikasi ini.