1
00:00:02,150 --> 00:00:06,950
Sekarang dengan font khusus kami ditambahkan, kami sekarang dapat menggunakannya dalam aplikasi kami dan

2
00:00:06,950 --> 00:00:12,740
saya ingin menggunakannya di semua tempat di mana kami menampilkan beberapa teks, seperti di sini dengan Anda

3
00:00:13,130 --> 00:00:17,410
memilih, di sini lawan menebak dan kemudian juga pada halaman ringkasan, yang

4
00:00:17,410 --> 00:00:24,010
juga akan menjadi tujuan di sini di aplikasi ini dan di samping itu, ketika permainan selesai, saya tidak hanya

5
00:00:24,020 --> 00:00:30,770
ingin menggunakan font khusus kami di sini di game ini di halaman tetapi saya juga ingin menampilkan gambar, permainan berakhir

6
00:00:30,830 --> 00:00:32,460
gambar di sini, jadi

7
00:00:32,510 --> 00:00:34,830
itu hal berikutnya yang ingin saya kerjakan.

8
00:00:34,850 --> 00:00:42,770
Langkah pertama adalah mengganti teks ini di sini dengan teks tubuh untuk menggunakan font, jadi saya mengimpor teks tubuh dari folder komponen

9
00:00:42,770 --> 00:00:49,970
dan di sana, dari teks tubuh dan kemudian mengganti semua komponen teks ini di sini dengan teks tubuh, hanya

10
00:00:49,970 --> 00:00:54,200
agar ketika permainan sudah selesai, kami menggunakan font khusus kami, itulah

11
00:00:54,200 --> 00:00:55,450
tujuannya di sini.

12
00:00:55,730 --> 00:00:57,950
Tapi itu karena saya hanya mengatakan

13
00:00:57,950 --> 00:01:03,200
satu hal, hal utama yang harus terjadi di sini adalah bahwa kita juga memiliki gambar di sini.

14
00:01:03,260 --> 00:01:11,360
Jadi katakanlah kita memiliki permainan kita sebenarnya lebih dari judul, jadi mari kita gunakan teks judul di sini mungkin sekarang saya berpikir

15
00:01:11,360 --> 00:01:12,350
tentang hal

16
00:01:12,530 --> 00:01:16,460
itu, teks judul bukan teks tubuh tetapi di bawah judul ini,

17
00:01:16,460 --> 00:01:19,830
jadi di bawah permainan ini berakhir, kami menunjukkan gambar.

18
00:01:19,880 --> 00:01:27,740
Jadi di sini, saya ingin menggunakan beberapa komponen yang sebenarnya memungkinkan kita untuk menampilkan gambar dan Bereaksi

19
00:01:27,800 --> 00:01:36,470
Asli memiliki komponen seperti itu, ia memiliki komponen gambar. Kita dapat menggunakan gambar di sini sebagai komponen normal dalam

20
00:01:36,470 --> 00:01:43,490
kode JSX kita begitu saja, itu adalah komponen penutupan sendiri, gambar memiliki satu penyangga penting dan itu

21
00:01:43,490 --> 00:01:51,170
adalah penyangga sumber dan penyangga sumber seperti namanya harus diatur ke titik di gambar dan sekarang ada dua jenis gambar

22
00:01:51,170 --> 00:01:58,430
yang dapat Anda gunakan - gambar lokal yang Anda kirimkan sebagai bagian dari aplikasi Anda, sehingga Anda sertakan dalam

23
00:01:58,430 --> 00:02:05,600
kode sumber Anda, dalam bundel aplikasi Anda di akhir atau gambar jaringan dan kami akan memiliki lihat keduanya.

24
00:02:05,610 --> 00:02:14,280
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,

25
00:02:14,280 --> 00:02:17,000
jadi bukan di folder font di sana

26
00:02:17,370 --> 00:02:23,430
tetapi hanya ke aset atau Anda membuat sub-folder gambar jika Anda mau, tidak masalah,

27
00:02:23,430 --> 00:02:24,240
saya

28
00:02:24,270 --> 00:02:25,150
akan memilikinya

