1 00:00:02,350 --> 00:00:05,320 Dengan itu, kami menambahkan tab dan ya, pada favorit, 2 00:00:05,330 --> 00:00:06,970 kami belum melakukan apa-apa, itu 3 00:00:06,970 --> 00:00:08,370 adalah sesuatu yang 4 00:00:08,380 --> 00:00:14,070 akan kami ikuti tetapi setidaknya kami memiliki tab. Sebelum kita bekerja pada favorit, mari kita bekerja 5 00:00:14,070 --> 00:00:19,620 pada tab sedikit lebih karena sekarang, kita memiliki tab pada Android yang tidak benar-benar terlihat seperti kita 6 00:00:19,620 --> 00:00:25,080 harapkan tab Android akan terlihat, ini lebih mirip tab iOS jika Anda bertanya kepada saya . 7 00:00:25,080 --> 00:00:27,840 Tentu itu berfungsi dan Anda dapat mempertahankannya jika itu gaya 8 00:00:27,840 --> 00:00:33,090 yang Anda inginkan, tidak ada yang salah dengan itu tetapi akan lebih baik untuk memiliki tampilan yang lebih spesifik 9 00:00:33,090 --> 00:00:39,300 untuk Android dan untuk itu, kami memiliki navigator terpisah yang dapat kami buat, meskipun kami harus menginstal paket tambahan untuk ini yang pertama-tama, 10 00:00:39,390 --> 00:00:41,180 jadi mari kita lakukan itu. 11 00:00:41,860 --> 00:00:45,660 Biarkan saya keluar dari server itu di sini dan jalankan 12 00:00:45,660 --> 00:00:53,490 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 13 00:00:53,490 --> 00:00:58,920 di sini tetapi terlampir Anda juga menemukan tautan di mana Anda dapat mempelajari lebih 14 00:00:59,130 --> 00:01:04,170 lanjut tentang navigator alternatif itu. Kami akan menggunakan navigator tab bawah 15 00:01:04,170 --> 00:01:09,130 bahan di sini dan menginstal paket ini, ini adalah bagaimana kami memulai ini. 16 00:01:09,150 --> 00:01:13,800 Jadi mari kita tunggu sampai instalasi selesai dan setelah itu, mari kita instal 17 00:01:13,890 --> 00:01:25,240 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, 18 00:01:25,240 --> 00:01:26,680 mari kita 19 00:01:26,680 --> 00:01:28,720 restart server expo 20 00:01:28,810 --> 00:01:32,400 dengan npm mulai lagi karena sekarang kita 21 00:01:32,560 --> 00:01:37,940 menginstal paket yang membantu kita membuat navigator tab alternatif dan untungnya 22 00:01:37,970 --> 00:01:43,780 benar-benar mudah untuk digunakan dan memiliki hampir sama atau sangat opsi konfigurasi 23 00:01:43,780 --> 00:01:48,730 yang serupa daripada navigator tab bawah, terutama ketika menyangkut 24 00:01:48,730 --> 00:01:54,730 bagaimana kita mengatur ikon dan sebagainya. Terlampir, Anda menemukan semua dokumen untuk 25 00:01:55,000 --> 00:01:56,160 navigator alternatif 26 00:01:56,290 --> 00:02:05,080 ini dan untuk itu navigator alternatif lain yang saya sebutkan dan mari kita gunakan dengan mengimpor dari paket navigator reaksi-navigasi-material-bawah-tab 27 00:02:05,080 --> 00:02:12,770 yang baru diinstal ini di sini dan dari sana kita dapat mengimpor pembuatan fungsi navigator tab bawah 28 00:02:12,830 --> 00:02:14,310 bahan di sini. 29 00:02:14,450 --> 00:02:18,950 Sekarang pastikan Anda juga memiliki impor platform karena kita sekarang memerlukan ini 30 00:02:18,950 --> 00:02:21,980 karena saya hanya ingin menggunakan navigator ini daripada 31 00:02:21,980 --> 00:02:31,070 membuat navigator tab bawah jika kita menggunakan Android. Jadi di sini kita dapat memeriksa apakah platform. os sama dengan Android dan dalam hal ini, 32 00:02:31,070 --> 00:02:36,830 saya ingin menggunakan fungsi navigator tab bahan buat baru yang baru saja saya impor, 33 00:02:36,830 --> 00:02:37,680 jika 34 00:02:37,740 --> 00:02:44,060 tidak setelah titik dua, kita akan menggunakan navigator tab bawah yang kita atur di kuliah sebelumnya. 35 00:02:44,060 --> 00:02:49,700 Jadi itu tentu saja meninggalkan kita dengan satu pertanyaan, bagaimana cara kerja navigator tab bawah bahan? Bagaimana cara kita mengkonfigurasi 36 00:02:49,700 --> 00:02:50,880 itu? 37 00:02:50,990 --> 00:02:56,750 Dan kabar baiknya di sini adalah, umumnya berfungsi sama dengan navigator tab bawah. 38 00:02:56,750 --> 00:03:01,100 Ada beberapa detail yang dapat Anda konfigurasikan pada tab navigator itu 39 00:03:01,100 --> 00:03:05,670 sendiri, jadi misalnya warna mana yang diasumsikan, kapan dan seterusnya yang berbeda 40 00:03:05,690 --> 00:03:12,210 tetapi mengenai bagaimana Anda mengatur tab dan mencocokkan layar dan mengatur ikon, itu persis sama dan oleh 41 00:03:12,350 --> 00:03:18,650 karena itu kami sebenarnya dapat mengambil seluruh konfigurasi layar ini di sini, memotongnya dari sini dan menyimpannya 42 00:03:18,650 --> 00:03:24,350 dalam konstanta terpisah di sini yang saya akan beri nama tabScreenConfig, Anda dapat memberi nama 43 00:03:24,350 --> 00:03:25,990 apa pun yang 44 00:03:26,240 --> 00:03:33,070 Anda inginkan karena itu dapat digunakan kembali dan sekarang menggunakan tabScreenConfig sebagai argumen pertama keduanya di navigator tab 45 00:03:33,080 --> 00:03:40,010 bawah serta di navigator tab bawah bahan, seperti ini dan itu hanya meninggalkan kita dengan argumen kedua alternatif 46 00:03:40,160 --> 00:03:45,290 yang kita sampaikan ke navigator tab bawah bahan dan navigator tab bawah saja. 47 00:03:45,290 --> 00:03:51,330 Argumen kedua ini kami sampaikan, objek ini kami sampaikan sebagai argumen kedua saat Anda pelajari memungkinkan 48 00:03:51,330 --> 00:03:56,730 kami untuk mengonfigurasi tab navigator itu sendiri, misalnya mengatur opsi tab bar seperti warna warna 49 00:03:56,990 --> 00:04:05,480 aktif dan yang sedikit berbeda karena untuk bahan navigator tab bawah bahan , kami tidak mengatur opsi bilah tab untuk mengonfigurasi warna rona 50 00:04:05,480 --> 00:04:07,950 aktif kami, sebaliknya kami langsung memiliki warna 51 00:04:07,970 --> 00:04:14,530 rona aktif di sini di objek ini sendiri, pada navigator tab bawah, kami memiliki ini di objek bersarang, 52 00:04:14,570 --> 00:04:17,330 di opsi bilah tab , kami tidak 53 00:04:17,330 --> 00:04:18,950 memilikinya di sini. 54 00:04:18,950 --> 00:04:24,590 Alih-alih di sini, kami hanya mengatur warna warna aktif seperti itu untuk warna aksen warna dan ada pengaturan 55 00:04:24,590 --> 00:04:29,660 lain juga, misalnya Anda dapat mengatur pengalihan ke true dan saya akan menunjukkan apa yang 56 00:04:29,660 --> 00:04:30,800 dilakukan dan apa 57 00:04:30,890 --> 00:04:39,550 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 58 00:04:39,550 --> 00:04:42,980 kembali di layar dan kita memiliki tab yang sama seperti 59 00:04:42,980 --> 00:04:43,550 sebelumnya 60 00:04:43,550 --> 00:04:45,140 di iOS, yang tidak 61 00:04:45,140 --> 00:04:48,440 berubah tetapi di Android, kita sekarang memiliki lebih banyak 62 00:04:48,500 --> 00:04:53,200 navigator tab cari bahan di sini di mana kita dapat sekarang juga beralih seperti 63 00:04:53,240 --> 00:04:59,270 ini dan itulah efek pergeseran yang Anda lihat di sini, bahwa tab tumbuh, bahwa label hanya ada pada 64 00:04:59,270 --> 00:05:00,740 tab yang aktif dan 65 00:05:00,860 --> 00:05:05,990 jika Anda mengatur menggeser ke false di sini, Anda tidak punya ini efek, maka Anda 66 00:05:05,990 --> 00:05:08,390 selalu memiliki label Anda di Android juga. 67 00:05:08,390 --> 00:05:12,490 Jadi itu sekarang tampilan yang sedikit lebih mirip Android yang 68 00:05:12,650 --> 00:05:19,990 akan saya katakan dan karena itu tampilan yang ingin saya miliki di sini dan Anda dapat mengambil ini lebih jauh. 69 00:05:20,070 --> 00:05:23,690 Katakanlah kita ingin mengubah seluruh warna latar belakang bilah tab 70 00:05:23,830 --> 00:05:25,150 di sini tergantung 71 00:05:25,320 --> 00:05:30,800 pada tab mana yang dipilih dan memiliki efek riak yang bagus yang mengubah ini sepanjang jalan. 72 00:05:31,110 --> 00:05:36,360 Untuk ini, kita bisa pergi ke konfigurasi layar kita dan di sana ke opsi navigasi dan di sana, kita 73 00:05:36,360 --> 00:05:37,780 memiliki ikon bilah tab. 74 00:05:37,800 --> 00:05:42,760 Kami juga dapat mengatur warna bilah tab di sini saat tab ini dipilih sehingga 75 00:05:42,810 --> 00:05:51,160 untuk mengatakan dan misalnya mengatur ini ke warna warna primer dan sekarang penting, ini hanya memiliki efek jika Anda menetapkan pergeseran ke true, 76 00:05:51,200 --> 00:05:58,850 jika tidak, warna bar tab ini akan mendukung yang saya siapkan di sini tidak akan berpengaruh karena hanya efek pergeseran yang 77 00:05:58,850 --> 00:06:05,390 mendukung ini dan apa yang akan kita miliki sekarang, efek yang akan kita miliki sekarang adalah bahwa jika 78 00:06:06,640 --> 00:06:12,810 saya menyimpan ini, dapatkan tampilan yang sama di iOS karena ada bilah tab warna tidak berpengaruh tetapi 79 00:06:13,030 --> 00:06:17,770 sekarang Anda lihat, kami benar-benar memiliki warna utama kami sebagai latar belakang jika 80 00:06:17,770 --> 00:06:21,980 makanan dipilih, jika kami memilih favorit, yang berubah menjadi warna lain. 81 00:06:22,030 --> 00:06:27,940 Sekarang perubahan ini tentu saja tidak terlihat seindah itu dan oleh karena itu, kita dapat dengan mudah mengubahnya dengan 82 00:06:27,940 --> 00:06:30,950 juga memberikan layar favorit kita warna tab bar sendiri. 83 00:06:30,970 --> 00:06:36,430 Jadi di sana kita bisa mengatakan dalam opsi navigasi layar favorit di sebelah ikon bilah tab, 84 00:06:36,900 --> 00:06:44,340 kita mengatur warna bilah tab di sana untuk aksen warna dan apa yang sekarang kita miliki adalah bilah tab berwarna berbeda yang beralih 85 00:06:44,340 --> 00:06:51,250 dari warna utama kita untuk makan di sini untuk warna aksen ini untuk favorit dengan efek riak yang bagus ini dan 86 00:06:51,250 --> 00:06:56,910 tentu saja downside adalah bahwa kita tidak melihat ikon itu karena warna aksen untuk warna bilah tab 87 00:06:56,910 --> 00:06:57,740 bukan pilihan 88 00:06:57,750 --> 00:07:01,020 yang baik jika warna warna kita juga merupakan warna aksen. 89 00:07:01,020 --> 00:07:06,270 Jadi jika kita menggunakan efek ini, kita mungkin ingin menggunakan putih di sini sebagai warna warna yang 90 00:07:06,270 --> 00:07:13,020 selalu bisa kita lihat terhadap warna primer dan aksen dan karena itu di sini untuk warna warna aktif, kita mungkin ingin menggunakan 91 00:07:13,020 --> 00:07:18,750 putih sebagai ganti aksen kita. warna karena putih akan bekerja untuk kedua tab maka tidak masalah jika bilah tab 92 00:07:18,750 --> 00:07:24,540 kemudian diwarnai dalam warna primer, ungu tua atau warna aksen, oranye dan karenanya sekarang Anda melihat kami memiliki efek 93 00:07:24,540 --> 00:07:26,640 ini di sini dan riak yang 94 00:07:26,640 --> 00:07:32,610 bagus ini berubah menjadi tab lain di sini untuk favorit. Dan saya pikir itu perubahan yang cukup manis 95 00:07:32,730 --> 00:07:39,120 dan mudah diterapkan yang membuat ini terlihat hebat di Android dan tentu saja memberi kita tampilan yang 96 00:07:39,240 --> 00:07:45,660 lebih mirip Android sambil mempertahankan tampilan iOS default yang Anda harapkan pada platform itu, sangat mudah untuk 97 00:07:45,660 --> 00:07:47,730 diterapkan saat Anda bisa tahu. 98 00:07:47,820 --> 00:07:52,700 Sekarang catatan singkat, jika Anda tidak ingin menggunakan efek pergeseran ini yang 99 00:07:52,710 --> 00:07:58,020 ingin saya gunakan di sini tetapi jika Anda tidak ingin menggunakannya, maka tentu saja Anda 100 00:07:58,020 --> 00:08:06,350 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. 101 00:08:06,360 --> 00:08:09,060 Sekarang biasanya, Anda mungkin ingin mengubah ini juga dan 102 00:08:09,060 --> 00:08:12,060 seperti yang Anda lihat, warna tab bar tidak memiliki efek, 103 00:08:12,060 --> 00:08:14,080 ini hanya bekerja dengan menggeser. 104 00:08:14,310 --> 00:08:21,330 Sekarang jika Anda ingin mengubah warna latar belakang untuk seluruh bilah tab dalam wadah yang tidak bergeser, 105 00:08:21,330 --> 00:08:29,570 maka yang harus Anda lakukan adalah di sini pada konfigurasi navigator tab Anda sendiri karena itu memengaruhi seluruh bilah tab 106 00:08:29,570 --> 00:08:30,410 sekarang, 107 00:08:30,410 --> 00:08:36,980 Anda dapat mengatur properti gaya bar dan itu hanyalah objek gaya di mana Anda dapat, misalnya, 108 00:08:36,980 --> 00:08:43,240 mengatur warna latar belakang ke warna-warna primer, seperti ini dan ini hanya mengubah warna latar 109 00:08:43,240 --> 00:08:47,180 belakang bilah navigasi untuk bilah bawah Android kami di sini. 110 00:08:47,180 --> 00:08:52,750 Jadi begitulah cara Anda dapat mengubah ini jika Anda tidak ingin menggunakan pola pergeseran di sini, 111 00:08:52,790 --> 00:08:53,860 tampilan bergeser. 112 00:08:54,080 --> 00:08:56,000 Saya akan mengaktifkan shifting lagi, kita 113 00:08:56,010 --> 00:09:01,370 akan mengatur ini menjadi benar lagi karena saya sangat suka bar tab berwarna berbeda ini, saya 114 00:09:01,370 --> 00:09:07,100 pikir itu terlihat sangat bagus dengan efek riak yang mengubah warna dan betapa mudahnya untuk mengimplementasikan yang 115 00:09:07,130 --> 00:09:08,660 berbeda bilah tab. 116 00:09:08,660 --> 00:09:13,820 Sekarang lagi, ada banyak opsi konfigurasi baik untuk bilah tab itu sendiri maupun untuk opsi navigasi layar yang Anda miliki 117 00:09:13,820 --> 00:09:18,590 di dalam bilah tab Anda dan oleh karena itu Anda menemukan Anda dokumen resmi terlampir di mana Anda 118 00:09:18,590 --> 00:09:22,490 dapat menyelam ke setiap opsi tunggal dan menjelajahi mereka dan bermain-main dengan mereka.