Jadi, bagaimana kita menetapkan ikon di sini?
Lalu bagaimana kita bisa memastikan bahwa kita menggunakan warna yang
ingin kita gunakan?
Mari kita mulai
dengan warna sebelum kita menambahkan ikon. Sama seperti fungsi navigator buat stack
navigator, buat navigator tab
bawah juga membutuhkan argumen kedua. Argumen pertama adalah objek konfigurasi Anda di mana
Anda mengkonfigurasi tab yang berbeda dan
layar yang ditunjukkannya, argumen kedua juga merupakan objek di mana Anda dapat mengkonfigurasi navigator secara umum dan di sana,
Anda memiliki beberapa pengaturan.
Sekali lagi, dokumen resmi adalah tempat untuk mempelajari setiap pengaturan di
sini, salah satu pengaturan yang lebih penting di sini adalah opsi tab bar.
Ini adalah objek lain dan di sana, Anda dapat secara terperinci mengontrol bagaimana bilah tab muncul, bagaimana itu ditata.
Anda dapat mengatur warna warna tidak aktif yang merupakan warna yang dimiliki tab yang saat ini tidak aktif.
Anda dapat mengatur warna warna aktif dan itulah yang sebenarnya kami butuhkan
di sini, Anda dapat mengatur warna latar belakang aktif dan warna latar belakang tidak aktif juga tentu
saja juga mengubah latar belakang tab di sini jika
Anda mau dan karenanya Anda harus banyak kemungkinan untuk menyesuaikan ini dengan kebutuhan Anda.
Dan di sini, saya akan menetapkan warna warna aktif karena hanya
itu yang saya butuhkan di sini tetapi tentu saja merasa bebas untuk bermain-main dengan itu dan mengubah warna latar belakang
juga dan mengubah pengaturan lain dan saya akan mengatur warna warna aktif saya ke nilai untuk konstanta warna saya yang saya impor
di sini, saya akan mengaturnya ke warna aksen warna.
Anda belum pernah menggunakannya sebelumnya tetapi sekarang
saya akan menggunakannya dan itulah warna oranye ini yang sekarang kita miliki dan inilah cara mudah kita mengubah
warna yang dimiliki tab aktif. Nah, itu satu hal, harap
perhatikan juga bahwa ini tentu saja tidak menambahkan ikon dan bagaimana, kita
tidak
mengatakan apa-apa tentang ikon yang ingin kita tambahkan. Sekarang untuk menambahkan ikon, pola yang langsung saya
pikir adalah Anda pergi ke konfigurasi rute Anda di sini, jadi ke konfigurasi
tempat Anda memetakan layar ke tab Anda dan Anda menggunakan formulir yang lebih panjang di mana Anda
menambahkan properti layar dan di mana Anda kemudian juga menambahkan opsi navigasi.
Ngomong-ngomong, Anda juga bisa melakukan ini secara langsung dalam komponen tentu saja dengan menambahkan
opsi navigasi seperti yang kami
lakukan sebelumnya, namun karena makanan di sini sebenarnya adalah navigator, satu-satunya tempat menambahkan opsi
navigasi yang tentu
saja ada di sini atau juga di sini, di buat stack navigator.
Di sana Anda juga dapat mengatur tombol opsi navigasi di sini pada argumen kedua, pada
objek ini Anda lulus sebagai argumen kedua untuk membuat stack navigator di mana
Anda mengkonfigurasi keseluruhan navigator untuk memberikan navigator itu sendiri beberapa opsi navigasi karena opsi navigasi
yang kami tetapkan untuk navigator makanan, sehingga untuk navigator tumpukan sekarang adalah opsi yang diperhitungkan
oleh navigator tab yang menggunakan navigator makanan ini sebagai navigator bersarang dan opsi navigasi yang dapat kita
atur di sini termasuk ikon tab bar. Kita dapat menambahkan ikon bilah tab di sini dan ikon bilah tab sebenarnya adalah fungsi. Ini bukan ikon tunggal
yang Anda arahkan, melainkan fungsi ini. Ini adalah fungsi yang menerima beberapa informasi tab yang bisa Anda katakan,
harus pergi ke sini, itulah argumen yang kami dapatkan secara otomatis karena
fungsi ini tentu saja akan dipanggil oleh React navigation dan ikon bilah tab, fungsi ini
di sini, harus mengembalikan ikon yang Anda inginkan untuk membuat tab ini, jadi dalam hal ini
untuk tab makanan.
Itu berarti bahwa saya harus dapat menggunakan ikon di sini dan untuk ini, kita dapat mengimpor ionikon atau set
ikon lain yang ingin Anda gunakan dari @ expo / ikon-vektor.
Sekali lagi, jangan ragu untuk
menginstal paket ini, biasanya itu harus diinstal secara otomatis ketika bekerja dengan Expo tetapi Anda dapat menjalankan
instalasi npm --simpan @ expo / vektor-ikon untuk memastikan bahwa Anda telah menginstalnya dan Anda dapat menggunakan set ikon
apa pun Anda ingin tetapi saya selalu menggunakan ionik selama kursus ini, saya akan tetap menggunakannya.
Dengan itu, Anda dapat menggunakan ionik sebagai komponen seperti yang Anda pelajari sebelumnya dalam kursus.
Jadi di sini kita bisa mengembalikan ionikon seperti ini untuk membuat ikon ionikon dan sekarang Anda dapat
menggunakan nama ikon
yang Anda inginkan di sini dan di sini saya ingin menggunakan
ios-restoran yang hanya merupakan ikon yang saya temukan dalam daftar ikon, daftar ini di
sini yang juga saya tunjukkan sebelumnya, ada ikon ios-restaurant
yang saya pilih yang sekarang saya gunakan yang saya tunjukkan di sini.
Ini adalah ikon yang ingin saya
render, saya akan memberikannya ukuran
25, Anda
dapat bereksperimen dengan itu tetapi saya menemukan
25 terlihat cukup baik di sini di tab
bar dan warna dan itu sekarang penting dari tabInfo. tintColor karena warna yang kita atur di sini tentu saja harus menjadi warna tint yang
kita atur di sini.
Sekarang tentu saja, kita bisa membuat kode ini untuk mewarnai aksen warna
di sini, tetapi jika kita mengubahnya di sana, kita harus ingat bahwa kita juga mengubahnya di sana.
Hal yang baik adalah dan itulah mengapa ini adalah sebuah fungsi, yang Bereaksi navigasi memanggil fungsi ini
untuk kami dan memberi kami beberapa informasi penting tentang bagaimana bilah tab kami dikonfigurasikan dalam objek info tab itu dan bahwa
misalnya menyertakan warna warna yang telah kami atur. , sehingga kita dapat secara dinamis mengambil ini di sini
untuk mewarnai ikon, sehingga jika kita mengubah warna di sana untuk bilah tab, itu secara otomatis tercermin dalam ikon kita
di sana, jadi itu
adalah sedikit kenyamanan yang kita miliki di sini yang dapat kita gunakan di sini .
Jadi dengan itu, saya render ikon-ikon ini untuk makanan dan untuk favorit, sekarang kita dapat menggunakan pendekatan yang serupa, gunakan formulir yang lebih panjang di mana kita
mengatur layar di sini dan kemudian menambahkan opsi navigasi di sini yang akan digabungkan dengan navigasi apa pun opsi yang kami
siapkan di layar favorit tetapi harap dicatat bahwa tentu saja Anda benar-benar dapat juga mengatur opsi navigasi di sini
di komponen layar favorit tetapi untuk menyimpan semuanya di satu tempat, saya akan melakukannya
di navigasi saya yang diatur di sini sebagai gantinya.
Jadi ini adalah opsi navigasi saya
untuk layar ini, sama seperti navigator ini, navigator makan, tentu saja kita dapat mengatur opsi
navigasi untuk layar, itulah yang kami lakukan
di seluruh modul setelah semuanya dan di sana, saya ingin melakukan dasarnya sama, jadi saya
hanya akan menyalinnya, tambahkan di sini ke objek opsi navigasi ini dan satu-satunya hal yang berbeda di
sini adalah ikon yang ingin saya gunakan, di sini ios-star bukan ios-restaurant.
Dan dengan itu jika kita menyimpan ini, saya benar-benar mendapatkan kesalahan karena karena sekarang saya menggunakan
jsx di sini, kita perlu mengimpor Bereaksi tentu saja, itulah cara Bereaksi bekerja karena jsx di belakang
layar ditransformasikan menjadi Bereaksi membuat elemen seperti yang Anda tahu dan karena itu sekarang setelah menambahkan impor
Bereaksi di sini di MealsNavigator. file js. Ini berfungsi dan sekarang kami memiliki ikon
yang secara otomatis mengambil warna warna kami dan itulah cara mudah Anda menambahkan ikon.
Sekarang selain mengatur ikon, Anda mungkin ingin mengatur label juga dan Anda akan melihat bahwa
secara default, label, makanan, dan favorit hanyalah pengidentifikasi kami ditugaskan di sini ketika kami mengatur makanan navigasi dan
favorit tab kami.
Sekarang sering, itu masuk akal tetapi jika Anda ingin memiliki label yang berbeda, maka dalam opsi
navigasi layar Anda memuat di sini ke dalam tab
ini, Anda dapat mengatur properti label bar tab dan di sana, itu hanya string di mana Anda dapat memiliki favorit dengan tanda seru dan
jika Anda mengatur ini, Anda akan melihat bahwa sekarang Anda memiliki favorit dengan tanda seru
di sini, bukan hanya favorit seperti sebelumnya.
Jadi Anda dapat mengganti label default ini yang dianggap yang biasanya adalah pengidentifikasi Anda, jika Anda
menginginkan yang berbeda, Anda dapat menimpanya dan tentu saja, ada lebih banyak opsi yang dapat
Anda atur dan lampirkan, Anda menemukan tautan ke dokumen resmi untuk navigator ini tempat Anda
dapat mempelajari semua opsi yang dapat Anda atur di navigator itu sendiri tetapi juga pada opsi navigasi layar anak, jadi dari layar bersarang atau
navigator bersarang di dalam navigator tab itu, jadi apa yang kami siapkan
di sini.