Menambahkan ikon sangat mudah di aplikasi Bereaksi
Asli yang menggunakan expo.
Kita dapat menghilangkan
impor tombol dengan cara,
kita tidak perlu tombol built-in lagi tetapi kembali ke ikon karena ikon dapat ditambahkan dengan mengimpor sesuatu
dari dan sekarang itu adalah @ expo / ikon vektor.
Mungkin sedikit nama paket yang aneh, tetapi hanya
itu saja, itu bagian dari expo toolkit sehingga bisa dikatakan, itu secara otomatis termasuk dalam
proyek React Native
yang Anda buat dengan expo dan di sana Anda dapat mengimpor komponen yang membantu Anda merender ikon dan
komponen yang cukup bagus ada komponen ionikon. Untuk itu, Anda hanya perlu tahu bahwa ada set ikon yang
berbeda yang dimasukkan ke dalam expo atau ke dalam paket ikon vektor ini secara tepat. Ionicons adalah satu set ikon yang dikelola oleh tim
di belakang ion pada akhirnya, jadi ikon yang termasuk dalam set tersebut dikelola oleh tim
ionik itu dan saya benar-benar hanya berbicara tentang ikon di sini,
ini tidak ada hubungannya dengan kami menambahkan sesuatu dari ion ke aplikasi React Native, kami hanya
menggunakan ikon mereka.
Anda juga mendapat kumpulan ikon lain seperti ikon jahat, ikon materi, jadi banyak set ikon yang dapat Anda gunakan
dan tempat yang bagus untuk mempelajari semua ikon yang disertakan dan mendapatkan gambaran umum dari semua ikon yang disertakan
adalah dokumentasi ikon expo resmi yang Anda temukan terlampir pada video ini juga, tautan ke
dokumentasi ini dan di sana Anda tidak hanya dapat mempelajari lebih lanjut tentang cara menggunakannya tetapi Anda juga akan menemukan
tautan itu ke direktori ikon dan itu adalah daftar panjang semua ikon yang disertakan yang dapat Anda gunakan
dan Anda selalu melihat di mana paket ikon ini milik, Anda juga dapat
mencari ikon di sana seperti hapus untuk menemukan semua ikon yang ada hubungannya dengan
menghapus barang-barang dan kemudian Anda melihat bahwa ada sesuatu dari paket ionikon, sesuatu dari materi
paket ikon dan sebagainya.
Sekarang ikon yang saya cari di muka berasal dari paket ionicons.
Jadi di sini, saya akan mengimpor ionik dari @ expo / vektor-ikon dan ini sekarang secara
otomatis adalah komponen yang dapat kita gunakan dalam kode JSX kita
untuk menampilkan ikon dan jika kita akan menggunakan ikon material, itu juga akan menjadi
komponen
hanya untuk mengeluarkan ikon materi tetapi saya ingin menggunakan ikon ionikon, jadi saya akan menggunakan itu dan sekarang saya
akan pergi ke kode jsx dan alih-alih menggunakan yang lebih rendah di sini, saya akan benar-benar menampilkan ionikon semacam itu, ikon semacam
itu di sini di tombol saya dan yang hebat adalah ikon di sini juga dapat bersarang di tombol
kami meskipun apa yang kami hasilkan di sini, alat bantu anak-anak, bukan simpul teks tetapi yang didukung, Anda dapat menampilkan komponen ikon di
komponen teks juga, sehingga akan berfungsi.
Jadi, kembali ke ionikon ini di sini, saat ini saya tidak mengatakan apa-apa
tentang ikon yang ingin saya gunakan dan di sana, ikon yang saya pilih sebelumnya memiliki nama md-remove.
Sekarang Anda memberi tahu React Native dan jenis expo bahwa Anda ingin menggunakan ikon itu dengan menambahkan prop nama di sini di
ionicons dan kemudian ini mengambil string dengan nama ikon yang Anda temukan di direktori itu, kan?
Jadi di sini saya memilih ikon ini di sini yang
ingin saya gunakan, jadi itulah namanya, md-remove yang sekarang kita gunakan di sini.
Jadi itulah nama ikon yang kami tambahkan di sini.
Selanjutnya Anda juga dapat mengatur ukuran ikon dalam piksel dan di sini saya akan pergi dengan 24 untuk memiliki ikon besar yang bagus
dan juga warna ikon ini seharusnya dan di sini, saya akan mengatur ini untuk memiliki warna putih.
Sekarang saya akan menyalinnya dan menggunakan yang sama pada tombol yang lebih besar tetapi tentu saja, ikonnya berbeda,
di
sini saya memilih md-add sebagai ikon dan Anda tentu saja dapat menjelajahi daftar ikon dan memilih ikon yang berbeda jika
Anda ingin dan Anda juga dapat mencoba paket ikon yang berbeda, bukan ionikon atau bahkan
menggunakan dua paket ikon yang berbeda dalam satu dan komponen yang sama.
Anda tidak harus tetap berpegang pada satu paket ikon saja, Anda dapat mencampur dan mencocokkannya seperti yang
Anda inginkan, sehingga kami dapat membuat ionikon di sini dan membuat ikon materi di sini, tetapi
tentu saja Anda harus memastikan bahwa tampilan keseluruhan dari aplikasi Anda membuat merasakan.
Jadi jika Anda mencampurkan ikon terlalu liar, kemungkinan itu tidak akan terlihat bagus, jadi biasanya Anda
ingin tetap menggunakan satu set tetapi Anda tidak harus secara teknis.
Jadi di sini, saya memilih dua ikon ini dan sekarang dengan itu jika kita menyimpan ini, kita memulai permainan baru di sini.
Sekarang kita punya ikon plus dan minus di sini untuk menunjukkan apakah angkanya harus lebih rendah atau lebih tinggi dan
itu cukup bagus menurut saya karena itu memberi kita cara baru untuk membangun antarmuka pengguna karena dengan
ikon, kita benar-benar memiliki alat penting lainnya untuk membangun pengalaman pengguna yang luar biasa.