1 00:00:02,300 --> 00:00:05,320 Menambahkan ikon sangat mudah di aplikasi Bereaksi 2 00:00:05,330 --> 00:00:07,760 Asli yang menggunakan expo. 3 00:00:08,060 --> 00:00:09,670 Kita dapat menghilangkan 4 00:00:09,670 --> 00:00:11,530 impor tombol dengan cara, 5 00:00:11,900 --> 00:00:18,830 kita tidak perlu tombol built-in lagi tetapi kembali ke ikon karena ikon dapat ditambahkan dengan mengimpor sesuatu 6 00:00:18,980 --> 00:00:23,180 dari dan sekarang itu adalah @ expo / ikon vektor. 7 00:00:23,180 --> 00:00:26,410 Mungkin sedikit nama paket yang aneh, tetapi hanya 8 00:00:26,420 --> 00:00:31,910 itu saja, itu bagian dari expo toolkit sehingga bisa dikatakan, itu secara otomatis termasuk dalam 9 00:00:31,910 --> 00:00:33,260 proyek React Native 10 00:00:33,500 --> 00:00:40,250 yang Anda buat dengan expo dan di sana Anda dapat mengimpor komponen yang membantu Anda merender ikon dan 11 00:00:40,250 --> 00:00:45,920 komponen yang cukup bagus ada komponen ionikon. Untuk itu, Anda hanya perlu tahu bahwa ada set ikon yang 12 00:00:45,920 --> 00:00:52,790 berbeda yang dimasukkan ke dalam expo atau ke dalam paket ikon vektor ini secara tepat. Ionicons adalah satu set ikon yang dikelola oleh tim 13 00:00:52,820 --> 00:00:58,490 di belakang ion pada akhirnya, jadi ikon yang termasuk dalam set tersebut dikelola oleh tim 14 00:00:58,490 --> 00:01:02,450 ionik itu dan saya benar-benar hanya berbicara tentang ikon di sini, 15 00:01:02,450 --> 00:01:08,300 ini tidak ada hubungannya dengan kami menambahkan sesuatu dari ion ke aplikasi React Native, kami hanya 16 00:01:08,300 --> 00:01:09,650 menggunakan ikon mereka. 17 00:01:09,650 --> 00:01:16,080 Anda juga mendapat kumpulan ikon lain seperti ikon jahat, ikon materi, jadi banyak set ikon yang dapat Anda gunakan 18 00:01:16,190 --> 00:01:22,520 dan tempat yang bagus untuk mempelajari semua ikon yang disertakan dan mendapatkan gambaran umum dari semua ikon yang disertakan 19 00:01:22,520 --> 00:01:27,680 adalah dokumentasi ikon expo resmi yang Anda temukan terlampir pada video ini juga, tautan ke 20 00:01:27,680 --> 00:01:34,270 dokumentasi ini dan di sana Anda tidak hanya dapat mempelajari lebih lanjut tentang cara menggunakannya tetapi Anda juga akan menemukan 21 00:01:34,270 --> 00:01:40,460 tautan itu ke direktori ikon dan itu adalah daftar panjang semua ikon yang disertakan yang dapat Anda gunakan 22 00:01:40,470 --> 00:01:45,110 dan Anda selalu melihat di mana paket ikon ini milik, Anda juga dapat 23 00:01:45,110 --> 00:01:50,030 mencari ikon di sana seperti hapus untuk menemukan semua ikon yang ada hubungannya dengan 24 00:01:50,030 --> 00:01:55,070 menghapus barang-barang dan kemudian Anda melihat bahwa ada sesuatu dari paket ionikon, sesuatu dari materi 25 00:01:55,070 --> 00:01:56,820 paket ikon dan sebagainya. 26 00:01:57,140 --> 00:02:01,820 Sekarang ikon yang saya cari di muka berasal dari paket ionicons. 27 00:02:01,820 --> 00:02:07,040 Jadi di sini, saya akan mengimpor ionik dari @ expo / vektor-ikon dan ini sekarang secara 28 00:02:07,040 --> 00:02:10,830 otomatis adalah komponen yang dapat kita gunakan dalam kode JSX kita 29 00:02:10,940 --> 00:02:15,820 untuk menampilkan ikon dan jika kita akan menggunakan ikon material, itu juga akan menjadi 30 00:02:15,820 --> 00:02:16,270 komponen 31 00:02:16,340 --> 00:02:22,810 hanya untuk mengeluarkan ikon materi tetapi saya ingin menggunakan ikon ionikon, jadi saya akan menggunakan itu dan sekarang saya 32 00:02:22,810 --> 00:02:30,040 akan pergi ke kode jsx dan alih-alih menggunakan yang lebih rendah di sini, saya akan benar-benar menampilkan ionikon semacam itu, ikon semacam 33 00:02:30,040 --> 00:02:36,250 itu di sini di tombol saya dan yang hebat adalah ikon di sini juga dapat bersarang di tombol 34 00:02:36,250 --> 00:02:43,930 kami meskipun apa yang kami hasilkan di sini, alat bantu anak-anak, bukan simpul teks tetapi yang didukung, Anda dapat menampilkan komponen ikon di 35 00:02:43,930 --> 00:02:46,290 komponen teks juga, sehingga akan berfungsi. 36 00:02:47,140 --> 00:02:51,910 Jadi, kembali ke ionikon ini di sini, saat ini saya tidak mengatakan apa-apa 37 00:02:52,390 --> 00:02:58,400 tentang ikon yang ingin saya gunakan dan di sana, ikon yang saya pilih sebelumnya memiliki nama md-remove. 38 00:02:58,900 --> 00:03:06,430 Sekarang Anda memberi tahu React Native dan jenis expo bahwa Anda ingin menggunakan ikon itu dengan menambahkan prop nama di sini di 39 00:03:06,520 --> 00:03:12,520 ionicons dan kemudian ini mengambil string dengan nama ikon yang Anda temukan di direktori itu, kan? 40 00:03:12,550 --> 00:03:15,970 Jadi di sini saya memilih ikon ini di sini yang 41 00:03:16,000 --> 00:03:20,440 ingin saya gunakan, jadi itulah namanya, md-remove yang sekarang kita gunakan di sini. 42 00:03:20,530 --> 00:03:22,520 Jadi itulah nama ikon yang kami tambahkan di sini. 43 00:03:22,600 --> 00:03:28,660 Selanjutnya Anda juga dapat mengatur ukuran ikon dalam piksel dan di sini saya akan pergi dengan 24 untuk memiliki ikon besar yang bagus 44 00:03:28,660 --> 00:03:33,250 dan juga warna ikon ini seharusnya dan di sini, saya akan mengatur ini untuk memiliki warna putih. 45 00:03:33,280 --> 00:03:38,920 Sekarang saya akan menyalinnya dan menggunakan yang sama pada tombol yang lebih besar tetapi tentu saja, ikonnya berbeda, 46 00:03:38,920 --> 00:03:39,320 di 47 00:03:39,340 --> 00:03:45,580 sini saya memilih md-add sebagai ikon dan Anda tentu saja dapat menjelajahi daftar ikon dan memilih ikon yang berbeda jika 48 00:03:45,610 --> 00:03:50,650 Anda ingin dan Anda juga dapat mencoba paket ikon yang berbeda, bukan ionikon atau bahkan 49 00:03:50,650 --> 00:03:54,830 menggunakan dua paket ikon yang berbeda dalam satu dan komponen yang sama. 50 00:03:54,850 --> 00:03:59,650 Anda tidak harus tetap berpegang pada satu paket ikon saja, Anda dapat mencampur dan mencocokkannya seperti yang 51 00:03:59,650 --> 00:04:04,150 Anda inginkan, sehingga kami dapat membuat ionikon di sini dan membuat ikon materi di sini, tetapi 52 00:04:04,150 --> 00:04:08,350 tentu saja Anda harus memastikan bahwa tampilan keseluruhan dari aplikasi Anda membuat merasakan. 53 00:04:08,350 --> 00:04:13,840 Jadi jika Anda mencampurkan ikon terlalu liar, kemungkinan itu tidak akan terlihat bagus, jadi biasanya Anda 54 00:04:13,840 --> 00:04:18,160 ingin tetap menggunakan satu set tetapi Anda tidak harus secara teknis. 55 00:04:18,190 --> 00:04:23,500 Jadi di sini, saya memilih dua ikon ini dan sekarang dengan itu jika kita menyimpan ini, kita memulai permainan baru di sini. 56 00:04:23,500 --> 00:04:30,190 Sekarang kita punya ikon plus dan minus di sini untuk menunjukkan apakah angkanya harus lebih rendah atau lebih tinggi dan 57 00:04:30,190 --> 00:04:36,100 itu cukup bagus menurut saya karena itu memberi kita cara baru untuk membangun antarmuka pengguna karena dengan 58 00:04:36,430 --> 00:04:41,380 ikon, kita benar-benar memiliki alat penting lainnya untuk membangun pengalaman pengguna yang luar biasa.