1 00:00:02,210 --> 00:00:07,310 Sekarang saya juga ingin menggunakan keluarga font ini untuk judul header. 2 00:00:07,310 --> 00:00:10,990 Jadi di sini di komponen header saya, pada 3 00:00:11,000 --> 00:00:18,560 judul header, saya juga ingin mengatur keluarga font menjadi open-sans-bold sehingga kami menggunakannya di sana juga dan 4 00:00:20,300 --> 00:00:27,110 untuk semua teks lain dalam aplikasi ini, saya sebenarnya ingin menggunakan open saya font sans. 5 00:00:27,440 --> 00:00:35,480 Jadi misalnya dalam permainan mulai hijau di sini, kami memiliki teks kami, pilih nomor dan untuk menggunakan font 6 00:00:35,870 --> 00:00:45,080 sans terbuka normal, kita tentu saja dapat menetapkan gaya di sana dan kemudian menggunakan gaya teks misalnya dan menambahkan gaya teks 7 00:00:45,350 --> 00:00:55,900 ini di sini di bawah dan kemudian gunakan font family, open-sans. Sekarang berfungsi tetapi tentu saja memiliki 8 00:00:55,900 --> 00:00:57,450 downside. 9 00:00:57,700 --> 00:01:04,810 Kelemahannya adalah bahwa Anda sekarang perlu menambahkan rumpun font ini ke teks apa pun di aplikasi yang 10 00:01:04,810 --> 00:01:10,980 ingin Anda gunakan dan Anda harus menambahkannya langsung pada komponen teks, Anda tidak dapat 11 00:01:11,140 --> 00:01:18,880 menambahkannya ke tampilan dan misalnya mengatur ini pada layar di sini dan bergantung pada yang diturunkan ke teks bersarang, 12 00:01:18,880 --> 00:01:21,010 sayangnya ini tidak berhasil. 13 00:01:21,040 --> 00:01:28,120 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 14 00:01:28,120 --> 00:01:32,340 atau tidak, Anda melihat ini jelas tidak berani, pilih angka yang tidak tebal. 15 00:01:32,530 --> 00:01:38,250 Jadi meneruskannya seperti ini, seperti berfungsi di CSS tidak berfungsi karena itu bukan 16 00:01:38,290 --> 00:01:45,130 CSS, Javascript dan apa yang Anda terapkan pada objek hanya diterapkan pada elemen, pada komponen tempat 17 00:01:45,190 --> 00:01:47,470 objek gaya ini dilampirkan. 18 00:01:47,470 --> 00:01:52,930 Jadi kita harus men-style teks ini secara individual tetapi sekali lagi, menciptakan style itu berulang-ulang di semua 19 00:01:52,930 --> 00:01:56,760 tempat yang berbeda mungkin bukan yang ingin Anda lakukan pada akhirnya. 20 00:01:57,600 --> 00:02:01,680 Ada dua solusi atau solusi selalu terdengar agak kotor, dua 21 00:02:01,680 --> 00:02:05,440 cara penanganan ini dengan cara yang lebih elegan. 22 00:02:05,460 --> 00:02:12,210 Salah satunya adalah Anda membuat komponen terpisah, mungkin komponen teks tubuh atau hanya komponen teks, apa pun 23 00:02:12,210 --> 00:02:13,920 yang ingin Anda beri 24 00:02:13,920 --> 00:02:19,040 nama dan saya akan menamainya BodyText. js dan itu akan menjadi komponen 25 00:02:19,040 --> 00:02:27,360 yang sangat sederhana, saya hanya mengimpor Bereaksi dari Bereaksi dan saya mengimpor teks dan stylesheet dari Bereaksi Asli di 26 00:02:30,250 --> 00:02:39,730 sini dan kemudian komponen teks tubuh di sini mendapat alat peraga dan hanya mengembalikan komponen teks saya di sini di mana saya menampilkan 27 00:02:39,730 --> 00:02:41,650 alat peraga anak-anak 28 00:02:41,650 --> 00:02:48,430 di antara tag teks sehingga kami dapat meneruskan konten ke teks isi dengan melewatkannya di antara 29 00:02:48,430 --> 00:02:52,500 tag teks pembuka dan penutup saat kami menggunakan komponen ini. 30 00:02:52,510 --> 00:02:56,570 Lalu di sini saya memiliki gaya saya dan di sana, saya menggunakan Stylesheet. buat dan tentu saja saya mengekspor 31 00:02:56,950 --> 00:03:01,390 komponen ini seperti ini dan sekarang di sini di stylesheet ini, saya 32 00:03:01,390 --> 00:03:07,370 cukup menetapkan satu gaya yang saya terapkan di sini untuk teks ini, gaya tubuh atau apa pun 33 00:03:08,650 --> 00:03:09,590 yang 34 00:03:09,820 --> 00:03:12,680 Anda ingin beri nama, memiliki gaya tubuh di 35 00:03:12,910 --> 00:03:19,060 sini dan satu gaya saya set adalah font family open sans dan saya akan menggunakan huruf tebal untuk 36 00:03:19,060 --> 00:03:20,110 saat ini sehingga 37 00:03:20,170 --> 00:03:25,890 kita dapat melihat bahwa ini benar-benar memiliki efek sebelum saya mengubahnya menjadi sedikit lebih sulit dilihat, 38 00:03:25,900 --> 00:03:31,900 open sans, jadi open-sans-bold dan sekarang ini komponen yang sangat sederhana, hanya pembungkus tipis di sekitar teks 39 00:03:31,960 --> 00:03:34,360 normal tetapi bungkus tipis yang selalu 40 00:03:34,420 --> 00:03:39,640 mengatur keluarga font ini dan ini berarti bahwa setiap kali kita ingin memiliki teks yang 41 00:03:39,640 --> 00:03:46,780 menggunakan keluarga yang satu ini, mungkin di semua tempat di aplikasi, daripada menggunakan komponen teks normal oleh React Native, kami hanya 42 00:03:46,780 --> 00:03:52,920 menggunakan komponen teks tubuh yang baru saja saya buat. Jadi saya dapat mengimpor teks tubuh dari komponen 43 00:03:53,890 --> 00:04:01,630 BodyText, mengimpor komponen itu dan sekarang saya dapat dengan mudah mengganti komponen teks di sini dengan teks tubuh dan jika kita melakukan 44 00:04:01,630 --> 00:04:06,830 itu dan kita menyimpan ini, kita tentu saja melihat bahwa sekarang ini akan dicetak tebal, 45 00:04:07,090 --> 00:04:12,640 baik jika saya akan menggunakannya pada teks yang tepat, ini tentu saja teks yang dipilih pengguna, 46 00:04:12,640 --> 00:04:17,670 tidak masalah di sana juga, tetapi saya ingin pergi ke sini untuk memilih nomor. 47 00:04:17,740 --> 00:04:23,800 Jadi jika saya menggunakannya di sana, teks tubuh, bungkus teks ini, Anda lihat sekarang ini tebal dan sekarang kita juga 48 00:04:23,800 --> 00:04:30,850 dapat kembali dan memberikan teks tubuh kita tampilan terbuka yang sebenarnya dimaksudkan yang masih bukan font default tetapi yang dapat ' t segera terlihat 49 00:04:31,240 --> 00:04:33,370 bahwa ini adalah font yang berbeda. 50 00:04:33,400 --> 00:04:40,240 Jadi ini adalah salah satu opsi untuk meneruskan gaya teks di sekitar atau keluarga font di sekitar, Anda cukup membuat 51 00:04:40,240 --> 00:04:45,250 komponen teks Anda sendiri yang selalu memiliki keluarga font ini dan jika Anda memiliki beberapa 52 00:04:45,250 --> 00:04:49,670 keluarga font yang berbeda, seperti judul dan judul, Anda membuat komponen terpisah. 53 00:04:49,790 --> 00:04:55,960 Sebagai contoh di sini, kami memiliki judul, yah kami mungkin ingin menggunakannya di bagian lain aplikasi. Jadi kita 54 00:04:55,960 --> 00:05:02,500 bisa menambahkan TitleText. File js yang pada dasarnya adalah apa yang kita 55 00:05:02,500 --> 00:05:09,700 miliki dalam teks tubuh, jadi saya hanya akan menyalinnya dan memindahkannya ke teks judul dan kemudian di sini, kita memiliki nama 56 00:05:09,910 --> 00:05:12,980 teks judul dan di sini, itu teks judul dan 57 00:05:12,980 --> 00:05:19,510 di sana, kita menggunakan open-sans- tebal dan mungkin untuk judul, juga memiliki ukuran font 18 dan sekarang lagi, mari 58 00:05:19,530 --> 00:05:26,010 ganti nama ini menjadi judul mungkin, lebih masuk akal untuk gaya prop tetapi sekarang lagi, kami memiliki pembungkus 59 00:05:26,010 --> 00:05:34,110 yang sangat tipis di sekitar teks dan di semua tempat di mana kita perlu judul, seperti pada header misalnya, kita dapat menyingkirkan penugasan 60 00:05:34,110 --> 00:05:43,340 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 61 00:05:43,340 --> 00:05:47,450 ini tugas di sini, seperti itu dan lakukan hal yang sama 62 00:05:47,690 --> 00:05:51,520 di layar mulai permainan. Di sana, teks ini sekarang 63 00:05:51,560 --> 00:05:54,750 bisa menjadi teks judul, yang perlu saya lakukan adalah 64 00:05:54,920 --> 00:05:57,860 saya perlu mengimpornya. Jadi izinkan saya mengimpor 65 00:05:57,860 --> 00:06:06,500 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 66 00:06:06,500 --> 00:06:12,980 kartu misalnya, jika Anda ingin ini masih dapat disesuaikan sehingga kita dapat mengatur lebih banyak pada judul atau menimpa 67 00:06:12,980 --> 00:06:18,740 ukuran font atau menambahkan margin seperti yang kita lakukan di sini, baik maka apa yang selalu 68 00:06:18,770 --> 00:06:25,440 dapat Anda lakukan adalah Anda masih dapat menambahkan gaya di sini ke teks judul, merujuk ke judul gaya, sehingga 69 00:06:25,530 --> 00:06:32,080 ke gaya judul yang saya miliki atur di sana di layar permulaan permainan dan di dalam komponen teks judul, 70 00:06:32,080 --> 00:06:37,270 Anda hanya perlu memastikan bahwa Anda menggabungkan gaya masuk ini dengan gaya yang Anda atur 71 00:06:37,270 --> 00:06:38,240 di sana. 72 00:06:38,260 --> 00:06:47,680 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 73 00:06:47,680 --> 00:06:53,510 semua nilai yang diatur dalam gaya alat peraga dan sekarang Anda memiliki lapisan teks yang 74 00:06:53,620 --> 00:07:00,190 dapat disesuaikan yang menetapkan gaya default ini tetapi yang dapat diganti dan disesuaikan dengan kebutuhan Anda dan oleh 75 00:07:00,190 --> 00:07:01,990 karena itu kami memiliki 76 00:07:01,990 --> 00:07:06,330 tampilan yang sama seperti sebelumnya tetapi sekarang dengan lebih banyak kegunaan. 77 00:07:06,340 --> 00:07:08,730 Sekarang lagi, itu opsi nomor satu. 78 00:07:08,740 --> 00:07:15,700 Alternatif untuk itu adalah bahwa misalnya di folder konstanta, Anda memiliki gaya default Anda. file js atau apa pun yang 79 00:07:15,720 --> 00:07:18,070 ingin Anda beri 80 00:07:18,310 --> 00:07:26,770 nama dan di sana, Anda mengekspor stylesheet default dan karenanya Anda perlu mengimpor ini, 81 00:07:26,770 --> 00:07:29,530 impor stylesheet dari React Native. 82 00:07:32,240 --> 00:07:43,590 Anda mengekspor Stylesheet default Anda. buat objek dan di sana Anda mengatur seperti teks tubuh Anda misalnya, nama apa pun yang Anda 83 00:07:44,070 --> 00:07:45,100 inginkan dan 84 00:07:45,150 --> 00:07:50,910 di sini Anda menetapkan keluarga font, open sans dan mungkin hanya sementara sehingga kita dapat melihat apakah 85 00:07:50,910 --> 00:07:52,520 ini berfungsi, beri warna merah. 86 00:07:52,680 --> 00:07:55,480 Sekarang Anda dapat mengimpor ini ke file 87 00:07:55,680 --> 00:08:07,630 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 88 00:08:07,670 --> 00:08:11,070 default misalnya di sini pada lawan menebak, maka 89 00:08:11,090 --> 00:08:12,930 semua yang kita lakukan adalah 90 00:08:13,160 --> 00:08:19,340 kita mengatur gaya di sini, menjangkau ke gaya default dan menunjuk pada teks tubuh dan 91 00:08:19,340 --> 00:08:23,440 Anda akan melihat apakah kita memulai permainan sekarang, teks ini 92 00:08:23,450 --> 00:08:25,200 akan berwarna merah. 93 00:08:25,370 --> 00:08:29,360 Jadi jika kita memulai permainan ini, tebakan lawan berwarna merah. 94 00:08:29,390 --> 00:08:35,360 Jadi ini akan menjadi alternatif untuk memiliki komponen yang terpisah, bahwa Anda hanya memiliki stylesheet yang dikelola 95 00:08:35,360 --> 00:08:38,470 secara global yang Anda impor ke file yang berbeda 96 00:08:38,680 --> 00:08:44,760 dan sekarang saya tidak benar-benar membutuhkan teks tubuh yang berwarna merah tetapi yang saya inginkan ada judul 97 00:08:44,780 --> 00:08:52,730 dan ada , Saya ingin memiliki keluarga font open-sans-bold dan ukuran font katakanlah 18 dan ya saya memiliki pengaturan yang sama dalam 98 00:08:52,970 --> 00:08:55,320 teks judul, saya hanya menciptakannya kembali 99 00:08:55,340 --> 00:09:01,010 di sini untuk menunjukkan kedua alternatif karena sekarang dengan judul diatur seperti ini di stylesheet 100 00:09:01,010 --> 00:09:06,920 default, kita sekarang bisa pergi ke layar permainan dan mendengar tidak menggunakan teks tubuh tetapi menggunakan 101 00:09:07,250 --> 00:09:13,610 judul pada tebakan lawan dan hasilnya adalah jika kita sekarang me-restart permainan ini, kita memiliki judul yang bagus 102 00:09:13,610 --> 00:09:14,630 di sini. 103 00:09:14,660 --> 00:09:19,670 Jadi itu adalah alternatif yang valid dan terserah Anda mana yang Anda inginkan, pisahkan komponen 104 00:09:19,670 --> 00:09:25,560 yang Anda gunakan kembali alih-alih komponen teks atau komponen teks dengan gaya yang dikelola secara global dan sebagai catatan, 105 00:09:25,760 --> 00:09:31,460 dalam gaya yang dikelola secara global, Anda berada di Tentu saja tidak terbatas pada mengelola properti font khusus, 106 00:09:31,460 --> 00:09:37,490 Anda dapat mengelola gaya apa pun di sini. Jadi gaya apa pun yang ingin Anda bagikan di 107 00:09:37,490 --> 00:09:43,940 seluruh komponen dapat dikelola dalam lembar gaya global seperti itu, yang bisa berupa pengaturan tata letak umum, yang bisa berupa 108 00:09:43,940 --> 00:09:50,900 warna, yang bisa apa saja yang Anda inginkan, tetapi biasanya Anda selalu harus memilih antara membuat komponen terpisah seperti komponen kartu 109 00:09:50,900 --> 00:09:55,790 yang merupakan pembungkus di sekitar tampilan atau teks tubuh atau teks judul yang juga 110 00:09:55,790 --> 00:10:01,400 hanya pembungkus yang menambahkan beberapa gaya atau mengelola ini di sini dalam stylesheet global, terserah Anda apa 111 00:10:01,400 --> 00:10:02,780 yang Anda inginkan. 112 00:10:02,780 --> 00:10:07,910 Saya pribadi lebih suka pendekatan berbasis komponen karena pada akhirnya Bereaksi adalah semua tentang komponen dan 113 00:10:08,180 --> 00:10:13,280 oleh karena itu saya pikir kita tinggal sedikit lebih dekat dengan dunia Bereaksi standar dengan melakukan 114 00:10:13,310 --> 00:10:20,430 seperti ini tetapi itu juga bukan keputusan di mana Anda selalu harus mengikuti jalur A atau jalur B, Anda dapat mencampur dan 115 00:10:20,540 --> 00:10:25,330 mencocokkan konsep-konsep ini, mungkin Anda kadang-kadang memiliki sesuatu di mana komponen terpisah tidak benar-benar 116 00:10:25,350 --> 00:10:31,070 masuk akal, mengelolanya dalam gaya global, dan dalam kasus lain, mungkin komponen khusus lebih masuk akal daripada memiliki 117 00:10:31,070 --> 00:10:32,180 pengaturan gaya global.