29
00:02:25,170 --> 00:02:31,550
di sini di aset , ini keberhasilannya. File png dan ini adalah file yang ingin

30
00:02:31,560 --> 00:02:39,480
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

31
00:02:39,660 --> 00:02:46,040
yang mungkin terlihat aneh saat pertama kali Anda melihatnya. Anda menggunakan ini memerlukan fungsi yang dibangun ke dalam

32
00:02:46,050 --> 00:02:52,440
Javascript atau yang didukung oleh React Native di Javascript katakanlah, di mana Anda melewatkan string sebagai argumen dan ini

33
00:02:53,010 --> 00:02:57,840
adalah string yang menunjuk pada gambar dan ini harus menjadi jalur relatif, jadi di

34
00:02:57,840 --> 00:02:59,240
sini sejak kita

35
00:02:59,250 --> 00:03:04,530
berada di folder layar, kita harus naik satu tingkat, lalu ke folder aset dan kemudian di

36
00:03:04,530 --> 00:03:07,450
sini, kita bisa menunjukkan kesuksesan. png,

37
00:03:07,470 --> 00:03:09,090
begitu saja.

38
00:03:09,150 --> 00:03:14,490
Sekarang ini memberitahu React Native bahwa kami ingin menggunakan gambar ini di sini dan

39
00:03:14,490 --> 00:03:20,190
di belakang layar, ini memungkinkan React Native untuk memuat ini secara efektif dan juga untuk melihat

40
00:03:20,430 --> 00:03:21,340
gambar dan

41
00:03:21,360 --> 00:03:28,830
misalnya menentukan lebar dan tingginya, itu sebabnya kami menggunakan ini aneh memerlukan sintaks dan kami harus memuat gambar lokal seperti ini.

42
00:03:30,010 --> 00:03:32,280
Sekarang dengan itu

43
00:03:32,410 --> 00:03:39,400
untuk melihat hasilnya, saya akan mengubah aplikasi. File js sementara untuk memastikan kami selalu menampilkan permainan di atas

44
00:03:39,400 --> 00:03:46,060
layar di sana, hanya agar saya tidak selalu harus melalui seluruh layar hanya untuk memverifikasi bahwa itu diperbarui, bahwa itu berubah.

45
00:03:46,660 --> 00:03:53,590
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

46
00:03:53,590 --> 00:03:57,850
tiruan untuk angka putaran dan nomor pengguna, sekali lagi saya hanya melakukan ini sehingga kita mulai dengan permainan

47
00:03:57,880 --> 00:04:04,390
di atas layar di sini dan lihat apa yang ini memberi kita. Dan kita dapat melihat apa yang ini

48
00:04:04,480 --> 00:04:10,730
memberi kita, itu memberi kita gambar layar penuh pada akhirnya, gambar yang sangat besar.

49
00:04:10,780 --> 00:04:14,140
Alasan untuk itu adalah bahwa gambar yang saya berikan kepada

50
00:04:14,200 --> 00:04:17,590
Anda cukup besar, kesuksesan ini. File png bukan file

51
00:04:17,710 --> 00:04:22,040
kecil, ini adalah gambar yang cukup besar mengenai piksel, lebar dan tingginya.

52
00:04:22,210 --> 00:04:29,320
Dan seperti yang saya katakan ketika Anda menggunakan memerlukan seperti ini, hal yang baik adalah bahwa Bereaksi Asli melihat file

53
00:04:29,320 --> 00:04:34,020
gambar, menentukan lebar dan tinggi dan menggunakan lebar dan tinggi yang sama di

54
00:04:34,020 --> 00:04:41,050
sini yang berarti kita membuat gambar besar ini di aplikasi dan kekurangannya adalah bahwa ini sekarang tidak lagi pas di

55
00:04:41,050 --> 00:04:45,450
layar atau menempati seluruh layar karena itu file yang terlalu besar.

56
00:04:45,550 --> 00:04:50,440
Jika kita memiliki gambar yang lebih kecil, ini tidak akan menjadi masalah, maka itu hanya akan menempati sebagian

57
00:04:50,440 --> 00:04:54,160
layar tetapi karena itu adalah gambar yang besar, ia menempati seluruh layar.