Sekarang kami telah menambahkan font beberapa kali dalam kursus ini, jadi
tidak terlalu baru cara kerjanya. Di folder aset, saya akan menambahkan folder font tetapi sekali lagi, Anda dapat menyimpannya di mana pun Anda inginkan. Terlampir Anda menemukan dua font yang telah
kami gunakan sepanjang kursus, buka tanpa huruf tebal dan
teratur dan sekarang kita harus memuatnya ketika
aplikasi dimulai di aplikasi. file js. Di sana,
Anda sekarang dapat mengimpor sesuatu dari expo dan sesuatu itu adalah komponen pemuatan aplikasi dan Anda juga perlu mengimpor bintang sebagai
font dari font-expo dan untuk memastikan bahwa ini tersedia, jalankan npm install - save
expo-font untuk menginstal ini ke dalam proyek Anda dan memastikan bahwa Anda dapat menggunakannya.
Sekarang ini adalah dua hal yang perlu Anda instal di sana
dan dengan itu diinstal, kita dapat menambahkan fungsi baru di sini, mungkin nama itu mengambil font.
Ini adalah fungsi yang pada akhirnya tidak memerlukan argumen tetapi di sana, saya sekarang dapat memanggil font load async
dan mengembalikannya karena mengembalikan sebuah janji dan mengambil font harus
mengembalikan sebuah janji dan melewati objek Javascript tempat kita memetakan font
yang kita ingin memuat dan kemudian saya akan memiliki open-sans yang saya petakan ke
map saya memerlukan impor di sini tempat saya menunjuk pada folder assets, fonts folder dan open-sans yang biasa dan juga menambahkan open-sans-bold di sini sebagai kunci dan
peta yang membutuhkan / aset / font / open-sans-bold sehingga kedua font tersebut diimpor di sini.
Sekarang mengambil font tentu saja perlu dipanggil dan itu harus dipanggil oleh komponen pemuatan aplikasi
kita, maka kita juga perlu mengimpor status penggunaan dari React, sehingga kita dapat mengontrol
apakah data
telah dimuat atau belum sehingga dalam komponen fungsional di sini, kita dapat memiliki keadaan font kita dimuat dan mengatur font dimuat
dan awalnya dengan status penggunaan, itu salah.
Jika itu benar, saya ingin membuat output ini, karena itu selama
salah, maka tanda seru di sini, saya ingin mengembalikan komponen pemuatan aplikasi yang memperpanjang pemuatan
kami, layar startup kami dan di sana, kami perlu menyediakan mulai async prop ini yang menunjuk pada
fungsi font fetch yang merupakan fungsi yang dieksekusi ketika komponen ini pertama kali
diberikan dan kemudian pada finish yang menjalankan fungsi setelah pemuatan ini dilakukan dan dalam fungsi ini yang akan
dieksekusi, saya akan
menyetel font saya dimuat ke true sehingga kami tidak lagi membuat pemuatan aplikasi tetapi sebaliknya, kami membuat konten ini.
Sekarang font kita dimuat dan sekarang kita dapat menggunakannya dan saya ingin menggunakannya di dua tempat - item produk
saya yang merupakan komponen yang kami render pada tinjauan produk. Di sana tentu saja kami
memiliki beberapa teks, kami memiliki judul kami dan kami memiliki harga kami di sini
dan itu ada di mana pada judul, saya juga ingin mengatur
keluarga font open-sans-bold dan pada harga, saya juga ingin mengatur keluarga font open-sans
dan pada layar detail produk, sama saja. Harganya mungkin harus mendapatkan keluarga font open-sans-bold untuk memiliki gaya yang
berani dan deskripsi hanya akan mendapatkan font open sans.
Nah, itu tidak semua sebenarnya, di navigator toko di navigator utama saya di sini,
di
opsi navigasi default, saya juga ingin menggunakan font itu di header, jadi gaya judul header di sini sebenarnya harus menjadi
objek tempat saya mengatur keluarga font untuk open-sans-bold untuk menggunakan font sans open bold di sana dan gaya judul header
kembali menentukan bagaimana teks belakang yang kita lihat di iOS ditata dan ini juga harus menggunakan
keluarga font open-sans, bukan huruf tebal Versi: kapan. Dengan itu jika kita sekarang menyimpan ini dan ini ulang, kita
dapat melihat font kita sendiri digunakan. Sekarang kita juga melihat bahwa di sini di iOS, judul kita terpotong,
itu adalah sesuatu yang harus kita perbaiki tetapi secara umum, ini sekarang terlihat seperti seharusnya. Sekarang mari kita pastikan bahwa judul
yang terputus sudah diperbaiki dan untuk itu dalam item produk di sini, di mana kita memiliki judul
itu, di sini judul ini mungkin memiliki margin margin dikurangi hanya 2 karena saya masih suka jarak itu dan sekarang 15% dari tinggi
yang kami berikan pada judul dan harga sudah cukup untuk berbagi ini dan oleh
karena itu sekarang ini terlihat seperti seharusnya.
Sekarang kita menggunakan font khusus, kita dapat pergi ke halaman detail, saya akan
mengatakan sekarang saatnya untuk memastikan bahwa kita dapat menambahkan item ke troli dan karena itu kita membuat
ini ke tombol troli berfungsi.