Teraz, gdy otrzymaliśmy nagłówek, możemy
kontynuować i kontynuować część, w której użytkownicy mogą wprowadzić liczbę, którą komputer powinien
odgadnąć później. I do tego tutaj w aplikacji. Plik js, pod
nagłówkiem, oczywiście chcę mieć obszar wejściowy użytkownika. Teraz, tak jak poprzednio, zajmę się tym
w osobnym komponencie, a nie tutaj w aplikacji. js, aby wszystkie komponenty były względnie ubogie i
moglibyśmy utworzyć ten komponent tutaj w folderze komponentów, co nie byłoby złe,
ale ponieważ teraz będę pracować nad komponentem, który zasadniczo odpowiada za wszystko, co widzimy na ekranie oprócz nagłówka,
traktuję ten komponent jako rodzaj specjalnego, nadam mu nazwę ekranu i zapiszę go
w folderze ekranów, ponieważ ukończona gra będzie miała zasadniczo trzy różne ekrany -
jeden do konfigurowania i uruchamiania gry, drugi, gdy gra jest gdy gra
się skończy i chcę mieć te specjalne komponenty, które technicznie są całkowicie normalnymi komponentami, ale które
spełniają specjalny cel, chcę je przechowywać w osobnym folderze, a to tylko moja osobista decyzja
projektowa tutaj, nie trzeba je przechowywać. Z technicznego punktu widzenia nie ma powodu, aby to robić lub nie robić
tego, React Native po prostu nie obchodzi.
Więc tutaj go zapiszę i nadam nazwę StartGameScreen. js, aby wyjaśnić w imieniu,
że jest to specjalny komponent, ale jak powiedziałem, technicznie jest to normalny komponent, dlatego importujemy
React z React i oczywiście importujemy również niektóre rzeczy z React Native, a my widać już,
że z pewnością będziemy potrzebować widoku, ponieważ prawdopodobnie nie możesz zbudować żadnego komponentu, ale
możesz, ale nie tak wiele komponentów, które możesz zbudować bez widoków.
Więc zaimportujemy widok tutaj i na pewno będziemy potrzebować arkusza stylów do niektórych stylów i zobaczymy, czego jeszcze
potrzebujemy, z pewnością potrzebujemy również tekstu, tak myślę, abyśmy mogli go już dodać. Teraz z tym utworzę tutaj nową
stałą, uruchomię ekran gry, który jest funkcjonalnym składnikiem wyglądającym tak, w
którym będziemy mieli obiekt stylów z arkuszem stylów. Utwórz, w ten sposób, a następnie wyeksportuję taki ekran startowy gry
i możesz zapisać go jako szablon dla każdego nowego dodawanego komponentu, ponieważ 90% niestandardowych komponentów, które budujesz w React
Native, wygląda tak: importujesz React, importujesz niektóre rzeczy z React Native, definiujesz swój
komponent, nazwa jest oczywiście inna, masz obiekt stylów i eksportujesz go, to prawie zawsze to
samo, więc
możesz zapisać to jako szablon, jeśli chcesz. Nie chcę tutaj jednak, więc po
prostu będę kontynuować pracę nad samym komponentem, a teraz pytanie brzmi: co renderujemy
na ekranie początkowym gry? Jak to powinno wyglądać? Na koniec będę
miał widok otaczający cały mój ekran, ponieważ myślę, że ten rodzaj ma
sens, pozwala nam ustawić ogólną stylizację. Ponownie dodam tutaj właściwość screen do tego obiektu arkusza stylów, który mogę zrobić,
nie będzie kolidował z tym w aplikacji. js, moglibyśmy również wybrać
inne nazwy, te dwa nie są ze sobą powiązane, ponieważ są to ostatecznie
niezależne obiekty Javascript zarządzane w niezależnych plikach. Abyśmy mogli powtarzać tutaj nazwy lub wybierać inne, wybiorę tutaj podobną
nazwę, nazwij ten ekran i skonfiguruję tutaj ogólny styl dla tego widoku otoczenia. Ogólna stylizacja jest taka, że powiedziałem to, aby
wygiąć jeden, aby zabrał całą przestrzeń, jaką może uzyskać, co oznacza, że ponieważ dodam go poniżej nagłówka,
zajmie on całą przestrzeń pod nagłówkiem, zarówno pionowo, jak i poziomo, a poza
tym , Chcę również dodać tutaj dopełnienie o wartości 10, aby zawartość nie znajdowała się bezpośrednio na
krawędziach tego ekranu, ale było trochę odstępów po lewej, prawej, górze i na dole i
dodam wyrównywanie elementów do środka.
Pamiętaj, że każdy widok domyślnie używa flexboksa i domyślnie używa kolumny kierunku wygięcia, wyrównuje elementy,
które ustawiają elementy wzdłuż osi poprzecznej, więc ponieważ domyślnym kierunkiem
jest kolumna, oś poprzeczna jest od lewej do prawej, więc
jest to oś
pozioma, spowoduje to wyrównanie elementów na środku w poziomie, ale nie w pionie.
Tam używamy domyślnego justifyContent flex start, ale ponieważ używam
domyślnego, nie muszę go ustawiać. Więc zostawimy go takim, jaki jest tutaj, a teraz przypiszemy ten styl do tego widoku, a automatyczne
formatowanie zamknęło mój tag tutaj, czego oczywiście nie chcę, więc pozwól
mi to cofnąć, a
teraz mamy ten widok dla naszego ekran gry. Teraz, aby zobaczyć, czy to
działa, po prostu wyślę tutaj tekst,
ekran gry, tylko jakiś zastępczy symbol zastępczy. Sformatuj to i teraz w aplikacji. js, użyjmy
tego ekranu, importując ekran startowy gier z folderu ekranów i tam, uruchom
ekran gry, a następnie po
prostu dodaj go tutaj, w ten sposób. Jeśli to zapiszemy, zobaczymy ekran gry tutaj, a także na Androidzie, więc to
działa.
Używamy tego drugiego osobnego komponentu, którego teraz będziemy używać jako komponentu pełnoekranowego w zasadzie lub prawie
pełnego ekranu,
na końcu pod nagłówkiem.