Teraz chcę również użyć tej rodziny czcionek do tytułu nagłówka.
Więc tutaj, w moim nagłówku, w tytule
nagłówka, chcę również ustawić rodzinę czcionek na open-sans-pogrubioną, abyśmy również używali jej tam i dla wszystkich
innych tekstów w tej aplikacji, tak naprawdę chcę użyć mojej otwartej bez czcionki.
Na przykład tutaj, w zielonych grach startowych, mamy nasz tekst, wybieramy liczbę i aby użyć zwykłej czcionki
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
tutaj w u dołu, a następnie użyj rodziny czcionek open-sans. Teraz to działa, ale ma oczywiście
wadę.
Minusem jest to, że teraz musisz ręcznie dodać tę rodzinę czcionek do dowolnego tekstu w aplikacji, w którym
chcesz go użyć, i musisz dodać go bezpośrednio do składników tekstu, nie możesz dodać go
do widoku i na przykład ustawić to na ekranie tutaj i polegaj na tym, że są przekazywane do zagnieżdżonych tekstów,
niestety to nie działa.
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,
widzicie, że to nie jest pogrubione, wybierz liczbę nie jest pogrubioną czcionką.
Przekazywanie go w ten sposób, tak jak działa w CSS, nie działa, ponieważ to nie jest
CSS, to JavaScript, a to, co stosujesz na obiekcie, jest stosowane tylko na elemencie, na komponencie, do którego
ten obiekt stylu jest przyłączony.
Musielibyśmy więc stylizować ten tekst indywidualnie, ale ponownie, odtwarzanie tego stylu w kółko we wszystkich
różnych miejscach może nie być tym, co ostatecznie chcesz zrobić.
Istnieją dwa obejścia lub obejście zawsze brzmi trochę brudno, dwa
sposoby radzenia sobie z tym w bardziej elegancki sposób.
Jednym z nich jest to, że tworzysz oddzielny komponent, może tekst podstawowy lub po prostu
tekstowy, cokolwiek chcesz
nazwać, a ja nazwiemy go BodyText. js i będzie to bardzo
prosty komponent, po prostu importuję React z React i importuję tekst i arkusz stylów z React Native
tutaj, a następnie tutaj tekst treści otrzymuje rekwizyty i po prostu zwraca mój komponent tekstowy w miejscu, w którym wyprowadzam
rekwizyty potomne pomiędzy
tagi tekstowe, abyśmy mogli przekazywać treść do tekstu podstawowego, przekazując go między otwierającym i
zamykającym tagiem tekstowym podczas korzystania z tego komponentu.
Potem mam swoje style i tam używam arkusza stylów. stwórz i oczywiście eksportuję ten
komponent w ten sposób, a teraz tutaj w tym arkuszu stylów,
po prostu ustawiam jeden styl, który stosuję tutaj do tego tekstu, treści stylów lub cokolwiek
chcesz
nazwać, mam tutaj styl treści i jeden
styl I zestaw czcionek open sans i na razie użyję pogrubienia, abyśmy mogli zobaczyć, że
to naprawdę
działa, zanim zmienię go na nieco trudniejszy do zobaczenia, open sans, więc open-sans-bold, a
teraz to jest bardzo prosty składnik, tylko cienkie opakowanie wokół normalnego tekstu, ale cienkie opakowanie,
które zawsze ustawia tę rodzinę
czcionek, a to oznacza, że kiedykolwiek chcemy mieć tekst, który korzysta z
tej jednej rodziny, być może we wszystkich miejscach w aplikacji, zamiast używać zwykły komponent tekstowy React Native,
po prostu używamy właśnie utworzonego komponentu tekstowego. Mogę więc zaimportować tekst podstawowy ze
składników BodyText, importując ten składnik, a teraz mogę po prostu zastąpić tutaj tekst tekstowy tekstem, a jeśli to
zrobimy i zapiszemy to, oczywiście widzimy, że teraz będzie pogrubiony, cóż,
jeśli użyłby go we właściwym tekście, to oczywiście tekst wybrany przez użytkownika, tam
też jest w porządku, ale chcę przejść tutaj, aby wybrać numer.
Więc jeśli użyję go tam, tekstu podstawowego, zawinię ten tekst, widzicie teraz, że jest on pogrubiony i teraz możemy
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
zobaczysz, że jest to inna czcionka.
Jest to więc jedna z opcji przekazywania stylu tekstu lub rodziny czcionek, po prostu tworzysz własny komponent
tekstowy, który zawsze ma tę rodzinę czcionek, a jeśli masz wiele różnych
rodzin czcionek, takich jak tytuł i nagłówek, tworzysz osobne komponenty.
Na przykład tutaj mamy tytuł, więc możemy chcieć użyć go również w innych częściach aplikacji. Możemy
więc dodać tytuł. plik js, który jest w zasadzie tym, co
mamy w tekście, więc po prostu skopiuję go i przeniesie do tekstu tytułowego, a następnie tutaj, mamy tytułowy tytuł
tekstu i tutaj, to jest tytułowy tekst i
tam, używamy open-sans- pogrubienie i być może tytuł, czcionka ma również rozmiar 18, a teraz ponownie zmieńmy
nazwę na tytuł, może ma to większy sens dla stylu prop, ale teraz znowu mamy bardzo cienkie
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
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ę
tego stylu zadanie tutaj, podobnie jak to i zrób to samo
na ekranie startowym gry. Tam ten tekst może
być teraz tekstem tytułowym, wszystko, co muszę zrobić,
to zaimportować go. Pozwólcie więc, że zaimportuję
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
przykład wcześniej z kartą, jeśli chcesz, aby nadal można go było dostosować, abyśmy mogli ustawić
więcej na tytuł lub zastąp rozmiar czcionki lub dodaj margines, jak to robimy
tutaj, więc zawsze możesz dodać styl tutaj do tekstu tytułowego, odnieś się do tytułu stylów,
więc do stylu tytułowego mam skonfigurowane tam na ekranie startowym gry i wewnątrz komponentu tekstu
tytułowego, musisz tylko połączyć te przychodzące style ze stylami, które tam
ustawiasz.
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
zastępujesz wszystkimi wartościami ustawionymi w stylu rekwizytów, a teraz masz regulowaną warstwę tekstową,
która ustawia te domyślne style ale które mogą zostać zastąpione i dostosowane do twoich wymagań,
dlatego mamy taki
sam wygląd jak poprzednio, ale teraz z większą użytecznością.
Teraz znowu jest to opcja numer jeden.
Alternatywą byłoby to, że na przykład w folderze stałych masz swoje domyślne style. Plik js lub jakkolwiek chcesz
go nazwać,
tam eksportujesz domyślny arkusz stylów i musisz go zaimportować, importuj arkusz
stylów z React Native.
Eksportujesz domyślny arkusz stylów. utwórz obiekt i tam ustawisz na przykład tekst ciała, dowolne imię, a tutaj
ustawisz
rodzinę czcionek, otwórz sans i może tylko chwilowo, abyśmy mogli zobaczyć, czy to działa,
nadaj jej czerwony kolor.
Teraz możesz zaimportować to do różnych
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
styl tekstowy, na przykład tutaj na zgadywanie
przeciwników, dobrze wszystko, co
robimy, to ustawiamy tutaj styl, sięgamy do domyślnych stylów i wskazujemy na treść,
a zobaczysz, jeśli zaczniemy grę teraz, ten tekst
będzie czerwony.
Jeśli więc zaczniemy tę grę, przeciwnicy domyślą się na czerwono.
Byłaby to więc alternatywa dla oddzielnych komponentów, że masz po prostu globalnie zarządzany arkusz stylów,
który importujesz do różnych plików, a teraz tak
naprawdę nie potrzebuję czerwonego tekstu, ale chcę, żeby był tam tytuł i tam , Chcę mieć
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
tutaj, aby pokazać obie alternatywy, ponieważ
teraz z tytuł jest ustawiony w ten sposób w domyślnym arkuszu stylów, możemy teraz
przejść do ekranu gry i usłyszeć, że nie używamy tekstu podstawowego, ale używamy tytułu na
podstawie przypuszczenia przeciwnika, a wynikiem tego jest to, że jeśli ponownie uruchomimy tę grę, mam tutaj ten
fajny tytuł.
To jest ważna alternatywa i od Ciebie zależy, który wolisz, oddzielne komponenty,
których używasz ponownie zamiast komponentu tekstowego lub komponentu tekstowego w stylu zarządzanym globalnie, a na
marginesie, w tym globalnie zarządzanym stylu jesteś Oczywiście nie ogranicza się do zarządzania właściwościami
czcionek, możesz tutaj zarządzać dowolnymi stylami. Tak więc wszystkimi stylami, które chcesz udostępniać w
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ą
być kolorami, które mogą być dowolne, ale zazwyczaj zawsze musisz wybierać między tworzeniem oddzielnych komponentów, takich jak element karty,
który jest zawijany wokół widoku lub tekstu głównego lub tekstu tytułowego, które są
również opakowaniami, które dodają stylizacji lub zarządzają tym tutaj w globalnym arkuszu stylów, zależy od
Ciebie, co wolisz.
Osobiście wolałem podejście oparte na komponentach, ponieważ w końcu React dotyczy wyłącznie komponentów, dlatego
myślę, że jesteśmy trochę bliżej domyślnego świata React, robiąc to w ten sposób, ale
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
koncepcje, może czasami masz coś, w którym oddzielny komponent nie ma większego sensu,
wtedy zarządzaj nim w stylu globalnym, a w innych przypadkach może niestandardowy komponent ma większy sens
niż globalny styl.