Sekarang dengan font khusus kami ditambahkan, kami sekarang dapat menggunakannya dalam aplikasi kami dan
saya ingin menggunakannya di semua tempat di mana kami menampilkan beberapa teks, seperti di sini dengan Anda
memilih, di sini lawan menebak dan kemudian juga pada halaman ringkasan, yang
juga akan menjadi tujuan di sini di aplikasi ini dan di samping itu, ketika permainan selesai, saya tidak hanya
ingin menggunakan font khusus kami di sini di game ini di halaman tetapi saya juga ingin menampilkan gambar, permainan berakhir
gambar di sini, jadi
itu hal berikutnya yang ingin saya kerjakan.
Langkah pertama adalah mengganti teks ini di sini dengan teks tubuh untuk menggunakan font, jadi saya mengimpor teks tubuh dari folder komponen
dan di sana, dari teks tubuh dan kemudian mengganti semua komponen teks ini di sini dengan teks tubuh, hanya
agar ketika permainan sudah selesai, kami menggunakan font khusus kami, itulah
tujuannya di sini.
Tapi itu karena saya hanya mengatakan
satu hal, hal utama yang harus terjadi di sini adalah bahwa kita juga memiliki gambar di sini.
Jadi katakanlah kita memiliki permainan kita sebenarnya lebih dari judul, jadi mari kita gunakan teks judul di sini mungkin sekarang saya berpikir
tentang hal
itu, teks judul bukan teks tubuh tetapi di bawah judul ini,
jadi di bawah permainan ini berakhir, kami menunjukkan gambar.
Jadi di sini, saya ingin menggunakan beberapa komponen yang sebenarnya memungkinkan kita untuk menampilkan gambar dan Bereaksi
Asli memiliki komponen seperti itu, ia memiliki komponen gambar. Kita dapat menggunakan gambar di sini sebagai komponen normal dalam
kode JSX kita begitu saja, itu adalah komponen penutupan sendiri, gambar memiliki satu penyangga penting dan itu
adalah penyangga sumber dan penyangga sumber seperti namanya harus diatur ke titik di gambar dan sekarang ada dua jenis gambar
yang dapat Anda gunakan - gambar lokal yang Anda kirimkan sebagai bagian dari aplikasi Anda, sehingga Anda sertakan dalam
kode sumber Anda, dalam bundel aplikasi Anda di akhir atau gambar jaringan dan kami akan memiliki lihat keduanya.
Sekarang mari kita mulai dengan gambar lokal dan untuk itu, terlampir Anda menemukan kesuksesan ini. png file yang dapat Anda seret ke folder aset Anda,
jadi bukan di folder font di sana
tetapi hanya ke aset atau Anda membuat sub-folder gambar jika Anda mau, tidak masalah,
saya
akan memilikinya
di sini di aset , ini keberhasilannya. File png dan ini adalah file yang ingin
saya gunakan di sini, jadi gambar yang ingin saya render di sini. Sekarang untuk itu, untuk membuat gambar ini di sini, kami menggunakan sintaks khusus
yang mungkin terlihat aneh saat pertama kali Anda melihatnya. Anda menggunakan ini memerlukan fungsi yang dibangun ke dalam
Javascript atau yang didukung oleh React Native di Javascript katakanlah, di mana Anda melewatkan string sebagai argumen dan ini
adalah string yang menunjuk pada gambar dan ini harus menjadi jalur relatif, jadi di
sini sejak kita
berada di folder layar, kita harus naik satu tingkat, lalu ke folder aset dan kemudian di
sini, kita bisa menunjukkan kesuksesan. png,
begitu saja.
Sekarang ini memberitahu React Native bahwa kami ingin menggunakan gambar ini di sini dan
di belakang layar, ini memungkinkan React Native untuk memuat ini secara efektif dan juga untuk melihat
gambar dan
misalnya menentukan lebar dan tingginya, itu sebabnya kami menggunakan ini aneh memerlukan sintaks dan kami harus memuat gambar lokal seperti ini.
Sekarang dengan itu
untuk melihat hasilnya, saya akan mengubah aplikasi. File js sementara untuk memastikan kami selalu menampilkan permainan di atas
layar di sana, hanya agar saya tidak selalu harus melalui seluruh layar hanya untuk memverifikasi bahwa itu diperbarui, bahwa itu berubah.
Jadi game over screen adalah apa yang akan saya gunakan untuk sementara waktu sebagai konten utama saya di sini sejak awal dan saya hanya akan memberikan beberapa angka
tiruan untuk angka putaran dan nomor pengguna, sekali lagi saya hanya melakukan ini sehingga kita mulai dengan permainan
di atas layar di sini dan lihat apa yang ini memberi kita. Dan kita dapat melihat apa yang ini
memberi kita, itu memberi kita gambar layar penuh pada akhirnya, gambar yang sangat besar.
Alasan untuk itu adalah bahwa gambar yang saya berikan kepada
Anda cukup besar, kesuksesan ini. File png bukan file
kecil, ini adalah gambar yang cukup besar mengenai piksel, lebar dan tingginya.
Dan seperti yang saya katakan ketika Anda menggunakan memerlukan seperti ini, hal yang baik adalah bahwa Bereaksi Asli melihat file
gambar, menentukan lebar dan tinggi dan menggunakan lebar dan tinggi yang sama di
sini yang berarti kita membuat gambar besar ini di aplikasi dan kekurangannya adalah bahwa ini sekarang tidak lagi pas di
layar atau menempati seluruh layar karena itu file yang terlalu besar.
Jika kita memiliki gambar yang lebih kecil, ini tidak akan menjadi masalah, maka itu hanya akan menempati sebagian
layar tetapi karena itu adalah gambar yang besar, ia menempati seluruh layar.