Sekarang Anda telah belajar bagaimana Anda dapat menambahkan font ke aplikasi dan melampirkan, Anda akan menemukan file zip dengan font
yang ingin saya tambahkan. Untuk itu di folder
assets, saya akan menambahkan folder font baru dan kemudian OpenSans-Bold dan reguler. File ttf yang ada dalam file zip Anda temukan
terlampir yang ingin saya tambahkan di sini.
Sekarang menambahkan file saja tidak akan berbuat banyak seperti yang Anda tahu, sebagai gantinya
kita harus memuat font ini dan kami melakukannya di app. File js yang merupakan file awal kami
yang memulai seluruh aplikasi. Di sana, kami
perlu mengimpor semuanya sebagai font dari expo-font dan ini mungkin belum
tersedia di proyek Anda, jadi karena itu Anda mungkin ingin menjalankan npm install
--simpan expo-font untuk
memastikan bahwa itu tersedia, untuk menginstalnya paket dan dengan itu diinstal, Anda dapat mengimpor font
dari sana, seperti itu
dan saya juga ingin mengimpor komponen pemuatan aplikasi dari expo, itu komponen yang akan memperpanjang layar
splash ketika aplikasi dimulai sampai font kami dimuat sehingga kami hanya lihat
sesuatu di layar ketika semua aset kami, dan dalam hal ini
ini adalah font, benar-benar tersedia dan benar-benar ada. Sekarang dengan impor ini ditambahkan, kita dapat menambahkan fungsi di
sini di luar fungsi
komponen kita yang saya akan beri nama mengambil font dan ini adalah
fungsi yang pada akhirnya akan menggunakan font, jadi apa yang saya impor di sini, muat async dan kemudian kita lewat sebuah objek
tempat kami menggambarkan data yang ingin kami muat dan itulah font sans terbuka yang akan saya daftarkan di bawah sans
terbuka, kami menambahkan ini dengan meminta ini dari. / assets / fonts / OpenSans, tidak dicetak tebal tetapi teratur. ttf dan kemudian, kita memiliki open-sans-bold,
itulah font lain yang ingin saya daftarkan, dengan mewajibkannya dari aset / font
/ OpenSans-Bold. ttf, seperti ini.
Sekarang kita perlu mengembalikan ini karena memuat async mengembalikan janji dan saya ingin mengembalikan ini dalam fungsi font
fetch saya karena dengan ini, kita dapat menggunakannya bersama-sama dengan komponen pemuatan aplikasi dan itu adalah pola yang
Anda pelajari sebelumnya dalam kursus.
Jadi jika ini adalah
hal baru bagi Anda, pastikan Anda membaca bagian lain dari kursus ini terlebih dahulu.
Jadi sekarang kita dapat menggunakan fetch font dengan memuat aplikasi dan kita melakukan ini di dalam komponen
aplikasi kita, di sana, saya akan mengelola beberapa negara dan saya melakukan ini dengan bantuan hook useState
yang kita impor dari Bereaksi dan saya akan beri nama ini menyatakan font dimuat dan mengatur font dimuat dan panggil useState dan awalnya, itu
salah karena pada awalnya, font
belum dimuat dan kemudian di sini, kita dapat memeriksa apakah font belum dimuat yang
merupakan kasus awal, maka saya ingin kembali komponen pemuatan aplikasi alih-alih konten aplikasi normal saya karena dalam komponen
pemuatan aplikasi, kita dapat menambahkan properti async awal dan menunjuk pada mengambil font yang memulai fungsi pengambilan font
ini dan setelah ini selesai, fungsi yang kita lewati untuk onFinish akan dipanggil dan dalam fungsi ini,
saya hanya akan mengatur font dimuat ke true, seperti ini. Jadi ini memastikan bahwa kita tetap membuka splash screen sampai
font kita dimuat dan ini akan dirender sampai kita memuat ulang font kita dan setelah
itu, kita malah akan memuat konten ini. Sekarang dengan itu, kami memastikan bahwa kami mengimpor font kami dan bahwa kami
dapat mulai menggunakannya dan kami akan membutuhkannya di seluruh modul ini.
Dengan itu, sekarang saatnya untuk memulai dengan benar-benar menambahkan untuk apa kita semua datang, navigasi.