Teraz, gdy dodano nasze niestandardowe czcionki, jesteśmy w stanie używać ich w naszej
aplikacji i chcę ich używać we wszystkich miejscach, w których wyświetlamy niektóre teksty, tak jak
tutaj, gdy wybrano, tutaj zgadują przeciwnicy, a następnie również na stronie
podsumowania, będzie to również celem tutaj w tej aplikacji, a ponadto, gdy gra się skończy, nie tylko chcę
użyć naszej niestandardowej czcionki tutaj w tej grze na stronie, ale także chcę pokazać obraz, grę ponad obraz
tutaj, więc to
kolejna rzecz, nad którą chcę popracować.
Pierwszym krokiem jest zastąpienie tego tekstu tutaj tekstem podstawowym, aby użyć czcionki, więc importuję tekst podstawowy z folderu składników
i tam, z tekstu podstawowego, a następnie zastępuję wszystkie te elementy tekstowe tutaj tekstem podstawowym, tak
aby podczas gry się skończyło, używamy niestandardowej czcionki, to jest
cel tutaj.
Ale tak jak powiedziałem tylko
jedno, najważniejsze, co powinno się tutaj zdarzyć, to to, że mamy tutaj obraz.
Powiedzmy, że nasza gra jest już nad tytułem, więc użyjmy tutaj tekstu tytułowego, może teraz, gdy
o
tym myślę, zamiast tekstu tytułowego, ale pod tym
tytułem, a więc poniżej gry, koniec wizerunek.
Więc tutaj chcę użyć jakiegoś komponentu, który faktycznie pozwala nam wyświetlić obraz, a React
Native ma taki komponent, ma komponent obrazu. Możemy użyć tutaj obrazu jako normalnego komponentu w naszym
kodzie jsx, podobnie jak samozamykającego się elementu, obraz ma jeden ważny rekwizyt, który jest rekwizytem
źródłowym i rekwizytem źródłowym, jak sugeruje nazwa, musi wskazywać na obraz, a teraz są dwa rodzaje obrazów,
których możesz użyć - obrazy lokalne, które wysyłasz jako część aplikacji, więc które umieszczasz w kodzie
źródłowym, w pakiecie aplikacji na końcu lub obrazy sieciowe, a my będziemy mieć spójrz na oba.
Teraz zacznijmy od lokalnego wizerunku i w tym celu odnosicie sukces. plik png, który możesz przeciągnąć do folderu zasobów, więc nie
w folderze czcionek, ale tylko
w zasobach lub możesz utworzyć podfolder obrazów, jeśli chcesz, to nie ma znaczenia,
będę
go miał
tutaj w zasobach , to ten sukces. plik png i to jest plik, którego
chcę tutaj użyć, więc obraz, który chcę tutaj wyrenderować. Teraz, aby wyrenderować ten obraz tutaj, używamy specjalnej składni, która może
wyglądać dziwnie za pierwszym razem, gdy go zobaczysz. Użyłeś tej wymaganej funkcji, która jest wbudowana w
JavaScript lub która jest obsługiwana przez React Native w Javascript powiedzmy, gdzie przekazujesz ciąg jako argument, a jest
to ciąg wskazujący na obraz i powinna to być ścieżka względna, więc tutaj,
ponieważ jesteśmy w
folderze ekranów, musimy przejść o jeden poziom wyżej, następnie do folderu zasobów, a następnie
tutaj możemy wskazać sukces. png,
właśnie tak.
Teraz mówi to React Native, że chcemy użyć tego obrazu tutaj i za
kulisami, pozwala to React Native skutecznie załadować to, a także spojrzeć na obraz i
na przykład
określić jego szerokość i wysokość, dlatego używamy tego dziwnego wymagają składni i musimy załadować lokalne obrazy w ten sposób.
Teraz, aby
zobaczyć wynik, poprawię aplikację. Plik js tymczasowo, aby upewnić się, że zawsze wyświetlamy tam grę na
ekranie, po prostu dlatego, że nie zawsze muszę przechodzić przez cały ekran, tylko po to, aby sprawdzić, czy został zaktualizowany, czy się zmienił.
Więc gra na ekranie jest tym, co tymczasowo wykorzystam jako moją główną treść tutaj od samego początku i po prostu przekażę fałszywe liczby
liczb rund i numerów użytkowników, znowu robię to tylko po to, aby zacząć grę
na ekranie tutaj i zobacz, co nam to daje. I widzimy, co to nam
daje, daje nam w końcu obraz pełnoekranowy, naprawdę duży obraz.
Powodem tego jest to, że obraz, który ci dałem, jest
dość duży, ten sukces. plik png nie jest
małym plikiem, jest to dość duży obraz dotyczący pikseli, jego szerokości i wysokości.
I jak powiedziałem, kiedy używasz takiego wymagania, dobrą rzeczą jest to, że React Native patrzy na plik obrazu, określa jego szerokość
i wysokość i używa tej samej szerokości i wysokości tutaj, co oznacza, że
renderujemy ten ogromny obraz tutaj w aplikacji a wadą jest po prostu to, że teraz nie mieści się już na
ekranie ani nie zajmuje całego ekranu, ponieważ jest to zbyt duży plik.
Gdybyśmy mieli mniejszy obraz, nie byłby to problem, to po prostu zajmowałby część ekranu,
ale ponieważ jest to duży obraz, zajmuje cały ekran.