1 00:00:02,250 --> 00:00:07,590 Menambahkan tombol ke header seperti yang saya inginkan di sini, seperti tombol navigasi, memerlukan 2 00:00:07,590 --> 00:00:11,670 sedikit kerja ekstra pada awalnya tetapi setelah itu sangat mudah. 3 00:00:11,700 --> 00:00:17,160 Pertama-tama kita perlu menginstal paket tambahan untuk membuatnya lebih mudah karena secara teoritis, Anda memiliki banyak 4 00:00:17,160 --> 00:00:18,540 daya di sini. 5 00:00:18,660 --> 00:00:21,690 Anda dapat menambahkan tombol seperti itu dengan bantuan opsi 6 00:00:21,690 --> 00:00:27,450 navigasi, jadi di sini di MealDetailScreen, di samping mengatur judul header, Anda dapat mengatur headerLeft dan headerRight untuk 7 00:00:27,450 --> 00:00:30,330 menambahkan tombol di sebelah kiri dan kanan judul. 8 00:00:30,330 --> 00:00:36,330 Biasanya Anda ingin menggunakan kanan karena kiri dicadangkan untuk tombol kembali dan umumnya, Anda cukup mengembalikan 9 00:00:36,330 --> 00:00:39,310 elemen jsx di sana, jadi Anda bisa 10 00:00:39,450 --> 00:00:47,220 mengatur ini ke teks, seperti favorit, itu adalah sesuatu yang bisa Anda lakukan di sini dan sebenarnya biarkan saya perlihatkan ini 11 00:00:47,220 --> 00:00:51,870 kepada Anda dan karena itu restart server sebelum kami menggunakan paket karena 12 00:00:51,870 --> 00:00:58,890 sementara Anda bisa menambahkan komponen di sini, mendapatkan styling yang tepat, penentuan posisi yang tepat untuk semua platform yang 13 00:00:58,950 --> 00:01:05,430 berbeda, terutama jika Anda tidak hanya menggunakan teks di sini tetapi juga mungkin ikon yang biasanya ingin 14 00:01:05,430 --> 00:01:11,160 Anda miliki di sana, itu bisa sangat rumit dan itulah sebabnya kami akan menginstal paket 15 00:01:11,160 --> 00:01:14,810 tambahan yang membuat cara itu lebih mudah daripada sebelumnya. 16 00:01:18,260 --> 00:01:25,510 Jadi izinkan saya memulai kembali ini dengan mulai npm, bukan menginstal npm, mulai npm dan dengan itu berjalan 17 00:01:25,850 --> 00:01:34,320 lagi, mari memuat ulang ini di iOS dan biarkan saya menunjukkan kepada Anda apa yang kita miliki di sini sekarang saya membuat teks. 18 00:01:34,520 --> 00:01:35,930 Anda melihat teks ini 19 00:01:35,960 --> 00:01:37,180 di sini, jadi 20 00:01:37,190 --> 00:01:43,010 ini diterjemahkan, tetapi seperti yang saya katakan, memiliki bantalan yang tepat, perataan yang tepat, gaya yang tepat, ukuran yang 21 00:01:43,010 --> 00:01:47,870 tepat, sangat mengganggu jika Anda melakukan semuanya sendiri karena Anda tidak hanya melakukan ini untuk satu 22 00:01:47,870 --> 00:01:49,300 perangkat tetapi untuk banyak perangkat. 23 00:01:49,370 --> 00:01:54,320 Itu sebabnya kami akan menginstal paket khusus di sini yang membantu kami dalam hal ini. 24 00:01:54,320 --> 00:02:01,250 Jadi keluar dari proses untuk saat ini, proses dev yang sedang berjalan dan gunakan 25 00:02:01,250 --> 00:02:10,130 npm install - simpan dan instal paket react-navigation-header-buttons yang merupakan paket yang membantu Anda, anehnya jika Anda 26 00:02:10,310 --> 00:02:16,220 melihat namanya, dengan mengatur beberapa tombol di tajuk Anda, jadi di 27 00:02:16,280 --> 00:02:24,850 bilah alat teratas di sini. Ini adalah paket yang kemudian akan membuatnya sangat mudah untuk menambahkan tombol-tombol tersebut. Dengan itu ditambahkan, saya akan me-restart server pengembangan 28 00:02:24,850 --> 00:02:30,490 saya dengan mulai npm dan sekarang saya akan membuat sendiri komponen pembantu di folder komponen yang saya 29 00:02:30,490 --> 00:02:37,290 akan beri nama helper, tombol header, bukan helper, tombol header. Di sana, saya akan mengimpor 30 00:02:37,300 --> 00:02:44,210 Bereaksi dari Bereaksi karena ini akan menjadi komponen Bereaksi normal yang kita 31 00:02:44,570 --> 00:02:51,980 buat di sana dan mengimpor sesuatu dari paket tombol reaksi-navigasi-header-baru ini yang baru saja 32 00:02:51,980 --> 00:03:02,650 kita instal dan sesuatu yang saya impor adalah tombol header. Selain itu, mari kita juga mengimpor sesuatu dari @ expo / vector-icons yang 33 00:03:02,680 --> 00:03:08,830 seharusnya tersedia tetapi hanya untuk menjadi super aman, Anda pasti dapat menjalankan npm install - save 34 00:03:08,830 --> 00:03:16,270 @ expo / vector-icons untuk menginstal paket ini juga karena Anda Saya akan membutuhkannya dan hal yang perlu kami 35 00:03:19,050 --> 00:03:24,630 impor dari paket itu adalah ionicons. Tentu saja, Anda dapat menggunakan set ikon yang 36 00:03:24,630 --> 00:03:30,270 Anda inginkan, saya membahas ikon sebelumnya dalam kursus ini dan Anda bebas untuk menggunakan ikon yang Anda inginkan 37 00:03:30,270 --> 00:03:35,250 pada tombol header Anda, saya hanya akan bekerja dengan ionicons karena saya menggunakannya di sisa kursus 38 00:03:35,460 --> 00:03:40,440 ini juga tetapi sekali lagi, Anda dapat menggunakan ikon yang Anda inginkan dan tentu saja 39 00:03:40,440 --> 00:03:45,900 di header, Anda tidak harus menggunakan ikon, Anda dapat menggunakan teks lain juga tetapi biasanya, Anda menggunakan ikon 40 00:03:45,900 --> 00:03:49,470 tentu saja, itulah yang pengguna biasanya digunakan untuk dari aplikasi lain. 41 00:03:49,740 --> 00:03:58,040 Selain itu, saya juga akan mengimpor warna dari konstanta / Warna dan sekarang membuat komponen saya di sini dan itulah, katakanlah, tombol tajuk khusus 42 00:03:58,070 --> 00:04:04,850 atau hanya tombol tajuk, apa pun yang Anda ingin beri nama, tetapi kami sudah mengimpor ini, jadi kami harus 43 00:04:05,030 --> 00:04:09,290 memilih nama yang berbeda di sini untuk tidak memiliki bentrokan nama dan 44 00:04:09,650 --> 00:04:17,390 ini akan menerima beberapa alat peraga dan akan mengembalikan tombol tajuk yang kami dapatkan dari paket ini yang kami instal tetapi kami 45 00:04:17,390 --> 00:04:22,280 akan segera menambahkan beberapa konfigurasi tambahan itulah sebabnya saya membungkus ini dalam komponen terpisah 46 00:04:22,280 --> 00:04:27,800 sehingga kami tidak perlu mengulangi konfigurasi itu untuk setiap tombol yang kami gunakan di mana saja 47 00:04:27,800 --> 00:04:28,990 di aplikasi 48 00:04:29,140 --> 00:04:33,250 dan tentu saja, saya akan mengekspor tombol tajuk ubahsuaian default saya. 49 00:04:33,340 --> 00:04:39,850 Jadi sekarang tombol tajuk yang saya gunakan di sini dari paket yang kami instal ini, yang pertama-tama akan menerima semua alat 50 00:04:39,850 --> 00:04:45,790 peraga yang kami dapatkan dengan trik kecil yang bagus ini dapat kami gunakan di Bereaksi di mana kami meneruskan 51 00:04:45,790 --> 00:04:51,700 semua alat peraga dengan pintasan ini dengan menarik semua pasangan kunci-nilai dan meneruskannya ke objek ini yang merupakan 52 00:04:51,700 --> 00:04:53,060 komponen ini pada akhirnya. 53 00:04:53,110 --> 00:04:56,790 Jadi itu hal pertama, kita perlu meneruskan semua alat peraga dan itu sangat 54 00:04:56,800 --> 00:04:57,670 penting, jangan 55 00:04:57,670 --> 00:05:00,470 lupa ini kalau tidak itu tidak akan berfungsi dengan benar. 56 00:05:00,490 --> 00:05:07,540 Langkah kedua adalah bahwa kita menambahkan prop komponen Icon dengan modal I, itu adalah prop tombol header yang kita dapatkan dari paket 57 00:05:07,540 --> 00:05:13,580 ini diharapkan dan di sana saya melewati ionicons. Jadi ini mengharapkan paket ikon 58 00:05:13,580 --> 00:05:20,730 vektor yang dapat digunakan untuk rendering ikon, tidak harus ionikon tetapi harus dari salah satu @ 59 00:05:20,730 --> 00:05:27,800 expo / vektor-ikon atau dari paket ikon ikon Asli Bereaksi yang mendasari di mana paket 60 00:05:27,800 --> 00:05:34,850 expo didasarkan dan Anda juga dapat menguraikan dalam ukuran ikon dan saya akan membakukan ini 61 00:05:34,850 --> 00:05:40,370 sehingga semua tombol header saya di seluruh aplikasi memiliki ukuran yang sama 62 00:05:40,370 --> 00:05:48,470 yaitu 23 yang saya temukan bekerja dengan cukup baik. Last but not least, saya juga akan mengatur warna di sini dan 63 00:05:49,160 --> 00:05:59,360 saya akan menggunakan warna utama saya, meskipun tentu saja kita harus memastikan bahwa kita membedakan berdasarkan platform. Jadi saya juga akan mengimpor platform dari React Native karena di Android, 64 00:05:59,390 --> 00:06:06,210 header kami akan memiliki warna primer sebagai latar belakang, jadi di sana kami ingin menggunakan 65 00:06:06,210 --> 00:06:08,000 ikon warna putih. 66 00:06:08,150 --> 00:06:15,320 Jadi di sini, saya akan memeriksa platform. os, jika itu sama dengan Android, maka saya ingin menggunakan putih di sini 67 00:06:15,360 --> 00:06:18,350 dan hanya jika itu iOS, saya ingin menggunakan warna primer. 68 00:06:18,470 --> 00:06:21,020 Jadi sekarang kita memiliki tombol header yang telah 69 00:06:21,020 --> 00:06:26,840 dikonfigurasikan, sekarang kita dapat menggunakannya di tempat itu, di komponen tempat kita ingin menambahkannya ke header kita dan 70 00:06:26,840 --> 00:06:31,030 itulah MealDetailScreen dalam kasus ini. Di sana, kita sekarang perlu 71 00:06:31,120 --> 00:06:34,520 mengimpor sesuatu yang lain dari paket yang baru diinstal, jadi 72 00:06:34,720 --> 00:06:41,140 dari tombol reaksi-navigasi-tajuk, dari paket ini, di sini kita harus menginstal atau mengimpor tombol tajuk, jadi bukan tombol tajuk 73 00:06:41,140 --> 00:06:47,710 yang kita gunakan di file lain tapi tombol tajuk, jamak. Kami menambahkan ini di sini karena 74 00:06:47,770 --> 00:06:53,650 sekarang di sana di mana kami mengatur opsi navigasi untuk komponen ini, daripada 75 00:06:53,650 --> 00:06:58,200 menggunakan komponen teks kami di sana, saya ingin menggunakan tombol tajuk, 76 00:06:58,250 --> 00:07:04,940 komponen ini saya hanya menambahkan impor untuk dan membungkus ini di sekitar elemen lain yang kami 77 00:07:04,960 --> 00:07:11,940 miliki untuk mengimpor dari tombol reaksi-navigasi-header-dan itu item. Item adalah komponen lain yang kita impor 78 00:07:12,090 --> 00:07:16,710 yang sekarang dapat kita gunakan antara tag pembuka dan 79 00:07:16,710 --> 00:07:26,600 penutup tombol header, jadi di sini kita menambahkan item dan item adalah komponen penutupan sendiri di mana kita menggambarkan ikon yang 80 00:07:26,600 --> 00:07:31,970 ingin kita render pada akhirnya. Kita juga dapat memberikan judul ini yang akan diberikan 81 00:07:32,000 --> 00:07:35,170 sebagai fallback dan saya akan memberi nama favorit ini tetapi 82 00:07:35,180 --> 00:07:37,670 kita biasanya tidak akan melihat ini, sebaliknya di 83 00:07:37,670 --> 00:07:46,280 sini saya juga dapat mengatur nama ikon dan sekarang ini seharusnya, misalnya ios- bintang yang merupakan ikon ionikon yang valid dan Anda dapat mencari daftar @ expo / vektor-ikon 84 00:07:46,280 --> 00:07:51,440 yang saya tunjukkan sebelumnya dalam kursus yang juga Anda temukan terlampir pada video ini untuk kemungkinan ikon 85 00:07:51,440 --> 00:07:53,570 yang dapat Anda gunakan di sini. 86 00:07:53,570 --> 00:07:59,540 Pastikan Anda menggunakan ikon dari ikon yang Anda gunakan di tombol tajuk, jadi 87 00:07:59,540 --> 00:08:01,990 dalam kasus saya, dari ionicon. 88 00:08:02,000 --> 00:08:03,830 Sekarang ini menunjukkan ikon mana 89 00:08:03,830 --> 00:08:09,680 yang digunakan, sekarang di sini kita juga dapat menambahkan onPress untuk mendaftarkan fungsi yang harus dipicu ketika ikon itu 90 00:08:09,680 --> 00:08:12,570 ditekan atau ketika item di header ditekan dan untuk 91 00:08:12,650 --> 00:08:19,220 sekarang saya hanya akan mengatakan tandai sebagai favorit di sini, catat ini di konsol sehingga kita dapat melihat bahwa ini berhasil. 92 00:08:19,220 --> 00:08:22,720 Kami belum sepenuhnya berada di sana karena kami tidak menggunakan tombol 93 00:08:22,730 --> 00:08:25,870 tajuk khusus kami, itulah bagian yang terakhir hilang. 94 00:08:26,000 --> 00:08:28,370 Kita perlu mengimpor komponen yang kita 95 00:08:28,430 --> 00:08:35,120 buat ini, jadi impor tombol tajuk dari komponen dan kemudian di sana, dari tombol tajuk, itulah tombol 96 00:08:35,120 --> 00:08:42,740 yang kita kerjakan dan kita meneruskan ini ke tombol tajuk di sini karena ini mengharapkan penyangga komponen tombol tajuk tempat 97 00:08:42,740 --> 00:08:47,870 kita menunjuk pada komponen yang harus digunakan untuk membuat item ini pada akhirnya. 98 00:08:47,870 --> 00:08:52,220 Sekarang ini semua sangat kompleks seperti yang Anda tahu, banyak komponen bersarang, ini hanya 99 00:08:52,220 --> 00:08:57,500 setup yang sedikit rumit saat pertama kali Anda melakukannya tetapi ketika Anda kemudian menggunakannya di komponen lain, 100 00:08:57,500 --> 00:09:01,790 itu benar-benar hanya tentang menyalin pengaturan yang sama di sini, mengubah judul, mengubah ikon 101 00:09:01,790 --> 00:09:05,860 dan mengubah logika dan Anda di sana, jadi itu yang harus Anda lakukan 102 00:09:05,870 --> 00:09:07,970 di masa depan, itu hanya pengaturan 103 00:09:08,000 --> 00:09:12,740 awal yang beberapa pekerjaan tambahan di sini. Namun dengan semua pengaturan itu, jika 104 00:09:12,740 --> 00:09:14,540 kita sekarang menyimpan ini, 105 00:09:19,710 --> 00:09:25,770 kita seharusnya dapat melihat bintang kita di sini. Ini adalah ikon yang kita lihat dan kita dapat menekan 106 00:09:25,770 --> 00:09:35,290 ini dan ketika saya menekan ini, Anda akan melihat tanda sebagai favorit sedang login di sini di konsol. Mari kita lihat juga di Android, di sana kita selalu memiliki 107 00:09:35,300 --> 00:09:40,150 bintang dan jika saya menekan bintang ini di sini, kita juga 108 00:09:40,160 --> 00:09:47,100 melihat tanda sebagai favorit, jadi itu berfungsi. Sedikit catatan yang baru saja saya lihat jika kita memiliki beberapa resep, kita mungkin menginginkan beberapa gaya tambahan di sana, 109 00:09:47,100 --> 00:09:52,470 sama sekali tidak terkait dengan tombol tajuk, hanya melihatnya. Jadi di MealItem. File js, pada item makanan, 110 00:09:52,470 --> 00:09:56,460 saya akan benar-benar menambahkan beberapa margin vertikal 10, sekali lagi, sama sekali bukan 111 00:09:56,520 --> 00:10:02,520 sesuatu yang Anda butuhkan di sini, hanya di sana untuk memastikan bahwa ini terlihat lebih baik jika kita memiliki beberapa 112 00:10:02,520 --> 00:10:03,050 item. 113 00:10:03,060 --> 00:10:08,670 Yang penting di sini tentu saja adalah bahwa kita memiliki tombol tajuk kami, ikon ini dan ini adalah bagaimana 114 00:10:09,180 --> 00:10:13,100 Anda dapat menambahkan tombol atau item ikon di sini ke tajuk Anda dan 115 00:10:13,170 --> 00:10:18,570 tentu saja, Anda dapat menambahkan lebih dari satu. Di sini, di layar detail makanan, Anda dapat 116 00:10:18,600 --> 00:10:24,770 memiliki beberapa item seperti itu di antara tombol-tombol tajuk di sini yang Anda atur di headerRight pada opsi navigasi. 117 00:10:24,850 --> 00:10:26,220 Ini adalah bagaimana Anda 118 00:10:26,220 --> 00:10:33,750 menambahkan item di sini, Anda dapat memiliki lebih dari satu, misalnya di sini kita juga dapat memiliki ios-star-outline yang merupakan ikon lain yang terlihat sedikit 119 00:10:33,750 --> 00:10:37,260 berbeda sehingga kita dapat melihat perbedaannya di sini, sekarang kita memiliki 120 00:10:37,260 --> 00:10:38,630 dua di sini . 121 00:10:38,790 --> 00:10:45,600 Jadi itu mungkin, tentu saja Anda tidak boleh kelebihan ini sehingga UI Anda tetap bersih dan hanya berfungsi tetapi ini 122 00:10:46,710 --> 00:10:55,010 adalah bagaimana Anda dapat menambahkan ikon di sini ke layar Anda. Ngomong-ngomong, peringatan yang saya dapatkan di sini mengenai kunci ganda, judul di 123 00:10:55,010 --> 00:10:59,910 sini juga digunakan sebagai kunci untuk item Anda, jadi jika Anda memiliki beberapa item, 124 00:10:59,930 --> 00:11:03,350 Anda tidak boleh menggunakan judul yang sama tetapi saya 125 00:11:03,350 --> 00:11:08,640 hanya menambahkan ini untuk Tujuan demonstrasi, jadi saya hanya akan menyingkirkannya dan kami baik-baik saja. 126 00:11:08,810 --> 00:11:12,290 Sekarang ikon bintang kita belum melakukan apa-apa, itu adalah sesuatu yang 127 00:11:12,320 --> 00:11:17,660 akan kita tambahkan nanti tapi setidaknya kita melihatnya dan itu sangat penting dalam modul tempat kita 128 00:11:17,660 --> 00:11:20,300 berbicara tentang navigasi dan bekerja dengan header.