1 00:00:02,320 --> 00:00:08,220 Jadi sekarang dengan gambar yang ditambahkan dan sekarang kita sudah mengerjakan permainan di atas layar di sini, mari kita 2 00:00:08,230 --> 00:00:11,280 sempurnakan teks ini yang kita lihat di sini 3 00:00:11,280 --> 00:00:15,640 di bagian bawah, mari membuatnya sedikit lebih bagus, sedikit lebih indah dan selain 4 00:00:15,760 --> 00:00:21,400 itu sebelumnya Saya melakukan itu, saya benar-benar akan beralih dari menggunakan gambar jaringan ke gambar lokal tapi itu 5 00:00:21,400 --> 00:00:24,850 tentu saja sepenuhnya terserah Anda, apa yang Anda sukai di sana. 6 00:00:24,850 --> 00:00:29,890 Jadi saya ingin bekerja pada teks di sini dan alih-alih hanya memiliki jenis teks tabular di sini yang 7 00:00:29,930 --> 00:00:32,560 hanya menghasilkan beberapa informasi dengan cara yang membosankan, mengapa kita 8 00:00:32,560 --> 00:00:37,460 tidak menyajikan ini dengan menunggu yang lebih baik? Secara rinci, saya pikir akan lebih baik 9 00:00:37,600 --> 00:00:43,030 jika kita memiliki beberapa teks yang dapat dibaca manusia di sini, jadi kalimat yang sebenarnya bisa kita baca. 10 00:00:43,400 --> 00:00:52,720 Jadi di sana kami dapat mengatakan telepon Anda diperlukan, dan kemudian di sini kami memiliki jumlah putaran, putaran untuk menebak nomor dan 11 00:00:52,800 --> 00:00:55,140 di sini akan memasukkan nomor. 12 00:00:55,240 --> 00:00:59,810 Jadi jumlahnya tentu saja adalah jumlah pengguna alat peraga dan lagi, Anda dapat menyingkirkan garis 13 00:00:59,950 --> 00:01:05,260 ini sekarang tapi saya tidak hanya ingin menampilkan alat peraga nomor pengguna seperti ini, alih-alih saya ingin 14 00:01:05,260 --> 00:01:11,680 menyorotnya, saya ingin memberikan warna khusus itu berbeda dari warna lain di sini dan sama di sini untuk putaran, jadi jumlah 15 00:01:11,690 --> 00:01:19,480 nilai props putaran, akan lebih baik jika itu juga akan berwarna berbeda. Sekarang untuk warna yang berbeda, kita sebenarnya bisa 16 00:01:19,480 --> 00:01:28,150 membungkus ini ke dalam simpul teks lain di sini. Jadi Anda dapat memiliki simpul teks, komponen 17 00:01:28,150 --> 00:01:32,920 teks di dalam teks, di dalam komponen teks 18 00:01:32,920 --> 00:01:36,820 lainnya, jadi itu mungkin, begitu saja. 19 00:01:36,820 --> 00:01:38,970 Nah, itu benar-benar penting untuk 20 00:01:38,970 --> 00:01:45,790 dipahami, Anda dapat menyarang komponen teks ke dalam komponen teks lainnya dan perlu diingat bahwa teks tubuh pada akhirnya hanyalah 21 00:01:45,790 --> 00:01:51,080 komponen teks, teks tubuh adalah komponen yang hanya mengembalikan komponen teks bawaan, jadi apa pun 22 00:01:51,160 --> 00:01:57,100 yang kami lakukan masukkan di antara teks tubuh sama seperti jika kita akan memasukkannya di antara komponen teks 23 00:01:57,100 --> 00:02:03,430 bawaan dan oleh karena itu kita dapat memiliki teks bersarang di sana dan kita secara teoritis juga memiliki pandangan 24 00:02:03,430 --> 00:02:08,800 bersarang di sana tetapi ada beberapa peringatan untuk itu dan oleh karena itu jika Anda tidak 25 00:02:08,800 --> 00:02:14,370 benar-benar memiliki alasan kuat mengapa Anda membutuhkan tampilan di sana, Anda seharusnya tidak benar-benar melihat tampilan 26 00:02:14,370 --> 00:02:20,020 teks dan jarang ada alasan untuk melakukan itu. Namun teks di dalam teks dapat membuat 27 00:02:20,020 --> 00:02:25,310 banyak akal karena memungkinkan Anda untuk gaya bagian teks yang berbeda dari teks lainnya. 28 00:02:25,360 --> 00:02:32,970 Jadi di sini misalnya, saya ingin menambahkan gaya dengan gaya. sorot dan yang sama di sini untuk teks kedua untuk 29 00:02:33,210 --> 00:02:40,170 menyorot bagian ini dari teks dan sekarang tentu saja kita dapat menambahkan sorot di sana di lembar gaya 30 00:02:40,170 --> 00:02:48,510 kita di permainan di layar, sorot dan di sana misalnya memberi warna di mana kita menggunakan warna dan untuk itu, kita perlu 31 00:02:48,530 --> 00:02:55,010 menambahkan impor tempat kita mengimpor warna dari konstanta / Warna dan kemudian mungkin menggunakan warna utama 32 00:02:55,010 --> 00:03:02,420 kita di sana, jadi Warna. utama. Jika kami melakukan itu, apa yang akan Anda lihat sekarang, ini disorot. 33 00:03:03,440 --> 00:03:09,350 Sekarang juga sesuatu yang menarik, jika saya sementara pergi ke teks tubuh dan saya mengubahnya 34 00:03:09,350 --> 00:03:10,210 untuk 35 00:03:10,490 --> 00:03:17,150 membuka sans bold di sini, jadi saya menggunakan versi bold, Anda akan melihat bahwa bahkan teks yang 36 00:03:17,150 --> 00:03:23,570 disorot masih tebal, mungkin agak sulit untuk dilihat tapi ini sebenarnya berani dan itu sangat menarik 37 00:03:23,870 --> 00:03:30,860 karena di awal kursus, saya sebutkan bahwa gaya Anda tidak akan mewarisi, sehingga jika Anda misalnya dalam game 38 00:03:30,860 --> 00:03:39,170 over screen atur keluarga font di sini pada gaya layar Anda yang diterapkan pada tampilan yang membungkus segalanya, keluarga font itu tidak 39 00:03:39,470 --> 00:03:42,970 akan diturunkan ke komponen bersarang di dalam tampilan itu. 40 00:03:42,980 --> 00:03:48,490 Jadi hanya karena Anda menetapkan gaya di sini pada tampilan ini tidak berarti bahwa semua tampilan lain di sana atau semua teks 41 00:03:48,490 --> 00:03:54,080 lain di sana, apa pun itu, dapatkan gaya yang sama. Gaya yang Anda terapkan untuk komponen 42 00:03:54,080 --> 00:04:00,780 selalu hanya diterapkan pada komponen itu dan bukan ke komponen bersarang namun berbeda untuk teks. 43 00:04:00,780 --> 00:04:09,050 Di sana, teks ini di sini, teks yang disorot yang bersarang di dalam teks tubuh juga mendapatkan keluarga tebal ini jika kita mengubahnya pada 44 00:04:09,260 --> 00:04:10,160 teks tubuh 45 00:04:10,250 --> 00:04:16,550 dan itu hanyalah perbedaan penting yang React Native miliki. Untuk komponen teks, jika Anda 46 00:04:16,580 --> 00:04:17,720 menambahkan 47 00:04:17,720 --> 00:04:23,900 gaya di sana, gaya diteruskan ke komponen teks bersarang, itulah 48 00:04:23,900 --> 00:04:29,750 satu pengecualian React Native miliki. Teks di dalam teks menerima gaya yang ditentukan 49 00:04:29,750 --> 00:04:37,610 pada teks luar, sehingga gaya apa pun yang Anda atur pada teks tubuh di sini secara otomatis diterima oleh komponen teks bersarang. 50 00:04:37,680 --> 00:04:43,800 Ada satu perilaku penting tambahan mengenai komponen teks dalam React Native dan itu adalah bahwa 51 00:04:43,800 --> 00:04:47,370 itu tidak menggunakan flexbox. Pandangan menggunakan flexbox, komponen 52 00:04:47,370 --> 00:04:52,110 teks tentu saja tidak dan saya sebutkan sebelumnya, bahwa komponen tampilan menggunakan flexbox 53 00:04:52,320 --> 00:05:00,180 bukan teks atau komponen lain tetapi teks menggunakan sistem pemosisiannya sendiri di mana ia secara otomatis membungkus dirinya sendiri ke dalam baris 54 00:05:00,210 --> 00:05:05,580 baru jika tidak t cocok menjadi satu baris dan untuk menunjukkan ini, kita bisa 55 00:05:05,580 --> 00:05:12,810 pergi ke sini ke game over screen dan membungkus seluruh teks kita di sini di bagian bawah ke tampilan lain, 56 00:05:12,810 --> 00:05:21,180 jadi ambil teks tubuh itu dan tambahkan di sini ke tampilan ini dan di sana, tambahkan gaya katakanlah beri nama itu hasil teks, 57 00:05:21,210 --> 00:05:28,080 apa pun yang Anda ingin beri nama ini atau hasil wadah untuk lebih sejalan dengan nama gaya lainnya. 58 00:05:28,170 --> 00:05:30,410 Jadi wadah hasil ditambahkan ke 59 00:05:30,570 --> 00:05:38,300 tampilan dan sekarang jika saya menambahkan ini di sini, di mana saja di sini di stylesheet saya dan saya memberikan ini lebar 60 00:05:38,550 --> 00:05:42,420 katakanlah 80% yang masuk akal sehingga teks memiliki sedikit lebih 61 00:05:42,480 --> 00:05:49,980 banyak jarak ke kiri dan kanan atau sebagai alternatif saya menambahkan margin horizontal misalkan 20 memiliki jarak spasi kiri dan kanan 62 00:05:49,980 --> 00:05:55,980 di sekitar wadah, maka Anda melihat teks tersebut benar-benar dibungkus menjadi baris baru dan itu juga 63 00:05:55,980 --> 00:05:58,410 perilaku default komponen teks dalam React Native. 64 00:05:58,410 --> 00:06:05,700 Tidak hanya mem-parsing gaya ke teks bersarang, ia juga memiliki sistem penentuan posisi sendiri atau sistem tata letak sendiri 65 00:06:05,700 --> 00:06:10,950 di mana teks secara otomatis membungkus dirinya menjadi baris baru jika tidak cocok dan 66 00:06:11,040 --> 00:06:16,830 baris yang sama dan tentu saja membuat banyak akal, itu biasanya apa yang Anda inginkan 67 00:06:17,070 --> 00:06:24,920 pada teks Anda, Anda ingin membungkusnya dengan baris baru. Sekarang dengan itu, saya akan mengembalikan pengaturan ini pada teks 68 00:06:24,920 --> 00:06:25,880 tubuh, saya 69 00:06:25,880 --> 00:06:28,190 benar-benar tidak akan menggunakan open-sans-bold di 70 00:06:28,310 --> 00:06:34,530 sana, saya hanya menggunakan open sans tapi saya ingin menunjukkan hal warisan gaya ini dan juga tentu 71 00:06:34,580 --> 00:06:38,960 saja secara umum membiarkan Anda tahu bagaimana teks berperilaku mengenai tata letaknya. 72 00:06:38,960 --> 00:06:41,450 Semua yang dikatakan tentang teks, kita belum 73 00:06:41,480 --> 00:06:43,730 selesai, saya tidak berpikir itu terlihat bagus, 74 00:06:43,760 --> 00:06:49,860 alih-alih pada permainan di atas layar, teks yang disorot ini mungkin harus tebal, jadi saya akan menggunakan font 75 00:06:50,100 --> 00:06:55,400 font terbuka -sans-bold di sini sehingga ini benar-benar menonjol dan lebih mudah untuk dilihat dan 76 00:06:55,670 --> 00:07:02,930 di samping itu, saya sebenarnya juga akan menambahkan margin horizontal 30 di sini untuk memiliki sedikit lebih banyak spasi kiri ke 77 00:07:02,930 --> 00:07:04,640 kanan di sekitar teks. 78 00:07:04,640 --> 00:07:10,490 Sekarang sebagai tambahan, saya juga ingin memastikan bahwa teksnya berada di tengah, sehingga jika kita 79 00:07:10,490 --> 00:07:17,090 memiliki garis, semuanya berpusat di tengah dan kita tidak mulai dari tepi kiri lagi dan ini sekarang 80 00:07:17,090 --> 00:07:19,010 dapat dicapai dengan properti 81 00:07:19,010 --> 00:07:21,760 penataan khusus yang dapat Anda tambahkan 82 00:07:21,790 --> 00:07:24,770 pada komponen teks dan itulah properti perataan teks. 83 00:07:25,070 --> 00:07:29,210 Masalahnya adalah saya tidak ingin menggunakan ini pada teks utama, saya ingin menggunakannya 84 00:07:29,210 --> 00:07:34,990 pada keseluruhan teks tubuh dan oleh karena itu, kita perlu menambahkan gaya di sini, mungkin teks hasil adalah 85 00:07:35,000 --> 00:07:38,460 nama yang pas di sini karena ini adalah milik kami teks 86 00:07:38,660 --> 00:07:40,760 keseluruhan dan kemudian di sini kita 87 00:07:44,450 --> 00:07:45,400 bisa menambahkan 88 00:07:45,410 --> 00:07:49,150 teks hasil dan pada teks hasil itu, atur teks rata ke tengah. 89 00:07:49,220 --> 00:07:56,570 Namun jika saya menyimpan ini, itu tidak berpengaruh karena teks tubuh kita tidak dikonfigurasikan untuk mengambil gaya, gaya prop yang 90 00:07:56,630 --> 00:08:02,660 mungkin kita tambahkan ke dalamnya, ke dalam akun. Dalam teks tubuh, satu-satunya gaya yang diatur ke teks adalah 91 00:08:02,660 --> 00:08:04,660 gaya yang ditentukan secara internal. 92 00:08:04,670 --> 00:08:09,080 Sekarang kami belajar bagaimana mengubah ini, kami cukup mengirimkan objek ke 93 00:08:09,080 --> 00:08:16,170 gaya, mengambil semua properti gaya kustom kami dari file ini dan mendistribusikannya ke objek ini dan menggabungkannya dengan apa 94 00:08:16,170 --> 00:08:20,670 pun yang kami dapatkan di gaya alat peraga dengan menggunakan operator spread 95 00:08:20,670 --> 00:08:22,930 disini juga. Dan dengan itu, 96 00:08:22,940 --> 00:08:28,370 sekarang jika kita menyimpan ini, kita melihat bahwa ini sekarang terpusat dengan baik dan ini tentu sedikit lebih 97 00:08:28,550 --> 00:08:30,490 baik untuk dibaca daripada sebelum saya katakan. 98 00:08:30,680 --> 00:08:37,070 Sekarang dengan itu, kita hampir selesai dengan menata teks ini, hal terakhir yang saya pikir terlihat bagus di 99 00:08:37,070 --> 00:08:41,490 sini adalah jika pada teks hasil, kita juga menaikkan ukuran font sedikit. 100 00:08:41,570 --> 00:08:47,990 Jadi jika kita menetapkan ukuran font di sini menjadi 20 mungkin, jadi sangat besar dan pada 101 00:08:47,990 --> 00:08:55,700 wadah hasil, saya juga ingin memiliki margin vertikal 15 mungkin, untuk memiliki spasi di bagian atas dan bawah di 102 00:08:55,700 --> 00:08:57,180 sekitar teks juga. 103 00:08:57,320 --> 00:09:02,240 Dan sekarang dengan itu, kami memiliki game over screen yang menurut saya tidak terlihat terlalu buruk 104 00:09:02,240 --> 00:09:07,520 dan Anda belajar banyak tentang cara kerja teks, jadi bagaimana Anda dapat bekerja dengan komponen teks di React Native.