Jadi sekarang dengan gambar yang ditambahkan dan sekarang kita sudah mengerjakan permainan di atas layar di sini, mari kita
sempurnakan teks ini yang kita lihat di sini
di bagian bawah, mari membuatnya sedikit lebih bagus, sedikit lebih indah dan selain
itu sebelumnya Saya melakukan itu, saya benar-benar akan beralih dari menggunakan gambar jaringan ke gambar lokal tapi itu
tentu saja sepenuhnya terserah Anda, apa yang Anda sukai di sana.
Jadi saya ingin bekerja pada teks di sini dan alih-alih hanya memiliki jenis teks tabular di sini yang
hanya menghasilkan beberapa informasi dengan cara yang membosankan, mengapa kita
tidak menyajikan ini dengan menunggu yang lebih baik? Secara rinci, saya pikir akan lebih baik
jika kita memiliki beberapa teks yang dapat dibaca manusia di sini, jadi kalimat yang sebenarnya bisa kita baca.
Jadi di sana kami dapat mengatakan telepon Anda diperlukan, dan kemudian di sini kami memiliki jumlah putaran, putaran untuk menebak nomor dan
di sini akan memasukkan nomor.
Jadi jumlahnya tentu saja adalah jumlah pengguna alat peraga dan lagi, Anda dapat menyingkirkan garis
ini sekarang tapi saya tidak hanya ingin menampilkan alat peraga nomor pengguna seperti ini, alih-alih saya ingin
menyorotnya, saya ingin memberikan warna khusus itu berbeda dari warna lain di sini dan sama di sini untuk putaran, jadi jumlah
nilai props putaran, akan lebih baik jika itu juga akan berwarna berbeda. Sekarang untuk warna yang berbeda, kita sebenarnya bisa
membungkus ini ke dalam simpul teks lain di sini. Jadi Anda dapat memiliki simpul teks, komponen
teks di dalam teks, di dalam komponen teks
lainnya, jadi itu mungkin, begitu saja.
Nah, itu benar-benar penting untuk
dipahami, Anda dapat menyarang komponen teks ke dalam komponen teks lainnya dan perlu diingat bahwa teks tubuh pada akhirnya hanyalah
komponen teks, teks tubuh adalah komponen yang hanya mengembalikan komponen teks bawaan, jadi apa pun
yang kami lakukan masukkan di antara teks tubuh sama seperti jika kita akan memasukkannya di antara komponen teks
bawaan dan oleh karena itu kita dapat memiliki teks bersarang di sana dan kita secara teoritis juga memiliki pandangan
bersarang di sana tetapi ada beberapa peringatan untuk itu dan oleh karena itu jika Anda tidak
benar-benar memiliki alasan kuat mengapa Anda membutuhkan tampilan di sana, Anda seharusnya tidak benar-benar melihat tampilan
teks dan jarang ada alasan untuk melakukan itu. Namun teks di dalam teks dapat membuat
banyak akal karena memungkinkan Anda untuk gaya bagian teks yang berbeda dari teks lainnya.
Jadi di sini misalnya, saya ingin menambahkan gaya dengan gaya. sorot dan yang sama di sini untuk teks kedua untuk
menyorot bagian ini dari teks dan sekarang tentu saja kita dapat menambahkan sorot di sana di lembar gaya
kita di permainan di layar, sorot dan di sana misalnya memberi warna di mana kita menggunakan warna dan untuk itu, kita perlu
menambahkan impor tempat kita mengimpor warna dari konstanta / Warna dan kemudian mungkin menggunakan warna utama
kita di sana, jadi Warna. utama. Jika kami melakukan itu, apa yang akan Anda lihat sekarang, ini disorot.
Sekarang juga sesuatu yang menarik, jika saya sementara pergi ke teks tubuh dan saya mengubahnya
untuk
membuka sans bold di sini, jadi saya menggunakan versi bold, Anda akan melihat bahwa bahkan teks yang
disorot masih tebal, mungkin agak sulit untuk dilihat tapi ini sebenarnya berani dan itu sangat menarik
karena di awal kursus, saya sebutkan bahwa gaya Anda tidak akan mewarisi, sehingga jika Anda misalnya dalam game
over screen atur keluarga font di sini pada gaya layar Anda yang diterapkan pada tampilan yang membungkus segalanya, keluarga font itu tidak
akan diturunkan ke komponen bersarang di dalam tampilan itu.
Jadi hanya karena Anda menetapkan gaya di sini pada tampilan ini tidak berarti bahwa semua tampilan lain di sana atau semua teks
lain di sana, apa pun itu, dapatkan gaya yang sama. Gaya yang Anda terapkan untuk komponen
selalu hanya diterapkan pada komponen itu dan bukan ke komponen bersarang namun berbeda untuk teks.
Di sana, teks ini di sini, teks yang disorot yang bersarang di dalam teks tubuh juga mendapatkan keluarga tebal ini jika kita mengubahnya pada
teks tubuh
dan itu hanyalah perbedaan penting yang React Native miliki. Untuk komponen teks, jika Anda
menambahkan
gaya di sana, gaya diteruskan ke komponen teks bersarang, itulah
satu pengecualian React Native miliki. Teks di dalam teks menerima gaya yang ditentukan
pada teks luar, sehingga gaya apa pun yang Anda atur pada teks tubuh di sini secara otomatis diterima oleh komponen teks bersarang.
Ada satu perilaku penting tambahan mengenai komponen teks dalam React Native dan itu adalah bahwa
itu tidak menggunakan flexbox. Pandangan menggunakan flexbox, komponen
teks tentu saja tidak dan saya sebutkan sebelumnya, bahwa komponen tampilan menggunakan flexbox
bukan teks atau komponen lain tetapi teks menggunakan sistem pemosisiannya sendiri di mana ia secara otomatis membungkus dirinya sendiri ke dalam baris
baru jika tidak t cocok menjadi satu baris dan untuk menunjukkan ini, kita bisa
pergi ke sini ke game over screen dan membungkus seluruh teks kita di sini di bagian bawah ke tampilan lain,
jadi ambil teks tubuh itu dan tambahkan di sini ke tampilan ini dan di sana, tambahkan gaya katakanlah beri nama itu hasil teks,
apa pun yang Anda ingin beri nama ini atau hasil wadah untuk lebih sejalan dengan nama gaya lainnya.
Jadi wadah hasil ditambahkan ke
tampilan dan sekarang jika saya menambahkan ini di sini, di mana saja di sini di stylesheet saya dan saya memberikan ini lebar
katakanlah 80% yang masuk akal sehingga teks memiliki sedikit lebih
banyak jarak ke kiri dan kanan atau sebagai alternatif saya menambahkan margin horizontal misalkan 20 memiliki jarak spasi kiri dan kanan
di sekitar wadah, maka Anda melihat teks tersebut benar-benar dibungkus menjadi baris baru dan itu juga
perilaku default komponen teks dalam React Native.
Tidak hanya mem-parsing gaya ke teks bersarang, ia juga memiliki sistem penentuan posisi sendiri atau sistem tata letak sendiri
di mana teks secara otomatis membungkus dirinya menjadi baris baru jika tidak cocok dan
baris yang sama dan tentu saja membuat banyak akal, itu biasanya apa yang Anda inginkan
pada teks Anda, Anda ingin membungkusnya dengan baris baru. Sekarang dengan itu, saya akan mengembalikan pengaturan ini pada teks
tubuh, saya
benar-benar tidak akan menggunakan open-sans-bold di
sana, saya hanya menggunakan open sans tapi saya ingin menunjukkan hal warisan gaya ini dan juga tentu
saja secara umum membiarkan Anda tahu bagaimana teks berperilaku mengenai tata letaknya.
Semua yang dikatakan tentang teks, kita belum
selesai, saya tidak berpikir itu terlihat bagus,
alih-alih pada permainan di atas layar, teks yang disorot ini mungkin harus tebal, jadi saya akan menggunakan font
font terbuka -sans-bold di sini sehingga ini benar-benar menonjol dan lebih mudah untuk dilihat dan
di samping itu, saya sebenarnya juga akan menambahkan margin horizontal 30 di sini untuk memiliki sedikit lebih banyak spasi kiri ke
kanan di sekitar teks.
Sekarang sebagai tambahan, saya juga ingin memastikan bahwa teksnya berada di tengah, sehingga jika kita
memiliki garis, semuanya berpusat di tengah dan kita tidak mulai dari tepi kiri lagi dan ini sekarang
dapat dicapai dengan properti
penataan khusus yang dapat Anda tambahkan
pada komponen teks dan itulah properti perataan teks.
Masalahnya adalah saya tidak ingin menggunakan ini pada teks utama, saya ingin menggunakannya
pada keseluruhan teks tubuh dan oleh karena itu, kita perlu menambahkan gaya di sini, mungkin teks hasil adalah
nama yang pas di sini karena ini adalah milik kami teks
keseluruhan dan kemudian di sini kita
bisa menambahkan
teks hasil dan pada teks hasil itu, atur teks rata ke tengah.
Namun jika saya menyimpan ini, itu tidak berpengaruh karena teks tubuh kita tidak dikonfigurasikan untuk mengambil gaya, gaya prop yang
mungkin kita tambahkan ke dalamnya, ke dalam akun. Dalam teks tubuh, satu-satunya gaya yang diatur ke teks adalah
gaya yang ditentukan secara internal.
Sekarang kami belajar bagaimana mengubah ini, kami cukup mengirimkan objek ke
gaya, mengambil semua properti gaya kustom kami dari file ini dan mendistribusikannya ke objek ini dan menggabungkannya dengan apa
pun yang kami dapatkan di gaya alat peraga dengan menggunakan operator spread
disini juga. Dan dengan itu,
sekarang jika kita menyimpan ini, kita melihat bahwa ini sekarang terpusat dengan baik dan ini tentu sedikit lebih
baik untuk dibaca daripada sebelum saya katakan.
Sekarang dengan itu, kita hampir selesai dengan menata teks ini, hal terakhir yang saya pikir terlihat bagus di
sini adalah jika pada teks hasil, kita juga menaikkan ukuran font sedikit.
Jadi jika kita menetapkan ukuran font di sini menjadi 20 mungkin, jadi sangat besar dan pada
wadah hasil, saya juga ingin memiliki margin vertikal 15 mungkin, untuk memiliki spasi di bagian atas dan bawah di
sekitar teks juga.
Dan sekarang dengan itu, kami memiliki game over screen yang menurut saya tidak terlihat terlalu buruk
dan Anda belajar banyak tentang cara kerja teks, jadi bagaimana Anda dapat bekerja dengan komponen teks di React Native.