Teraz z tym obrazem dodanym i teraz, gdy już pracujemy nad grą na ekranie,
dopracujmy ten tekst, który widzimy tutaj
na dole, sprawmy, by był trochę ładniejszy, trochę piękniejszy, a ponadto
przed Robię to, w rzeczywistości przestawię się z używania obrazu sieciowego na obraz lokalny,
ale to oczywiście zależy od ciebie, co wolisz.
Więc chcę pracować nad tekstem tutaj i zamiast po prostu mieć tutaj taki tekst
tabelaryczny, który po prostu podaje nudne informacje, dlaczego
nie zaprezentujemy tego w ładniejszy sposób? Mówiąc dokładniej, myślę, że byłoby lepiej,
gdybyśmy mieli tutaj tekst czytelny dla człowieka, a więc prawdziwe zdanie, które możemy przeczytać.
Więc możemy powiedzieć, że twój telefon jest potrzebny, a następnie mamy liczbę rund, rund, aby odgadnąć liczbę i
że tutaj wprowadzimy liczbę.
Tak więc liczba jest oczywiście numerem użytkownika rekwizytów i znowu możesz pozbyć się tej linii
teraz, ale nie chcę tylko wyświetlać numeru użytkownika rekwizytów w ten sposób, zamiast tego chcę go podświetlić,
chcę nadać mu specjalny kolor to różni się od innego koloru tutaj i tutaj jest takie samo dla rund, więc rekwizyty
podają liczbę wartości, byłoby miło, gdyby to również miało inny kolor. Teraz, aby pokolorować to inaczej, możemy
owinąć to tutaj w innym węźle tekstowym. Możesz więc mieć węzły tekstowe, komponenty tekstowe
wewnątrz tekstu, wewnątrz innych komponentów tekstowych, więc
jest to możliwe, właśnie tak.
To naprawdę ważne, aby
zrozumieć, możesz zagnieżdżać komponenty tekstowe w innych komponentach tekstowych i pamiętać, że tekst podstawowy to po
prostu komponent tekstowy, tekst podstawowy to komponent, który po prostu zwraca wbudowany
komponent tekstowy, więc cokolwiek wpisywanie między tekstem jest takie samo, jakbyśmy wprowadzali go między
wbudowanymi komponentami tekstu, dlatego możemy tam zagnieżdżać tekst i teoretycznie możemy mieć tam również zagnieżdżone
widoki, ale są pewne zastrzeżenia, a zatem jeśli nie ma absolutnie żadnego silnego
powodu, dla którego potrzebowałbyś tam widoku, tak naprawdę nie powinieneś zagnieżdżać widoków w
tekście i rzadko jest ku temu powód. Tekst w tekście może jednak
mieć sens, ponieważ pozwala stylizować części tekstu inaczej niż reszta tekstu.
Więc tutaj na przykład chcę dodać styl do stylów. wyróżnij i to samo tutaj dla drugiego tekstu,
aby podświetlić tę część tekstu, a teraz oczywiście możemy dodać wyróżnienie w naszym arkuszu stylów w
grze nad ekranem, wyróżnić i tam na przykład nadać temu kolor, w którym używamy kolorów i w tym celu musimy
dodać import, w którym importujemy kolory ze stałych / kolorów, a następnie może użyć tam
naszego podstawowego koloru, więc kolorów. podstawowy. Jeśli to zrobimy, zobaczysz to teraz, to jest podświetlone.
Teraz także coś interesującego, jeśli chwilowo przejdę do tekstu podstawowego i zmienię go
na
otwarty bez pogrubienia tutaj, więc używam pogrubionej wersji, zobaczysz, że nawet ten podświetlony tekst jest nadal
pogrubiony, może być trochę trudny do zobaczenia ale w rzeczywistości jest to odważne i bardzo
interesujące, ponieważ we wcześniejszej części kursu wspomniałem, że twoje style nie dziedziczą, więc jeśli na przykład
w grze na ekranie ustawisz tutaj rodzinę czcionek, która zostanie zastosowana do widok, który otacza wszystko, ta rodzina czcionek nie
byłaby przekazywana do komponentów zagnieżdżonych w tym widoku.
Więc to, że ustawiłeś styl tutaj w tym widoku, nie oznacza, że wszystkie inne widoki w nim lub wszystkie inne
tam zawarte teksty, cokolwiek to jest, otrzymają te same style. Style stosowane do komponentu zawsze są
po prostu stosowane do tego komponentu, a nie do komponentów zagnieżdżonych, a jednak są różne dla tekstu.
Tam, ten tekst tutaj, podświetlony tekst, który jest zagnieżdżony wewnątrz tekstu podstawowego, również otrzymuje tę śmiałą rodzinę, jeśli zmienimy go na tekst podstawowy
i jest
to po prostu ważna różnica, jaką ma React Native. W przypadku komponentów tekstowych, jeśli dodasz
tam
styl, styl jest przekazywany do zagnieżdżonych komponentów tekstowych, jest to jeden
wyjątek, jaki ma React Native. Tekst w tekście otrzymuje styl zdefiniowany
w tekście zewnętrznym, więc każdy styl ustawiony tutaj w tekście podstawowym jest automatycznie odbierany przez zagnieżdżone komponenty tekstu.
Istnieje jedno dodatkowe ważne zachowanie dotyczące komponentu tekstowego w React Native, a mianowicie to, że nie
korzysta on z Flexboksa. Widok używa Flexboksa,
komponent tekstowy oczywiście nie i wspominałem o tym wcześniej, że komponent
widoku używa Flexboksa nie tekstu ani innych komponentów, ale tekst używa własnego systemu pozycjonowania, w którym automatycznie zawija się
w nową linię, jeśli nie „ Aby zmieścić się w jednej linii i
aby to zademonstrować, możemy przejść do gry na ekranie i owinąć cały tekst tutaj u dołu w
inny widok, więc weź ten tekst i dodaj go tutaj w tym widoku i tam, dodaj styl powiedzmy nazwij to
wynikowy tekst, cokolwiek chcesz nazwać lub kontener wynikowy, aby był bardziej zgodny z innymi nazwami stylów.
Tak więc kontener wyników jest
dodawany do widoku i teraz, jeśli dodam to tutaj, gdziekolwiek tutaj w moim arkuszu stylów, i podam tę szerokość, powiedzmy
80%, co ma sens, aby tekst miał nieco większą odległość
od lewej i prawej lub alternatywnie dodaję margines poziomy, powiedzmy 20, aby mieć pewne odstępy w lewo i prawo wokół
kontenera, wtedy zobaczysz, że tekst jest rzeczywiście zawinięty w nową linię, a to także domyślne
zachowanie komponentu tekstowego w React Native.
Nie tylko analizuje style do tekstu zagnieżdżonego, ale ma także własny system pozycjonowania lub własny układ, w którym tekst
automatycznie zawija się w nową linię, jeśli nie mieści się w tej samej
linii, i ta sama linia, i to oczywiście robi dużo sensownie, zwykle jest to,
co chcesz w tekście, chcesz zawinąć w nowe linie. Teraz z tym przywrócę to ustawienie w tekście,
właściwie
nie użyję tam pogrubionego sansa,
po prostu używam otwartego sansa, ale chciałem pokazać to dziedziczenie stylu i oczywiście
ogólnie wiedzieć, jak zachowuje się tekst pod względem układu.
Wszystko, co zostało powiedziane o tekście,
to jeszcze nie koniec, nie sądzę,
że to wygląda tak ładnie, zamiast tego w grze na ekranie ten podświetlony tekst może być
odważny, więc użyję rodziny czcionek otwartych -sans-pogrubienie tutaj, aby naprawdę się wyróżniało i
było łatwiejsze do zobaczenia, a ponadto dodam tutaj margines poziomy 30, aby mieć nieco więcej odstępu od lewej do
prawej wokół tekstu.
Teraz dodatkowo chcę się upewnić, że tekst jest wyśrodkowany, aby w przypadku podziału linii
był on wyśrodkowany na środku i nie zaczynaliśmy ponownie od lewej krawędzi, a teraz można to
osiągnąć za pomocą specjalna
właściwość stylizacji, którą można dodać do
komponentów tekstowych, a jest to właściwość wyrównania tekstu.
Chodzi o to, że nie chcę tego używać w tekście wyróżnienia, chcę
używać tego w całym tekście głównym, dlatego musimy tutaj dodać styl, być może tekst wynikowy jest
tutaj odpowiedni, ponieważ jest to nasz tekst ogólny, a następnie
tutaj możemy po prostu dodać
tekst wynikowy
i na tym wyniku tekstowym ustawić tekst wyrównać do środka.
Jednak jeśli to zapiszę, nie będzie to miało żadnego efektu, ponieważ nasz tekst nie jest skonfigurowany do uwzględnienia stylu,
prop stylu, który możemy do niego dodać. W tekście głównym jedynym stylem ustawionym na tekst
jest styl zdefiniowany wewnętrznie.
Teraz dowiedzieliśmy się, jak to zmienić, po prostu przekazujemy tutaj obiekt
do stylu, pobieramy wszystkie nasze niestandardowe właściwości stylu z tego pliku i dystrybuujemy je do tego obiektu i łączymy
to z tym, co otrzymujemy w stylu rekwizytów, za pomocą operatora rozkładania
tu też. I dzięki temu,
teraz, jeśli uratujemy to, zobaczymy, że jest to ładnie wyśrodkowane i jest to z pewnością nieco ładniejszy
do czytania niż wcześniej, niż powiedziałem.
Teraz, gdy już prawie skończyliśmy stylizować ten tekst, ostatnia rzecz, która wydaje mi się ładna tutaj, to
to, że jeśli na tekście wynikowym również nieco zwiększymy rozmiar czcionki.
Więc jeśli ustawimy tutaj rozmiar czcionki na 20, to może tak naprawdę duży i na
pojemniku z wynikami, chcę też mieć margines w pionie 15, może mieć także odstępy na górze i na
dole wokół tekstu.
A teraz mamy grę na ekranie, która moim zdaniem nie wygląda źle i nauczyłeś
się dużo o tym, jak działa tekst, więc jak możesz pracować z komponentem tekstowym w React Native.