1 00:00:02,190 --> 00:00:06,450 Sekarang kami telah menambahkan font beberapa kali dalam kursus ini, jadi 2 00:00:06,450 --> 00:00:12,780 tidak terlalu baru cara kerjanya. Di folder aset, saya akan menambahkan folder font tetapi sekali lagi, Anda dapat menyimpannya di mana pun Anda inginkan. Terlampir Anda menemukan dua font yang telah 3 00:00:12,780 --> 00:00:15,470 kami gunakan sepanjang kursus, buka tanpa huruf tebal dan 4 00:00:15,480 --> 00:00:17,550 teratur dan sekarang kita harus memuatnya ketika 5 00:00:17,550 --> 00:00:22,690 aplikasi dimulai di aplikasi. file js. Di sana, 6 00:00:23,100 --> 00:00:34,690 Anda sekarang dapat mengimpor sesuatu dari expo dan sesuatu itu adalah komponen pemuatan aplikasi dan Anda juga perlu mengimpor bintang sebagai 7 00:00:34,690 --> 00:00:42,310 font dari font-expo dan untuk memastikan bahwa ini tersedia, jalankan npm install - save 8 00:00:42,340 --> 00:00:49,870 expo-font untuk menginstal ini ke dalam proyek Anda dan memastikan bahwa Anda dapat menggunakannya. 9 00:00:49,890 --> 00:00:53,760 Sekarang ini adalah dua hal yang perlu Anda instal di sana 10 00:00:53,770 --> 00:00:58,620 dan dengan itu diinstal, kita dapat menambahkan fungsi baru di sini, mungkin nama itu mengambil font. 11 00:00:58,640 --> 00:01:07,690 Ini adalah fungsi yang pada akhirnya tidak memerlukan argumen tetapi di sana, saya sekarang dapat memanggil font load async 12 00:01:08,200 --> 00:01:13,510 dan mengembalikannya karena mengembalikan sebuah janji dan mengambil font harus 13 00:01:13,510 --> 00:01:18,910 mengembalikan sebuah janji dan melewati objek Javascript tempat kita memetakan font 14 00:01:18,940 --> 00:01:25,560 yang kita ingin memuat dan kemudian saya akan memiliki open-sans yang saya petakan ke 15 00:01:25,560 --> 00:01:38,020 map saya memerlukan impor di sini tempat saya menunjuk pada folder assets, fonts folder dan open-sans yang biasa dan juga menambahkan open-sans-bold di sini sebagai kunci dan 16 00:01:38,080 --> 00:01:45,560 peta yang membutuhkan / aset / font / open-sans-bold sehingga kedua font tersebut diimpor di sini. 17 00:01:45,580 --> 00:01:51,230 Sekarang mengambil font tentu saja perlu dipanggil dan itu harus dipanggil oleh komponen pemuatan aplikasi 18 00:01:51,370 --> 00:01:56,800 kita, maka kita juga perlu mengimpor status penggunaan dari React, sehingga kita dapat mengontrol 19 00:01:56,800 --> 00:01:57,990 apakah data 20 00:01:58,240 --> 00:02:06,430 telah dimuat atau belum sehingga dalam komponen fungsional di sini, kita dapat memiliki keadaan font kita dimuat dan mengatur font dimuat 21 00:02:06,430 --> 00:02:09,080 dan awalnya dengan status penggunaan, itu salah. 22 00:02:09,250 --> 00:02:13,190 Jika itu benar, saya ingin membuat output ini, karena itu selama 23 00:02:13,270 --> 00:02:18,970 salah, maka tanda seru di sini, saya ingin mengembalikan komponen pemuatan aplikasi yang memperpanjang pemuatan 24 00:02:18,970 --> 00:02:25,210 kami, layar startup kami dan di sana, kami perlu menyediakan mulai async prop ini yang menunjuk pada 25 00:02:25,930 --> 00:02:30,850 fungsi font fetch yang merupakan fungsi yang dieksekusi ketika komponen ini pertama kali 26 00:02:30,850 --> 00:02:37,350 diberikan dan kemudian pada finish yang menjalankan fungsi setelah pemuatan ini dilakukan dan dalam fungsi ini yang akan 27 00:02:37,350 --> 00:02:38,830 dieksekusi, saya akan 28 00:02:38,830 --> 00:02:45,890 menyetel font saya dimuat ke true sehingga kami tidak lagi membuat pemuatan aplikasi tetapi sebaliknya, kami membuat konten ini. 29 00:02:46,000 --> 00:02:51,490 Sekarang font kita dimuat dan sekarang kita dapat menggunakannya dan saya ingin menggunakannya di dua tempat - item produk 30 00:02:51,520 --> 00:02:58,030 saya yang merupakan komponen yang kami render pada tinjauan produk. Di sana tentu saja kami 31 00:02:58,030 --> 00:03:06,340 memiliki beberapa teks, kami memiliki judul kami dan kami memiliki harga kami di sini 32 00:03:06,340 --> 00:03:12,760 dan itu ada di mana pada judul, saya juga ingin mengatur 33 00:03:12,760 --> 00:03:20,020 keluarga font open-sans-bold dan pada harga, saya juga ingin mengatur keluarga font open-sans 34 00:03:20,020 --> 00:03:29,080 dan pada layar detail produk, sama saja. Harganya mungkin harus mendapatkan keluarga font open-sans-bold untuk memiliki gaya yang 35 00:03:29,080 --> 00:03:33,310 berani dan deskripsi hanya akan mendapatkan font open sans. 36 00:03:33,490 --> 00:03:40,880 Nah, itu tidak semua sebenarnya, di navigator toko di navigator utama saya di sini, 37 00:03:40,880 --> 00:03:41,880 di 38 00:03:41,900 --> 00:03:51,520 opsi navigasi default, saya juga ingin menggunakan font itu di header, jadi gaya judul header di sini sebenarnya harus menjadi 39 00:03:51,520 --> 00:04:01,360 objek tempat saya mengatur keluarga font untuk open-sans-bold untuk menggunakan font sans open bold di sana dan gaya judul header 40 00:04:01,510 --> 00:04:09,600 kembali menentukan bagaimana teks belakang yang kita lihat di iOS ditata dan ini juga harus menggunakan 41 00:04:09,600 --> 00:04:17,120 keluarga font open-sans, bukan huruf tebal Versi: kapan. Dengan itu jika kita sekarang menyimpan ini dan ini ulang, kita 42 00:04:17,860 --> 00:04:23,060 dapat melihat font kita sendiri digunakan. Sekarang kita juga melihat bahwa di sini di iOS, judul kita terpotong, 43 00:04:23,110 --> 00:04:29,330 itu adalah sesuatu yang harus kita perbaiki tetapi secara umum, ini sekarang terlihat seperti seharusnya. Sekarang mari kita pastikan bahwa judul 44 00:04:29,350 --> 00:04:37,010 yang terputus sudah diperbaiki dan untuk itu dalam item produk di sini, di mana kita memiliki judul 45 00:04:37,010 --> 00:04:47,340 itu, di sini judul ini mungkin memiliki margin margin dikurangi hanya 2 karena saya masih suka jarak itu dan sekarang 15% dari tinggi 46 00:04:47,340 --> 00:04:53,800 yang kami berikan pada judul dan harga sudah cukup untuk berbagi ini dan oleh 47 00:04:53,880 --> 00:04:57,390 karena itu sekarang ini terlihat seperti seharusnya. 48 00:04:57,660 --> 00:05:01,540 Sekarang kita menggunakan font khusus, kita dapat pergi ke halaman detail, saya akan 49 00:05:01,710 --> 00:05:06,750 mengatakan sekarang saatnya untuk memastikan bahwa kita dapat menambahkan item ke troli dan karena itu kita membuat 50 00:05:06,750 --> 00:05:08,340 ini ke tombol troli berfungsi.