Sekarang saya juga ingin menggunakan keluarga font ini untuk judul header.
Jadi di sini di komponen header saya, pada
judul header, saya juga ingin mengatur keluarga font menjadi open-sans-bold sehingga kami menggunakannya di sana juga dan
untuk semua teks lain dalam aplikasi ini, saya sebenarnya ingin menggunakan open saya font sans.
Jadi misalnya dalam permainan mulai hijau di sini, kami memiliki teks kami, pilih nomor dan untuk menggunakan font
sans terbuka normal, kita tentu saja dapat menetapkan gaya di sana dan kemudian menggunakan gaya teks misalnya dan menambahkan gaya teks
ini di sini di bawah dan kemudian gunakan font family, open-sans. Sekarang berfungsi tetapi tentu saja memiliki
downside.
Kelemahannya adalah bahwa Anda sekarang perlu menambahkan rumpun font ini ke teks apa pun di aplikasi yang
ingin Anda gunakan dan Anda harus menambahkannya langsung pada komponen teks, Anda tidak dapat
menambahkannya ke tampilan dan misalnya mengatur ini pada layar di sini dan bergantung pada yang diturunkan ke teks bersarang,
sayangnya ini tidak berhasil.
Jadi jika saya pergi ke layar di sini dan saya mengatur font family menjadi open-sans-bold sehingga kita dapat dengan mudah melihat apakah itu berfungsi
atau tidak, Anda melihat ini jelas tidak berani, pilih angka yang tidak tebal.
Jadi meneruskannya seperti ini, seperti berfungsi di CSS tidak berfungsi karena itu bukan
CSS, Javascript dan apa yang Anda terapkan pada objek hanya diterapkan pada elemen, pada komponen tempat
objek gaya ini dilampirkan.
Jadi kita harus men-style teks ini secara individual tetapi sekali lagi, menciptakan style itu berulang-ulang di semua
tempat yang berbeda mungkin bukan yang ingin Anda lakukan pada akhirnya.
Ada dua solusi atau solusi selalu terdengar agak kotor, dua
cara penanganan ini dengan cara yang lebih elegan.
Salah satunya adalah Anda membuat komponen terpisah, mungkin komponen teks tubuh atau hanya komponen teks, apa pun
yang ingin Anda beri
nama dan saya akan menamainya BodyText. js dan itu akan menjadi komponen
yang sangat sederhana, saya hanya mengimpor Bereaksi dari Bereaksi dan saya mengimpor teks dan stylesheet dari Bereaksi Asli di
sini dan kemudian komponen teks tubuh di sini mendapat alat peraga dan hanya mengembalikan komponen teks saya di sini di mana saya menampilkan
alat peraga anak-anak
di antara tag teks sehingga kami dapat meneruskan konten ke teks isi dengan melewatkannya di antara
tag teks pembuka dan penutup saat kami menggunakan komponen ini.
Lalu di sini saya memiliki gaya saya dan di sana, saya menggunakan Stylesheet. buat dan tentu saja saya mengekspor
komponen ini seperti ini dan sekarang di sini di stylesheet ini, saya
cukup menetapkan satu gaya yang saya terapkan di sini untuk teks ini, gaya tubuh atau apa pun
yang
Anda ingin beri nama, memiliki gaya tubuh di
sini dan satu gaya saya set adalah font family open sans dan saya akan menggunakan huruf tebal untuk
saat ini sehingga
kita dapat melihat bahwa ini benar-benar memiliki efek sebelum saya mengubahnya menjadi sedikit lebih sulit dilihat,
open sans, jadi open-sans-bold dan sekarang ini komponen yang sangat sederhana, hanya pembungkus tipis di sekitar teks
normal tetapi bungkus tipis yang selalu
mengatur keluarga font ini dan ini berarti bahwa setiap kali kita ingin memiliki teks yang
menggunakan keluarga yang satu ini, mungkin di semua tempat di aplikasi, daripada menggunakan komponen teks normal oleh React Native, kami hanya
menggunakan komponen teks tubuh yang baru saja saya buat. Jadi saya dapat mengimpor teks tubuh dari komponen
BodyText, mengimpor komponen itu dan sekarang saya dapat dengan mudah mengganti komponen teks di sini dengan teks tubuh dan jika kita melakukan
itu dan kita menyimpan ini, kita tentu saja melihat bahwa sekarang ini akan dicetak tebal,
baik jika saya akan menggunakannya pada teks yang tepat, ini tentu saja teks yang dipilih pengguna,
tidak masalah di sana juga, tetapi saya ingin pergi ke sini untuk memilih nomor.
Jadi jika saya menggunakannya di sana, teks tubuh, bungkus teks ini, Anda lihat sekarang ini tebal dan sekarang kita juga
dapat kembali dan memberikan teks tubuh kita tampilan terbuka yang sebenarnya dimaksudkan yang masih bukan font default tetapi yang dapat ' t segera terlihat
bahwa ini adalah font yang berbeda.
Jadi ini adalah salah satu opsi untuk meneruskan gaya teks di sekitar atau keluarga font di sekitar, Anda cukup membuat
komponen teks Anda sendiri yang selalu memiliki keluarga font ini dan jika Anda memiliki beberapa
keluarga font yang berbeda, seperti judul dan judul, Anda membuat komponen terpisah.
Sebagai contoh di sini, kami memiliki judul, yah kami mungkin ingin menggunakannya di bagian lain aplikasi. Jadi kita
bisa menambahkan TitleText. File js yang pada dasarnya adalah apa yang kita
miliki dalam teks tubuh, jadi saya hanya akan menyalinnya dan memindahkannya ke teks judul dan kemudian di sini, kita memiliki nama
teks judul dan di sini, itu teks judul dan
di sana, kita menggunakan open-sans- tebal dan mungkin untuk judul, juga memiliki ukuran font 18 dan sekarang lagi, mari
ganti nama ini menjadi judul mungkin, lebih masuk akal untuk gaya prop tetapi sekarang lagi, kami memiliki pembungkus
yang sangat tipis di sekitar teks dan di semua tempat di mana kita perlu judul, seperti pada header misalnya, kita dapat menyingkirkan penugasan
gaya manual ini di sini di komponen header dan alih-alih hanya mengimpor teks judul kita dari komponen teks judul dan menggunakannya sebagai ganti teks, singkirkan gaya
ini tugas di sini, seperti itu dan lakukan hal yang sama
di layar mulai permainan. Di sana, teks ini sekarang
bisa menjadi teks judul, yang perlu saya lakukan adalah
saya perlu mengimpornya. Jadi izinkan saya mengimpor
teks judul dari folder komponen dan di sana, dari teks judul dan kita sekarang dapat menggunakan kembali ini dan seperti yang kita lakukan sebelumnya dengan
kartu misalnya, jika Anda ingin ini masih dapat disesuaikan sehingga kita dapat mengatur lebih banyak pada judul atau menimpa
ukuran font atau menambahkan margin seperti yang kita lakukan di sini, baik maka apa yang selalu
dapat Anda lakukan adalah Anda masih dapat menambahkan gaya di sini ke teks judul, merujuk ke judul gaya, sehingga
ke gaya judul yang saya miliki atur di sana di layar permulaan permainan dan di dalam komponen teks judul,
Anda hanya perlu memastikan bahwa Anda menggabungkan gaya masuk ini dengan gaya yang Anda atur
di sana.
Jadi di sini, gaya sekarang menunjuk ke objek tempat Anda mengambil semua nilai dalam judul yang diatur di sini dan kemudian menggabungkannya atau menimpanya dengan
semua nilai yang diatur dalam gaya alat peraga dan sekarang Anda memiliki lapisan teks yang
dapat disesuaikan yang menetapkan gaya default ini tetapi yang dapat diganti dan disesuaikan dengan kebutuhan Anda dan oleh
karena itu kami memiliki
tampilan yang sama seperti sebelumnya tetapi sekarang dengan lebih banyak kegunaan.
Sekarang lagi, itu opsi nomor satu.
Alternatif untuk itu adalah bahwa misalnya di folder konstanta, Anda memiliki gaya default Anda. file js atau apa pun yang
ingin Anda beri
nama dan di sana, Anda mengekspor stylesheet default dan karenanya Anda perlu mengimpor ini,
impor stylesheet dari React Native.
Anda mengekspor Stylesheet default Anda. buat objek dan di sana Anda mengatur seperti teks tubuh Anda misalnya, nama apa pun yang Anda
inginkan dan
di sini Anda menetapkan keluarga font, open sans dan mungkin hanya sementara sehingga kita dapat melihat apakah
ini berfungsi, beri warna merah.
Sekarang Anda dapat mengimpor ini ke file
yang berbeda, katakanlah di layar permainan, di sana kita sekarang dapat mengimpor gaya default dari folder konstanta dan di sana, gaya default dan jika kita sekarang ingin gaya teks
default misalnya di sini pada lawan menebak, maka
semua yang kita lakukan adalah
kita mengatur gaya di sini, menjangkau ke gaya default dan menunjuk pada teks tubuh dan
Anda akan melihat apakah kita memulai permainan sekarang, teks ini
akan berwarna merah.
Jadi jika kita memulai permainan ini, tebakan lawan berwarna merah.
Jadi ini akan menjadi alternatif untuk memiliki komponen yang terpisah, bahwa Anda hanya memiliki stylesheet yang dikelola
secara global yang Anda impor ke file yang berbeda
dan sekarang saya tidak benar-benar membutuhkan teks tubuh yang berwarna merah tetapi yang saya inginkan ada judul
dan ada , Saya ingin memiliki keluarga font open-sans-bold dan ukuran font katakanlah 18 dan ya saya memiliki pengaturan yang sama dalam
teks judul, saya hanya menciptakannya kembali
di sini untuk menunjukkan kedua alternatif karena sekarang dengan judul diatur seperti ini di stylesheet
default, kita sekarang bisa pergi ke layar permainan dan mendengar tidak menggunakan teks tubuh tetapi menggunakan
judul pada tebakan lawan dan hasilnya adalah jika kita sekarang me-restart permainan ini, kita memiliki judul yang bagus
di sini.
Jadi itu adalah alternatif yang valid dan terserah Anda mana yang Anda inginkan, pisahkan komponen
yang Anda gunakan kembali alih-alih komponen teks atau komponen teks dengan gaya yang dikelola secara global dan sebagai catatan,
dalam gaya yang dikelola secara global, Anda berada di Tentu saja tidak terbatas pada mengelola properti font khusus,
Anda dapat mengelola gaya apa pun di sini. Jadi gaya apa pun yang ingin Anda bagikan di
seluruh komponen dapat dikelola dalam lembar gaya global seperti itu, yang bisa berupa pengaturan tata letak umum, yang bisa berupa
warna, yang bisa apa saja yang Anda inginkan, tetapi biasanya Anda selalu harus memilih antara membuat komponen terpisah seperti komponen kartu
yang merupakan pembungkus di sekitar tampilan atau teks tubuh atau teks judul yang juga
hanya pembungkus yang menambahkan beberapa gaya atau mengelola ini di sini dalam stylesheet global, terserah Anda apa
yang Anda inginkan.
Saya pribadi lebih suka pendekatan berbasis komponen karena pada akhirnya Bereaksi adalah semua tentang komponen dan
oleh karena itu saya pikir kita tinggal sedikit lebih dekat dengan dunia Bereaksi standar dengan melakukan
seperti ini tetapi itu juga bukan keputusan di mana Anda selalu harus mengikuti jalur A atau jalur B, Anda dapat mencampur dan
mencocokkan konsep-konsep ini, mungkin Anda kadang-kadang memiliki sesuatu di mana komponen terpisah tidak benar-benar
masuk akal, mengelolanya dalam gaya global, dan dalam kasus lain, mungkin komponen khusus lebih masuk akal daripada memiliki
pengaturan gaya global.