1 00:00:02,210 --> 00:00:07,310 Teraz chcę również użyć tej rodziny czcionek do tytułu nagłówka. 2 00:00:07,310 --> 00:00:10,990 Więc tutaj, w moim nagłówku, w tytule 3 00:00:11,000 --> 00:00:18,560 nagłówka, chcę również ustawić rodzinę czcionek na open-sans-pogrubioną, abyśmy również używali jej tam i dla wszystkich 4 00:00:20,300 --> 00:00:27,110 innych tekstów w tej aplikacji, tak naprawdę chcę użyć mojej otwartej bez czcionki. 5 00:00:27,440 --> 00:00:35,480 Na przykład tutaj, w zielonych grach startowych, mamy nasz tekst, wybieramy liczbę i aby użyć zwykłej czcionki 6 00:00:35,870 --> 00:00:45,080 open sans, możemy oczywiście przypisać tam styl, a następnie użyć na przykład tekstu stylów i dodać ten styl tekstu 7 00:00:45,350 --> 00:00:55,900 tutaj w u dołu, a następnie użyj rodziny czcionek open-sans. Teraz to działa, ale ma oczywiście 8 00:00:55,900 --> 00:00:57,450 wadę. 9 00:00:57,700 --> 00:01:04,810 Minusem jest to, że teraz musisz ręcznie dodać tę rodzinę czcionek do dowolnego tekstu w aplikacji, w którym 10 00:01:04,810 --> 00:01:10,980 chcesz go użyć, i musisz dodać go bezpośrednio do składników tekstu, nie możesz dodać go 11 00:01:11,140 --> 00:01:18,880 do widoku i na przykład ustawić to na ekranie tutaj i polegaj na tym, że są przekazywane do zagnieżdżonych tekstów, 12 00:01:18,880 --> 00:01:21,010 niestety to nie działa. 13 00:01:21,040 --> 00:01:28,120 Jeśli więc przejdę tutaj na ekran i ustawię rodzinę czcionek na open-sans-bold, abyśmy mogli łatwo sprawdzić, czy to działa, czy nie, 14 00:01:28,120 --> 00:01:32,340 widzicie, że to nie jest pogrubione, wybierz liczbę nie jest pogrubioną czcionką. 15 00:01:32,530 --> 00:01:38,250 Przekazywanie go w ten sposób, tak jak działa w CSS, nie działa, ponieważ to nie jest 16 00:01:38,290 --> 00:01:45,130 CSS, to JavaScript, a to, co stosujesz na obiekcie, jest stosowane tylko na elemencie, na komponencie, do którego 17 00:01:45,190 --> 00:01:47,470 ten obiekt stylu jest przyłączony. 18 00:01:47,470 --> 00:01:52,930 Musielibyśmy więc stylizować ten tekst indywidualnie, ale ponownie, odtwarzanie tego stylu w kółko we wszystkich 19 00:01:52,930 --> 00:01:56,760 różnych miejscach może nie być tym, co ostatecznie chcesz zrobić. 20 00:01:57,600 --> 00:02:01,680 Istnieją dwa obejścia lub obejście zawsze brzmi trochę brudno, dwa 21 00:02:01,680 --> 00:02:05,440 sposoby radzenia sobie z tym w bardziej elegancki sposób. 22 00:02:05,460 --> 00:02:12,210 Jednym z nich jest to, że tworzysz oddzielny komponent, może tekst podstawowy lub po prostu 23 00:02:12,210 --> 00:02:13,920 tekstowy, cokolwiek chcesz 24 00:02:13,920 --> 00:02:19,040 nazwać, a ja nazwiemy go BodyText. js i będzie to bardzo 25 00:02:19,040 --> 00:02:27,360 prosty komponent, po prostu importuję React z React i importuję tekst i arkusz stylów z React Native 26 00:02:30,250 --> 00:02:39,730 tutaj, a następnie tutaj tekst treści otrzymuje rekwizyty i po prostu zwraca mój komponent tekstowy w miejscu, w którym wyprowadzam 27 00:02:39,730 --> 00:02:41,650 rekwizyty potomne pomiędzy 28 00:02:41,650 --> 00:02:48,430 tagi tekstowe, abyśmy mogli przekazywać treść do tekstu podstawowego, przekazując go między otwierającym i 29 00:02:48,430 --> 00:02:52,500 zamykającym tagiem tekstowym podczas korzystania z tego komponentu. 30 00:02:52,510 --> 00:02:56,570 Potem mam swoje style i tam używam arkusza stylów. stwórz i oczywiście eksportuję ten 31 00:02:56,950 --> 00:03:01,390 komponent w ten sposób, a teraz tutaj w tym arkuszu stylów, 32 00:03:01,390 --> 00:03:07,370 po prostu ustawiam jeden styl, który stosuję tutaj do tego tekstu, treści stylów lub cokolwiek 33 00:03:08,650 --> 00:03:09,590 chcesz 34 00:03:09,820 --> 00:03:12,680 nazwać, mam tutaj styl treści i jeden 35 00:03:12,910 --> 00:03:19,060 styl I zestaw czcionek open sans i na razie użyję pogrubienia, abyśmy mogli zobaczyć, że 36 00:03:19,060 --> 00:03:20,110 to naprawdę 37 00:03:20,170 --> 00:03:25,890 działa, zanim zmienię go na nieco trudniejszy do zobaczenia, open sans, więc open-sans-bold, a 38 00:03:25,900 --> 00:03:31,900 teraz to jest bardzo prosty składnik, tylko cienkie opakowanie wokół normalnego tekstu, ale cienkie opakowanie, 39 00:03:31,960 --> 00:03:34,360 które zawsze ustawia tę rodzinę 40 00:03:34,420 --> 00:03:39,640 czcionek, a to oznacza, że kiedykolwiek chcemy mieć tekst, który korzysta z 41 00:03:39,640 --> 00:03:46,780 tej jednej rodziny, być może we wszystkich miejscach w aplikacji, zamiast używać zwykły komponent tekstowy React Native, 42 00:03:46,780 --> 00:03:52,920 po prostu używamy właśnie utworzonego komponentu tekstowego. Mogę więc zaimportować tekst podstawowy ze 43 00:03:53,890 --> 00:04:01,630 składników BodyText, importując ten składnik, a teraz mogę po prostu zastąpić tutaj tekst tekstowy tekstem, a jeśli to 44 00:04:01,630 --> 00:04:06,830 zrobimy i zapiszemy to, oczywiście widzimy, że teraz będzie pogrubiony, cóż, 45 00:04:07,090 --> 00:04:12,640 jeśli użyłby go we właściwym tekście, to oczywiście tekst wybrany przez użytkownika, tam 46 00:04:12,640 --> 00:04:17,670 też jest w porządku, ale chcę przejść tutaj, aby wybrać numer. 47 00:04:17,740 --> 00:04:23,800 Więc jeśli użyję go tam, tekstu podstawowego, zawinię ten tekst, widzicie teraz, że jest on pogrubiony i teraz możemy 48 00:04:23,800 --> 00:04:30,850 również cofnąć się i nadać naszemu tekstowi tekstowemu faktycznie zamierzony wygląd sans, który wciąż nie jest domyślną czcionką, ale który może „ Natychmiast 49 00:04:31,240 --> 00:04:33,370 zobaczysz, że jest to inna czcionka. 50 00:04:33,400 --> 00:04:40,240 Jest to więc jedna z opcji przekazywania stylu tekstu lub rodziny czcionek, po prostu tworzysz własny komponent 51 00:04:40,240 --> 00:04:45,250 tekstowy, który zawsze ma tę rodzinę czcionek, a jeśli masz wiele różnych 52 00:04:45,250 --> 00:04:49,670 rodzin czcionek, takich jak tytuł i nagłówek, tworzysz osobne komponenty. 53 00:04:49,790 --> 00:04:55,960 Na przykład tutaj mamy tytuł, więc możemy chcieć użyć go również w innych częściach aplikacji. Możemy 54 00:04:55,960 --> 00:05:02,500 więc dodać tytuł. plik js, który jest w zasadzie tym, co 55 00:05:02,500 --> 00:05:09,700 mamy w tekście, więc po prostu skopiuję go i przeniesie do tekstu tytułowego, a następnie tutaj, mamy tytułowy tytuł 56 00:05:09,910 --> 00:05:12,980 tekstu i tutaj, to jest tytułowy tekst i 57 00:05:12,980 --> 00:05:19,510 tam, używamy open-sans- pogrubienie i być może tytuł, czcionka ma również rozmiar 18, a teraz ponownie zmieńmy 58 00:05:19,530 --> 00:05:26,010 nazwę na tytuł, może ma to większy sens dla stylu prop, ale teraz znowu mamy bardzo cienkie 59 00:05:26,010 --> 00:05:34,110 opakowanie wokół tekstu i we wszystkich miejscach, w których potrzebujemy tytułu, jak na przykład w nagłówku, możemy pozbyć się ręcznego przypisania 60 00:05:34,110 --> 00:05:43,340 stylu tutaj w komponencie nagłówka i zamiast tego po prostu zaimportować nasz tytuł z komponentu tekstu tytułowego i użyć go zamiast tekstu, pozbyć się 61 00:05:43,340 --> 00:05:47,450 tego stylu zadanie tutaj, podobnie jak to i zrób to samo 62 00:05:47,690 --> 00:05:51,520 na ekranie startowym gry. Tam ten tekst może 63 00:05:51,560 --> 00:05:54,750 być teraz tekstem tytułowym, wszystko, co muszę zrobić, 64 00:05:54,920 --> 00:05:57,860 to zaimportować go. Pozwólcie więc, że zaimportuję 65 00:05:57,860 --> 00:06:06,500 tekst tytułu z folderu komponentów i tam, z tekstu tytułu, a teraz możemy go ponownie użyć i tak jak na 66 00:06:06,500 --> 00:06:12,980 przykład wcześniej z kartą, jeśli chcesz, aby nadal można go było dostosować, abyśmy mogli ustawić 67 00:06:12,980 --> 00:06:18,740 więcej na tytuł lub zastąp rozmiar czcionki lub dodaj margines, jak to robimy 68 00:06:18,770 --> 00:06:25,440 tutaj, więc zawsze możesz dodać styl tutaj do tekstu tytułowego, odnieś się do tytułu stylów, 69 00:06:25,530 --> 00:06:32,080 więc do stylu tytułowego mam skonfigurowane tam na ekranie startowym gry i wewnątrz komponentu tekstu 70 00:06:32,080 --> 00:06:37,270 tytułowego, musisz tylko połączyć te przychodzące style ze stylami, które tam 71 00:06:37,270 --> 00:06:38,240 ustawiasz. 72 00:06:38,260 --> 00:06:47,680 Tak więc styl wskazuje teraz na obiekt, w którym bierzesz wszystkie wartości z ustawionych tu tytułów, a następnie łączysz je lub 73 00:06:47,680 --> 00:06:53,510 zastępujesz wszystkimi wartościami ustawionymi w stylu rekwizytów, a teraz masz regulowaną warstwę tekstową, 74 00:06:53,620 --> 00:07:00,190 która ustawia te domyślne style ale które mogą zostać zastąpione i dostosowane do twoich wymagań, 75 00:07:00,190 --> 00:07:01,990 dlatego mamy taki 76 00:07:01,990 --> 00:07:06,330 sam wygląd jak poprzednio, ale teraz z większą użytecznością. 77 00:07:06,340 --> 00:07:08,730 Teraz znowu jest to opcja numer jeden. 78 00:07:08,740 --> 00:07:15,700 Alternatywą byłoby to, że na przykład w folderze stałych masz swoje domyślne style. Plik js lub jakkolwiek chcesz 79 00:07:15,720 --> 00:07:18,070 go nazwać, 80 00:07:18,310 --> 00:07:26,770 tam eksportujesz domyślny arkusz stylów i musisz go zaimportować, importuj arkusz 81 00:07:26,770 --> 00:07:29,530 stylów z React Native. 82 00:07:32,240 --> 00:07:43,590 Eksportujesz domyślny arkusz stylów. utwórz obiekt i tam ustawisz na przykład tekst ciała, dowolne imię, a tutaj 83 00:07:44,070 --> 00:07:45,100 ustawisz 84 00:07:45,150 --> 00:07:50,910 rodzinę czcionek, otwórz sans i może tylko chwilowo, abyśmy mogli zobaczyć, czy to działa, 85 00:07:50,910 --> 00:07:52,520 nadaj jej czerwony kolor. 86 00:07:52,680 --> 00:07:55,480 Teraz możesz zaimportować to do różnych 87 00:07:55,680 --> 00:08:07,630 plików, powiedzmy na ekranie gry, tam możemy teraz zaimportować domyślne style z folderu constans i tam, domyślne style i jeśli teraz chcemy ten domyślny 88 00:08:07,670 --> 00:08:11,070 styl tekstowy, na przykład tutaj na zgadywanie 89 00:08:11,090 --> 00:08:12,930 przeciwników, dobrze wszystko, co 90 00:08:13,160 --> 00:08:19,340 robimy, to ustawiamy tutaj styl, sięgamy do domyślnych stylów i wskazujemy na treść, 91 00:08:19,340 --> 00:08:23,440 a zobaczysz, jeśli zaczniemy grę teraz, ten tekst 92 00:08:23,450 --> 00:08:25,200 będzie czerwony. 93 00:08:25,370 --> 00:08:29,360 Jeśli więc zaczniemy tę grę, przeciwnicy domyślą się na czerwono. 94 00:08:29,390 --> 00:08:35,360 Byłaby to więc alternatywa dla oddzielnych komponentów, że masz po prostu globalnie zarządzany arkusz stylów, 95 00:08:35,360 --> 00:08:38,470 który importujesz do różnych plików, a teraz tak 96 00:08:38,680 --> 00:08:44,760 naprawdę nie potrzebuję czerwonego tekstu, ale chcę, żeby był tam tytuł i tam , Chcę mieć 97 00:08:44,780 --> 00:08:52,730 rodzinę czcionek open-sans-bold i rozmiar czcionki powiedzmy 18 i tak, mam taki sam zestaw w tekście tytułowym, po prostu odtwarzam go 98 00:08:52,970 --> 00:08:55,320 tutaj, aby pokazać obie alternatywy, ponieważ 99 00:08:55,340 --> 00:09:01,010 teraz z tytuł jest ustawiony w ten sposób w domyślnym arkuszu stylów, możemy teraz 100 00:09:01,010 --> 00:09:06,920 przejść do ekranu gry i usłyszeć, że nie używamy tekstu podstawowego, ale używamy tytułu na 101 00:09:07,250 --> 00:09:13,610 podstawie przypuszczenia przeciwnika, a wynikiem tego jest to, że jeśli ponownie uruchomimy tę grę, mam tutaj ten 102 00:09:13,610 --> 00:09:14,630 fajny tytuł. 103 00:09:14,660 --> 00:09:19,670 To jest ważna alternatywa i od Ciebie zależy, który wolisz, oddzielne komponenty, 104 00:09:19,670 --> 00:09:25,560 których używasz ponownie zamiast komponentu tekstowego lub komponentu tekstowego w stylu zarządzanym globalnie, a na 105 00:09:25,760 --> 00:09:31,460 marginesie, w tym globalnie zarządzanym stylu jesteś Oczywiście nie ogranicza się do zarządzania właściwościami 106 00:09:31,460 --> 00:09:37,490 czcionek, możesz tutaj zarządzać dowolnymi stylami. Tak więc wszystkimi stylami, które chcesz udostępniać w 107 00:09:37,490 --> 00:09:43,940 różnych komponentach, można zarządzać w takim globalnym arkuszu stylów, którym mogą być ogólne ustawienia układu, które mogą 108 00:09:43,940 --> 00:09:50,900 być kolorami, które mogą być dowolne, ale zazwyczaj zawsze musisz wybierać między tworzeniem oddzielnych komponentów, takich jak element karty, 109 00:09:50,900 --> 00:09:55,790 który jest zawijany wokół widoku lub tekstu głównego lub tekstu tytułowego, które są 110 00:09:55,790 --> 00:10:01,400 również opakowaniami, które dodają stylizacji lub zarządzają tym tutaj w globalnym arkuszu stylów, zależy od 111 00:10:01,400 --> 00:10:02,780 Ciebie, co wolisz. 112 00:10:02,780 --> 00:10:07,910 Osobiście wolałem podejście oparte na komponentach, ponieważ w końcu React dotyczy wyłącznie komponentów, dlatego 113 00:10:08,180 --> 00:10:13,280 myślę, że jesteśmy trochę bliżej domyślnego świata React, robiąc to w ten sposób, ale 114 00:10:13,310 --> 00:10:20,430 nie jest to również decyzja, w której zawsze musisz podążać ścieżką A lub ścieżkę B, możesz mieszać i łączyć te 115 00:10:20,540 --> 00:10:25,330 koncepcje, może czasami masz coś, w którym oddzielny komponent nie ma większego sensu, 116 00:10:25,350 --> 00:10:31,070 wtedy zarządzaj nim w stylu globalnym, a w innych przypadkach może niestandardowy komponent ma większy sens 117 00:10:31,070 --> 00:10:32,180 niż globalny styl.