Menambahkan tombol ke header seperti yang saya inginkan di sini, seperti tombol navigasi, memerlukan
sedikit kerja ekstra pada awalnya tetapi setelah itu sangat mudah.
Pertama-tama kita perlu menginstal paket tambahan untuk membuatnya lebih mudah karena secara teoritis, Anda memiliki banyak
daya di sini.
Anda dapat menambahkan tombol seperti itu dengan bantuan opsi
navigasi, jadi di sini di MealDetailScreen, di samping mengatur judul header, Anda dapat mengatur headerLeft dan headerRight untuk
menambahkan tombol di sebelah kiri dan kanan judul.
Biasanya Anda ingin menggunakan kanan karena kiri dicadangkan untuk tombol kembali dan umumnya, Anda cukup mengembalikan
elemen jsx di sana, jadi Anda bisa
mengatur ini ke teks, seperti favorit, itu adalah sesuatu yang bisa Anda lakukan di sini dan sebenarnya biarkan saya perlihatkan ini
kepada Anda dan karena itu restart server sebelum kami menggunakan paket karena
sementara Anda bisa menambahkan komponen di sini, mendapatkan styling yang tepat, penentuan posisi yang tepat untuk semua platform yang
berbeda, terutama jika Anda tidak hanya menggunakan teks di sini tetapi juga mungkin ikon yang biasanya ingin
Anda miliki di sana, itu bisa sangat rumit dan itulah sebabnya kami akan menginstal paket
tambahan yang membuat cara itu lebih mudah daripada sebelumnya.
Jadi izinkan saya memulai kembali ini dengan mulai npm, bukan menginstal npm, mulai npm dan dengan itu berjalan
lagi, mari memuat ulang ini di iOS dan biarkan saya menunjukkan kepada Anda apa yang kita miliki di sini sekarang saya membuat teks.
Anda melihat teks ini
di sini, jadi
ini diterjemahkan, tetapi seperti yang saya katakan, memiliki bantalan yang tepat, perataan yang tepat, gaya yang tepat, ukuran yang
tepat, sangat mengganggu jika Anda melakukan semuanya sendiri karena Anda tidak hanya melakukan ini untuk satu
perangkat tetapi untuk banyak perangkat.
Itu sebabnya kami akan menginstal paket khusus di sini yang membantu kami dalam hal ini.
Jadi keluar dari proses untuk saat ini, proses dev yang sedang berjalan dan gunakan
npm install - simpan dan instal paket react-navigation-header-buttons yang merupakan paket yang membantu Anda, anehnya jika Anda
melihat namanya, dengan mengatur beberapa tombol di tajuk Anda, jadi di
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
saya dengan mulai npm dan sekarang saya akan membuat sendiri komponen pembantu di folder komponen yang saya
akan beri nama helper, tombol header, bukan helper, tombol header. Di sana, saya akan mengimpor
Bereaksi dari Bereaksi karena ini akan menjadi komponen Bereaksi normal yang kita
buat di sana dan mengimpor sesuatu dari paket tombol reaksi-navigasi-header-baru ini yang baru saja
kita instal dan sesuatu yang saya impor adalah tombol header. Selain itu, mari kita juga mengimpor sesuatu dari @ expo / vector-icons yang
seharusnya tersedia tetapi hanya untuk menjadi super aman, Anda pasti dapat menjalankan npm install - save
@ expo / vector-icons untuk menginstal paket ini juga karena Anda Saya akan membutuhkannya dan hal yang perlu kami
impor dari paket itu adalah ionicons. Tentu saja, Anda dapat menggunakan set ikon yang
Anda inginkan, saya membahas ikon sebelumnya dalam kursus ini dan Anda bebas untuk menggunakan ikon yang Anda inginkan
pada tombol header Anda, saya hanya akan bekerja dengan ionicons karena saya menggunakannya di sisa kursus
ini juga tetapi sekali lagi, Anda dapat menggunakan ikon yang Anda inginkan dan tentu saja
di header, Anda tidak harus menggunakan ikon, Anda dapat menggunakan teks lain juga tetapi biasanya, Anda menggunakan ikon
tentu saja, itulah yang pengguna biasanya digunakan untuk dari aplikasi lain.
Selain itu, saya juga akan mengimpor warna dari konstanta / Warna dan sekarang membuat komponen saya di sini dan itulah, katakanlah, tombol tajuk khusus
atau hanya tombol tajuk, apa pun yang Anda ingin beri nama, tetapi kami sudah mengimpor ini, jadi kami harus
memilih nama yang berbeda di sini untuk tidak memiliki bentrokan nama dan
ini akan menerima beberapa alat peraga dan akan mengembalikan tombol tajuk yang kami dapatkan dari paket ini yang kami instal tetapi kami
akan segera menambahkan beberapa konfigurasi tambahan itulah sebabnya saya membungkus ini dalam komponen terpisah
sehingga kami tidak perlu mengulangi konfigurasi itu untuk setiap tombol yang kami gunakan di mana saja
di aplikasi
dan tentu saja, saya akan mengekspor tombol tajuk ubahsuaian default saya.
Jadi sekarang tombol tajuk yang saya gunakan di sini dari paket yang kami instal ini, yang pertama-tama akan menerima semua alat
peraga yang kami dapatkan dengan trik kecil yang bagus ini dapat kami gunakan di Bereaksi di mana kami meneruskan
semua alat peraga dengan pintasan ini dengan menarik semua pasangan kunci-nilai dan meneruskannya ke objek ini yang merupakan
komponen ini pada akhirnya.
Jadi itu hal pertama, kita perlu meneruskan semua alat peraga dan itu sangat
penting, jangan
lupa ini kalau tidak itu tidak akan berfungsi dengan benar.
Langkah kedua adalah bahwa kita menambahkan prop komponen Icon dengan modal I, itu adalah prop tombol header yang kita dapatkan dari paket
ini diharapkan dan di sana saya melewati ionicons. Jadi ini mengharapkan paket ikon
vektor yang dapat digunakan untuk rendering ikon, tidak harus ionikon tetapi harus dari salah satu @
expo / vektor-ikon atau dari paket ikon ikon Asli Bereaksi yang mendasari di mana paket
expo didasarkan dan Anda juga dapat menguraikan dalam ukuran ikon dan saya akan membakukan ini
sehingga semua tombol header saya di seluruh aplikasi memiliki ukuran yang sama
yaitu 23 yang saya temukan bekerja dengan cukup baik. Last but not least, saya juga akan mengatur warna di sini dan
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,
header kami akan memiliki warna primer sebagai latar belakang, jadi di sana kami ingin menggunakan
ikon warna putih.
Jadi di sini, saya akan memeriksa platform. os, jika itu sama dengan Android, maka saya ingin menggunakan putih di sini
dan hanya jika itu iOS, saya ingin menggunakan warna primer.
Jadi sekarang kita memiliki tombol header yang telah
dikonfigurasikan, sekarang kita dapat menggunakannya di tempat itu, di komponen tempat kita ingin menambahkannya ke header kita dan
itulah MealDetailScreen dalam kasus ini. Di sana, kita sekarang perlu
mengimpor sesuatu yang lain dari paket yang baru diinstal, jadi
dari tombol reaksi-navigasi-tajuk, dari paket ini, di sini kita harus menginstal atau mengimpor tombol tajuk, jadi bukan tombol tajuk
yang kita gunakan di file lain tapi tombol tajuk, jamak. Kami menambahkan ini di sini karena
sekarang di sana di mana kami mengatur opsi navigasi untuk komponen ini, daripada
menggunakan komponen teks kami di sana, saya ingin menggunakan tombol tajuk,
komponen ini saya hanya menambahkan impor untuk dan membungkus ini di sekitar elemen lain yang kami
miliki untuk mengimpor dari tombol reaksi-navigasi-header-dan itu item. Item adalah komponen lain yang kita impor
yang sekarang dapat kita gunakan antara tag pembuka dan
penutup tombol header, jadi di sini kita menambahkan item dan item adalah komponen penutupan sendiri di mana kita menggambarkan ikon yang
ingin kita render pada akhirnya. Kita juga dapat memberikan judul ini yang akan diberikan
sebagai fallback dan saya akan memberi nama favorit ini tetapi
kita biasanya tidak akan melihat ini, sebaliknya di
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
yang saya tunjukkan sebelumnya dalam kursus yang juga Anda temukan terlampir pada video ini untuk kemungkinan ikon
yang dapat Anda gunakan di sini.
Pastikan Anda menggunakan ikon dari ikon yang Anda gunakan di tombol tajuk, jadi
dalam kasus saya, dari ionicon.
Sekarang ini menunjukkan ikon mana
yang digunakan, sekarang di sini kita juga dapat menambahkan onPress untuk mendaftarkan fungsi yang harus dipicu ketika ikon itu
ditekan atau ketika item di header ditekan dan untuk
sekarang saya hanya akan mengatakan tandai sebagai favorit di sini, catat ini di konsol sehingga kita dapat melihat bahwa ini berhasil.
Kami belum sepenuhnya berada di sana karena kami tidak menggunakan tombol
tajuk khusus kami, itulah bagian yang terakhir hilang.
Kita perlu mengimpor komponen yang kita
buat ini, jadi impor tombol tajuk dari komponen dan kemudian di sana, dari tombol tajuk, itulah tombol
yang kita kerjakan dan kita meneruskan ini ke tombol tajuk di sini karena ini mengharapkan penyangga komponen tombol tajuk tempat
kita menunjuk pada komponen yang harus digunakan untuk membuat item ini pada akhirnya.
Sekarang ini semua sangat kompleks seperti yang Anda tahu, banyak komponen bersarang, ini hanya
setup yang sedikit rumit saat pertama kali Anda melakukannya tetapi ketika Anda kemudian menggunakannya di komponen lain,
itu benar-benar hanya tentang menyalin pengaturan yang sama di sini, mengubah judul, mengubah ikon
dan mengubah logika dan Anda di sana, jadi itu yang harus Anda lakukan
di masa depan, itu hanya pengaturan
awal yang beberapa pekerjaan tambahan di sini. Namun dengan semua pengaturan itu, jika
kita sekarang menyimpan ini,
kita seharusnya dapat melihat bintang kita di sini. Ini adalah ikon yang kita lihat dan kita dapat menekan
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
bintang dan jika saya menekan bintang ini di sini, kita juga
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,
sama sekali tidak terkait dengan tombol tajuk, hanya melihatnya. Jadi di MealItem. File js, pada item makanan,
saya akan benar-benar menambahkan beberapa margin vertikal 10, sekali lagi, sama sekali bukan
sesuatu yang Anda butuhkan di sini, hanya di sana untuk memastikan bahwa ini terlihat lebih baik jika kita memiliki beberapa
item.
Yang penting di sini tentu saja adalah bahwa kita memiliki tombol tajuk kami, ikon ini dan ini adalah bagaimana
Anda dapat menambahkan tombol atau item ikon di sini ke tajuk Anda dan
tentu saja, Anda dapat menambahkan lebih dari satu. Di sini, di layar detail makanan, Anda dapat
memiliki beberapa item seperti itu di antara tombol-tombol tajuk di sini yang Anda atur di headerRight pada opsi navigasi.
Ini adalah bagaimana Anda
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
berbeda sehingga kita dapat melihat perbedaannya di sini, sekarang kita memiliki
dua di sini .
Jadi itu mungkin, tentu saja Anda tidak boleh kelebihan ini sehingga UI Anda tetap bersih dan hanya berfungsi tetapi ini
adalah bagaimana Anda dapat menambahkan ikon di sini ke layar Anda. Ngomong-ngomong, peringatan yang saya dapatkan di sini mengenai kunci ganda, judul di
sini juga digunakan sebagai kunci untuk item Anda, jadi jika Anda memiliki beberapa item,
Anda tidak boleh menggunakan judul yang sama tetapi saya
hanya menambahkan ini untuk Tujuan demonstrasi, jadi saya hanya akan menyingkirkannya dan kami baik-baik saja.
Sekarang ikon bintang kita belum melakukan apa-apa, itu adalah sesuatu yang
akan kita tambahkan nanti tapi setidaknya kita melihatnya dan itu sangat penting dalam modul tempat kita
berbicara tentang navigasi dan bekerja dengan header.