Jadi sekarang setelah logika permainan umum bekerja, mari kita lebih fokus pada menyelesaikan gaya itu dan juga
menambahkan font khusus kita sendiri dan gambar kecil yang menyenangkan pada permainan di layar
karena bekerja dengan gambar dan bekerja dengan font khusus adalah hal yang khas di modern pengembangan aplikasi tentu
saja, Anda jarang ingin tetap menggunakan font sistem default dan jarang Anda memiliki aplikasi tanpa gambar.
Jadi karena itu mari kita mulai dengan font khusus dan dalam pameran React Native, menambahkan font sangat sepele.
Di folder proyek Anda, di
folder aset, mari kita buat folder font. Anda dapat menyimpannya di mana saja tetapi
saya suka menyimpannya di folder aset untuk menjaga aset saya seperti font dan gambar terorganisir.
Jadi di sini di folder font, saya tidak heran ingin mengelola font saya dan
untuk itu, terlampir Anda menemukan file zip dengan dua font yang bisa Anda ekstrak
lalu drag dan drop ke sini, itu OpenSans-Bold
dan OpenSans-Regular, jadi dua font ini dilampirkan ke video ini dalam file zip, diekstraksi dan seret ke
dalam folder font.
Sekarang dengan itu, font-font ini umumnya tersedia tetapi untuk menggunakannya, Anda masih perlu mengkonfigurasi lebih banyak.
Anda harus pergi ke aplikasi Anda. File js dan pada dasarnya menginstruksikan React Native dan expo untuk
memuat font-font ini, jadi gunakan saja. Untuk itu di dalam aplikasi. File js dan saya menggunakan aplikasi. File js karena itu
adalah file pertama yang dimuat atau yang dieksekusi untuk mengatakan kapan aplikasi dimulai dan
Anda ingin memuat font Anda ketika aplikasi dimulai, di sana, Anda perlu menambahkan impor dan impor itu adalah Anda
mengimpor semuanya sebagai font, meskipun nama di sini terserah Anda, tetapi biasanya, Anda menggunakan font di sini, dari expo-font.
Jadi expo-font adalah paket yang memberi Anda utilitas font, sehingga utilitas yang memungkinkan Anda memuat font dan Anda mengimpor semuanya
dari paket itu dan menggabungkannya bersama-sama dalam objek font ini, itulah yang kami
lakukan di sini. Sekarang untuk
memuat font, saya akan menambahkan fungsi baru di luar komponen fungsional karena fungsi
ini tidak perlu diciptakan kembali untuk setiap siklus rerender komponen.
Sekarang saya akan beri
nama mengambil font,
nama terserah Anda dan dalam fungsi
ini di sini, saya akan memanggil font. loadAsync.
Sekarang ini adalah fungsi yang atau metode pada paket font yang kami impor di sini
yang memungkinkan Anda untuk memuat font dan apa yang Anda lewati untuk memuat async adalah objek di mana Anda memberi tahu Expo dan karenanya Bereaksi Asli
tentang semua font yang ingin Anda beban. Anda melakukan ini dengan menggunakan kunci di
mana Anda memilih nama pilihan Anda, seperti open-sans dan nantinya Anda akan dapat menggunakan font ini dengan nama-nama
ini, jadi di sini buka sans karena font saya disebut open sans.
Jadi di sini itu open sans dan kemudian Anda tambahkan
harus, itu fitur bahasa yang ditawarkan Javascript di mana Anda menunjuk jalur tempat font ini disimpan.
Itu jalur relatif,
jadi di sini saya arahkan ke folder
aset, folder font dan kemudian itu adalah OpenSans-Bold, bukan huruf tebal tapi teratur. File ttf dan sekarang saya akan menambahkan item
kedua di sini untuk objek ini saya lewati untuk memuat async dan itu bisa berupa open-sans-bold.
Sekarang nama-nama ini sepenuhnya terserah Anda dan di sana saya ingin memuat versi cetak tebal.
Jadi dengan itu, kita memberi tahu React Native pada akhirnya di mana font kita tinggal, di mana file font ini tinggal dan ke nama mana kita
ingin memetakannya dan nantinya kita bisa menggunakan nama-nama ini untuk menetapkan font-font ini ke teks. Sekarang memuat async benar-benar mengembalikan janji, yang berarti bahwa ini akan memakan
waktu sedikit lebih lama, tidak super lama tetapi tidak akan memuat ini secara instan dan saya akan mengembalikan janji ini
di sini di dalam mengambil font sehingga setiap kali kita memanggil mengambil font, kita bisa menunggu
untuk janji ini untuk diselesaikan sebelum kita melanjutkan. Sekarang di mana
kita ingin mengambil font kita?
Yah kita bisa memuat font kita secara manual di sini, misalnya kita dapat memanggil mengambil font seperti ini dan itu akan melanjutkan dan
mengambil font kita tetapi
masalahnya adalah, kita akan terus membuat dan akhirnya kita akan membuat konten kita dan jika ada di mana pun dalam
konten, kami menggunakan teks yang mencoba menggunakan font seperti itu, jika font tersebut
belum dimuat dan seperti yang saya katakan, itu akan memakan waktu hanya beberapa milidetik tetapi masih untuk siklus
render pertama, font mungkin belum dimuat, lalu kami akan mendapatkan kesalahan. Jadi memuat font kita seperti
ini tidak disarankan, kemungkinan besar tidak akan berfungsi.
Alih-alih ada komponen khusus yang bisa Anda gunakan, ada baiknya Anda memuat font Anda. Anda mengimpor komponen ini
dari expo dan nama komponen itu adalah AppLoading.
Nah, itu komponen yang pada dasarnya akan memperpanjang layar pemuatan default, pengguna layar splash melihat
kapan saja ketika aplikasi diluncurkan, itu akan memperpanjang layar ini untuk tetap aktif sampai tugas tertentu
pilihan Anda
selesai, seperti misalnya sampai mengambil font adalah selesai
Jadi AppLoading, dalam komponen aplikasi, kita hanya harus memastikan sekarang
bahwa kita membuat komponen ini alih-alih konten kita yang sebenarnya selama kita belum
memuat font kita
atau selama kita belum selesai memuat apa pun kami ingin memuat.
Sekarang yang keren adalah, kita dapat menggunakan status untuk itu dan mulai dengan nilai awal false
karena keadaan yang ingin saya kelola di sini adalah data yang dimuat atau apa pun yang Anda ingin panggil dan atur data yang dimuat.
Sekarang di sini, saya ingin memeriksa apakah data yang dimuat tidak benar, maka tanda seru, maka saya tahu data belum dimuat dan itulah
yang terjadi pada awalnya dan dalam hal ini, saya bahkan tidak akan melanjutkan dengan
logika
saya yang lain , sebagai gantinya untuk komponen fungsional ini, saya akan segera mengembalikan komponen AppLoading sebagai konten aplikasi pada dasarnya karena saya
tidak ingin merender konten lain jika kami masih memuat data kami.
Sekarang AppLoading adalah komponen yang berasal dari Expo yang mengambil prop async mulai di mana kita menunjuk pada operasi yang ingin kita
mulai ketika ini pertama kali diberikan dan itu tentu saja fungsi font fetch kita.
Jadi di sini, saya menunjuk mengambil font, pada fungsi ini.
Sekarang penting, a) ini harus
menjadi fungsi yang Anda lewati di sini dan b) itu harus menjadi fungsi yang mengembalikan janji
karena expo akan secara otomatis mendengarkan janji itu untuk Anda dan
ketika janji terselesaikan, ia akan tahu bahwa pemuatan selesai dan kemudian akan memanggil apa pun yang Anda lewati di
sini untuk menyelesaikan.
Jadi di sini, Anda harus melewati fungsi yang kemudian benar-benar menetapkan data yang dimuat menjadi true.
Jadi fungsi ini di sini akan dieksekusi untuk Anda ketika operasi ini dilakukan dan untuk
expo untuk
mengetahui kapan ini dilakukan, ini harus mengembalikan janji.
Jadi sekarang kedua alat peraga ini akan bekerja bersama dan kami memperbarui data yang dimuat, keadaan ini benar
dan karena itu tidak membuat konten ini tetapi untuk melanjutkan mengeksekusi kode ini dan akhirnya membuat
konten di sana
ketika mengambil font kami selesai dan Anda bisa melakukan operasi async apa pun di sini tetapi biasanya, Anda menggunakan
AppLoading untuk memuat beberapa aset, seperti font atau
semacamnya, jadi aset yang seharusnya ada saat aplikasi dimulai yang Anda butuhkan segera dan
biasanya yang merupakan font.
Sekarang Anda juga dapat menambahkan penangan onError di sini dengan cara dan di sini, saya hanya akan menghibur log objek kesalahan
yang juga kami
dapatkan di sini dalam kasus di mana memuat yang gagal. Tentu saja, Anda mungkin tidak hanya ingin mencatat ini tetapi melakukan sesuatu
yang lain, menunjukkan beberapa konten alternatif di
aplikasi Anda, hal-hal seperti itu. Di sini saya hanya akan
mencatatnya karena ini seharusnya tidak gagal, font tersedia secara lokal di sini sehingga harus dapat dimuat tanpa masalah.
Sekarang jika kita menyimpan itu, aplikasi kita tentu saja restart dan kita tidak melihat perbedaan di sini, layar
memuat kita juga tidak benar-benar memakan waktu lebih lama seperti sebelumnya karena pemuatan itu sangat cepat,
itu tidak terjadi secara
instan, itu sebabnya kami membutuhkan pendekatan ini.
Tapi sekarang kita
memuat font, bagaimana kita bisa menggunakannya sekarang?
Baiklah katakanlah kita ingin mengubah awal permainan kita di sini untuk menggunakan font kita. Sekarang untuk itu, kita harus pergi ke
layar mulai permainan yang merupakan tempat judul ini tinggal pada akhirnya, di sini, mulai permainan baru, itu memang memiliki gaya judul
dan oleh karena itu turun di stylesheet di sini pada judul, sekarang kita dapat mengatur keluarga
font untuk mengubah keluarga font dan mengatur ini menjadi open-sans-bold misalnya
dan tentu
saja pengidentifikasi yang Anda gunakan di sini harus menjadi pengidentifikasi yang Anda muat di sini.
Jadi di sini, saya memiliki open-sans-bold dan open
sans, saya dapat menggunakan dua pengidentifikasi ini dalam kode saya di mana saja di aplikasi ketika saya ingin menetapkan font khusus dan itulah
yang saya lakukan di sini.
Sekarang Anda lihat, yang memiliki font berbeda yang tebal dan omong-omong, jika Anda menggunakan font khusus
dan Anda ingin font tebal, Anda harus memuatnya dengan
keluarga font, Anda tidak dapat mengatur berat font. Bereaksi Asli mendukung ini tetapi untuk font khusus, expo saat
ini tidak
mendukung ini, Anda hanya perlu menggunakan keluarga font terpisah yang tidak benar-benar masalah seperti yang Anda lihat.