Dengan itu, kami menambahkan tab dan ya, pada favorit,
kami belum melakukan apa-apa, itu
adalah sesuatu yang
akan kami ikuti tetapi setidaknya kami memiliki tab. Sebelum kita bekerja pada favorit, mari kita bekerja
pada tab sedikit lebih karena sekarang, kita memiliki tab pada Android yang tidak benar-benar terlihat seperti kita
harapkan tab Android akan terlihat, ini lebih mirip tab iOS jika Anda bertanya kepada saya .
Tentu itu berfungsi dan Anda dapat mempertahankannya jika itu gaya
yang Anda inginkan, tidak ada yang salah dengan itu tetapi akan lebih baik untuk memiliki tampilan yang lebih spesifik
untuk Android dan untuk itu, kami memiliki navigator terpisah yang dapat kami buat, meskipun kami harus menginstal paket tambahan untuk ini yang pertama-tama,
jadi mari kita lakukan itu.
Biarkan saya keluar dari server itu di sini dan jalankan
npm install - save dan sekarang itu reaksi-navigasi-material-tab-bawah, omong-omong juga ada reaksi-navigasi-bahan-tab-atas, saya tidak akan membahas lebih dalam kursus ini
di sini tetapi terlampir Anda juga menemukan tautan di mana Anda dapat mempelajari lebih
lanjut tentang navigator alternatif itu. Kami akan menggunakan navigator tab bawah
bahan di sini dan menginstal paket ini, ini adalah bagaimana kami memulai ini.
Jadi mari kita tunggu sampai instalasi selesai dan setelah itu, mari kita instal
satu paket lain yang juga akan kita perlukan dengan instalasi npm - simpan dan itu reaksi-asli-kertas. Jadi mari kita instal ini juga dan setelah instalasi ini selesai,
mari kita
restart server expo
dengan npm mulai lagi karena sekarang kita
menginstal paket yang membantu kita membuat navigator tab alternatif dan untungnya
benar-benar mudah untuk digunakan dan memiliki hampir sama atau sangat opsi konfigurasi
yang serupa daripada navigator tab bawah, terutama ketika menyangkut
bagaimana kita mengatur ikon dan sebagainya. Terlampir, Anda menemukan semua dokumen untuk
navigator alternatif
ini dan untuk itu navigator alternatif lain yang saya sebutkan dan mari kita gunakan dengan mengimpor dari paket navigator reaksi-navigasi-material-bawah-tab
yang baru diinstal ini di sini dan dari sana kita dapat mengimpor pembuatan fungsi navigator tab bawah
bahan di sini.
Sekarang pastikan Anda juga memiliki impor platform karena kita sekarang memerlukan ini
karena saya hanya ingin menggunakan navigator ini daripada
membuat navigator tab bawah jika kita menggunakan Android. Jadi di sini kita dapat memeriksa apakah platform. os sama dengan Android dan dalam hal ini,
saya ingin menggunakan fungsi navigator tab bahan buat baru yang baru saja saya impor,
jika
tidak setelah titik dua, kita akan menggunakan navigator tab bawah yang kita atur di kuliah sebelumnya.
Jadi itu tentu saja meninggalkan kita dengan satu pertanyaan, bagaimana cara kerja navigator tab bawah bahan? Bagaimana cara kita mengkonfigurasi
itu?
Dan kabar baiknya di sini adalah, umumnya berfungsi sama dengan navigator tab bawah.
Ada beberapa detail yang dapat Anda konfigurasikan pada tab navigator itu
sendiri, jadi misalnya warna mana yang diasumsikan, kapan dan seterusnya yang berbeda
tetapi mengenai bagaimana Anda mengatur tab dan mencocokkan layar dan mengatur ikon, itu persis sama dan oleh
karena itu kami sebenarnya dapat mengambil seluruh konfigurasi layar ini di sini, memotongnya dari sini dan menyimpannya
dalam konstanta terpisah di sini yang saya akan beri nama tabScreenConfig, Anda dapat memberi nama
apa pun yang
Anda inginkan karena itu dapat digunakan kembali dan sekarang menggunakan tabScreenConfig sebagai argumen pertama keduanya di navigator tab
bawah serta di navigator tab bawah bahan, seperti ini dan itu hanya meninggalkan kita dengan argumen kedua alternatif
yang kita sampaikan ke navigator tab bawah bahan dan navigator tab bawah saja.
Argumen kedua ini kami sampaikan, objek ini kami sampaikan sebagai argumen kedua saat Anda pelajari memungkinkan
kami untuk mengonfigurasi tab navigator itu sendiri, misalnya mengatur opsi tab bar seperti warna warna
aktif dan yang sedikit berbeda karena untuk bahan navigator tab bawah bahan , kami tidak mengatur opsi bilah tab untuk mengonfigurasi warna rona
aktif kami, sebaliknya kami langsung memiliki warna
rona aktif di sini di objek ini sendiri, pada navigator tab bawah, kami memiliki ini di objek bersarang,
di opsi bilah tab , kami tidak
memilikinya di sini.
Alih-alih di sini, kami hanya mengatur warna warna aktif seperti itu untuk warna aksen warna dan ada pengaturan
lain juga, misalnya Anda dapat mengatur pengalihan ke true dan saya akan menunjukkan apa yang
dilakukan dan apa
yang salah lakukan dalam sedetik dan dengan itu, itu saja untuk saat ini. Jika sekarang kita menyimpan ini, ini akan membangun kembali proyek kita dan memuatnya
kembali di layar dan kita memiliki tab yang sama seperti
sebelumnya
di iOS, yang tidak
berubah tetapi di Android, kita sekarang memiliki lebih banyak
navigator tab cari bahan di sini di mana kita dapat sekarang juga beralih seperti
ini dan itulah efek pergeseran yang Anda lihat di sini, bahwa tab tumbuh, bahwa label hanya ada pada
tab yang aktif dan
jika Anda mengatur menggeser ke false di sini, Anda tidak punya ini efek, maka Anda
selalu memiliki label Anda di Android juga.
Jadi itu sekarang tampilan yang sedikit lebih mirip Android yang
akan saya katakan dan karena itu tampilan yang ingin saya miliki di sini dan Anda dapat mengambil ini lebih jauh.
Katakanlah kita ingin mengubah seluruh warna latar belakang bilah tab
di sini tergantung
pada tab mana yang dipilih dan memiliki efek riak yang bagus yang mengubah ini sepanjang jalan.
Untuk ini, kita bisa pergi ke konfigurasi layar kita dan di sana ke opsi navigasi dan di sana, kita
memiliki ikon bilah tab.
Kami juga dapat mengatur warna bilah tab di sini saat tab ini dipilih sehingga
untuk mengatakan dan misalnya mengatur ini ke warna warna primer dan sekarang penting, ini hanya memiliki efek jika Anda menetapkan pergeseran ke true,
jika tidak, warna bar tab ini akan mendukung yang saya siapkan di sini tidak akan berpengaruh karena hanya efek pergeseran yang
mendukung ini dan apa yang akan kita miliki sekarang, efek yang akan kita miliki sekarang adalah bahwa jika
saya menyimpan ini, dapatkan tampilan yang sama di iOS karena ada bilah tab warna tidak berpengaruh tetapi
sekarang Anda lihat, kami benar-benar memiliki warna utama kami sebagai latar belakang jika
makanan dipilih, jika kami memilih favorit, yang berubah menjadi warna lain.
Sekarang perubahan ini tentu saja tidak terlihat seindah itu dan oleh karena itu, kita dapat dengan mudah mengubahnya dengan
juga memberikan layar favorit kita warna tab bar sendiri.
Jadi di sana kita bisa mengatakan dalam opsi navigasi layar favorit di sebelah ikon bilah tab,
kita mengatur warna bilah tab di sana untuk aksen warna dan apa yang sekarang kita miliki adalah bilah tab berwarna berbeda yang beralih
dari warna utama kita untuk makan di sini untuk warna aksen ini untuk favorit dengan efek riak yang bagus ini dan
tentu saja downside adalah bahwa kita tidak melihat ikon itu karena warna aksen untuk warna bilah tab
bukan pilihan
yang baik jika warna warna kita juga merupakan warna aksen.
Jadi jika kita menggunakan efek ini, kita mungkin ingin menggunakan putih di sini sebagai warna warna yang
selalu bisa kita lihat terhadap warna primer dan aksen dan karena itu di sini untuk warna warna aktif, kita mungkin ingin menggunakan
putih sebagai ganti aksen kita. warna karena putih akan bekerja untuk kedua tab maka tidak masalah jika bilah tab
kemudian diwarnai dalam warna primer, ungu tua atau warna aksen, oranye dan karenanya sekarang Anda melihat kami memiliki efek
ini di sini dan riak yang
bagus ini berubah menjadi tab lain di sini untuk favorit. Dan saya pikir itu perubahan yang cukup manis
dan mudah diterapkan yang membuat ini terlihat hebat di Android dan tentu saja memberi kita tampilan yang
lebih mirip Android sambil mempertahankan tampilan iOS default yang Anda harapkan pada platform itu, sangat mudah untuk
diterapkan saat Anda bisa tahu.
Sekarang catatan singkat, jika Anda tidak ingin menggunakan efek pergeseran ini yang
ingin saya gunakan di sini tetapi jika Anda tidak ingin menggunakannya, maka tentu saja Anda
mungkin memperhatikan bahwa warna latar belakang tab Anda di Android adalah bukan warna utama Anda, melainkan warna ungu yang sedikit lebih terang, ungu-kebiru-biruan.
Sekarang biasanya, Anda mungkin ingin mengubah ini juga dan
seperti yang Anda lihat, warna tab bar tidak memiliki efek,
ini hanya bekerja dengan menggeser.
Sekarang jika Anda ingin mengubah warna latar belakang untuk seluruh bilah tab dalam wadah yang tidak bergeser,
maka yang harus Anda lakukan adalah di sini pada konfigurasi navigator tab Anda sendiri karena itu memengaruhi seluruh bilah tab
sekarang,
Anda dapat mengatur properti gaya bar dan itu hanyalah objek gaya di mana Anda dapat, misalnya,
mengatur warna latar belakang ke warna-warna primer, seperti ini dan ini hanya mengubah warna latar
belakang bilah navigasi untuk bilah bawah Android kami di sini.
Jadi begitulah cara Anda dapat mengubah ini jika Anda tidak ingin menggunakan pola pergeseran di sini,
tampilan bergeser.
Saya akan mengaktifkan shifting lagi, kita
akan mengatur ini menjadi benar lagi karena saya sangat suka bar tab berwarna berbeda ini, saya
pikir itu terlihat sangat bagus dengan efek riak yang mengubah warna dan betapa mudahnya untuk mengimplementasikan yang
berbeda bilah tab.
Sekarang lagi, ada banyak opsi konfigurasi baik untuk bilah tab itu sendiri maupun untuk opsi navigasi layar yang Anda miliki
di dalam bilah tab Anda dan oleh karena itu Anda menemukan Anda dokumen resmi terlampir di mana Anda
dapat menyelam ke setiap opsi tunggal dan menjelajahi mereka dan bermain-main dengan mereka.