Oczywiście od Ciebie zależy, jak chcesz stylizować ten potwierdzający tekst tutaj, a właściwie nie powinien
to być tylko tekst, powinien to być widok z tekstem w nim, który wyświetla nasz numer, a następnie
przycisk, aby rozpocząć grę i możesz zdecydowanie zatrzymać wideo w tym momencie i wymyśl własną stylizację,
własny układ.
Mam na myśli pewien układ, który z pewnością będzie się różnić od twojego, ale
nie ma tutaj złej lub właściwej decyzji, więc zdecydowanie skorzystaj z tej okazji jako kolejnej
okazji, aby wymyślić własny układ do tego i przycisk, który teraz nic nie robi
ale to jest to, co pozwoli użytkownikowi uruchomić grę i po krótkiej przerwie, której możesz użyć do
wstrzymania filmu, zaimplementuję moje rozwiązanie razem z tobą.
Oto, jak myślę, że to ładnie by wyglądało.
Chcę mieć widok, aby móc ustawić wokół niego ogólny kontener, a właściwie może nie widok, ale dlaczego
nie użyjemy tutaj naszej karty, to
brzmi jak dobry pomysł.
Teraz, jeśli na to spojrzymy, nie ma marginesu i chcę mieć odstępy między tą
kartą u góry a moją kartą podsumowania.
Dlatego tutaj w tym arkuszu stylów nadam temu osobny styl. Na ekranie startowym nadam
nazwę kontenerowi podsumowującemu, jak zawsze zależy od Ciebie i chcę mieć
margines na górze powiedz 20, jakieś ładne odstępy tutaj i dodaj to za pomocą rekwizytu stylowego do karty tu i tam, chcę powiedzieć, że wybrałeś, a
następnie w nowej linii wypisz liczbę w ładnie przedstawiony sposób, być może liczbę w rodzaju pole z
oddzielną ramką z zaokrąglonymi narożnikami, aby było wyraźnie widoczne lub większe niż
inny tekst, dlatego tutaj dodam widok z tekstem w
środku, w tym tekście będę mieć wybraną liczbę, ale teraz to widok, a tekst
powinien mieć specjalną stylizację, a ponieważ zamierzam go ponownie użyć, właściwie go
złapię i
poddam do nowego komponentu i nadam mu nazwę kontenera numerów. W tym komponencie zaimportuję React z React i zaimportuję widok i tekst z
React Native, a następnie będę miał tutaj element kontenera liczb, wyeksportuję domyślny kontener numerów i oczywiście potrzebujemy tutaj arkusza stylów,
więc skonfigurujmy arkusz stylów również z arkuszem stylów. utwórz tam, a potem w tym komponencie,
zwrócę ten widok tutaj z wybranym numerem, który teraz jednak trzeba przekazać i oczekuję,
że dostanie go między otwierającymi i zamykającymi tagami mojego własnego komponentu
za pomocą podpiera dzieci.
Teraz ten kontener jest oczywiście czymś, co
możesz dowolnie konfigurować, dodam tylko styl kontenera, nazwę kontenera tutaj, gdzie myślę, że szerokość dwóch krawędzi
może wyglądać dobrze, więc trochę szersza, szersza ramka. Kolor obramowania, w którym rzeczywiście chcę użyć mojego koloru podstawowego lub koloru
akcentu, zobaczymy, który z nich wygląda lepiej.
Zaimportujmy więc kolory ze stałych / kolorów i dla koloru obramowania, a następnie na razie użyj akcentu kolorów
i zobaczmy, jak to wygląda. Trochę dopełnienia, aby liczba nie znajdowała
się bezpośrednio na krawędziach tego
otaczającego pola, nie znajduje się bezpośrednio obok granicy, promień granicy 10, aby mieć zaokrąglone granice,
niektóre
zaokrąglone rogi przepraszam, nawiasem mówiąc, jeśli chcesz kierować na poszczególne rogi, możesz to
zrobić za pomocą obramowania lewego górnego promienia, prawego górnego promienia, górnego końca i górnego początku bierze również ustawienia użytkownika dotyczące
tego, czy jest to język od lewej do prawej, czy od prawej do lewej,
aby można było kierować na wszystkie pojedyncze rogi, a także ustaw promień dla wszystkich narożników o promieniu granicy,
a także dodaj mały margines tutaj, margines pionowy wynoszący 10 może być tutaj, aby mieć trochę odstępu od
góry i dołu wokół tego pojemnika, a także ważne, wyśrodkuj tam tekst z wyrównaniem środka elementu
i justifyCentrum treści, wykorzystując zachowanie tego elastycznego pudełka. I z tym chcę również nadać samemu numerowi, więc tekst ma
określony styl i ten styl polega na tym, że nadaję tekstowi również ten akcentujący kolor i chcę użyć czcionki o rozmiarze 22, aby naprawdę
się wyróżniać, a później , użyjemy również niestandardowej czcionki. A potem ten widok tutaj otrzymuje
styl kontenera, a tekst tutaj oczywiście otrzymuje styl liczbowy. Przy takiej konfiguracji możemy użyć kontenera liczb na ekranie
startowym gry, więc po prostu dodajemy ten import, a to, co tutaj robimy,
jest całkiem normalne, że masz wiele składników, z których tworzysz aplikację.
Teraz możemy użyć kontenera liczb w elemencie ekranu startowego gry, dodać go tutaj pod tym tekstem, a
w kontenerze liczb otrzymamy zawartość z podrzędnymi elementami potomnymi, wyprowadzamy ją z podrzędnymi elementami podrzędnymi, co
oznacza, że musimy ją przekazać pomiędzy tagami
otwierającymi i zamykającymi, więc tutaj przekazujemy wybrany numer.
To tylko moja sugestia, jak możemy to stylizować, ale podoba
mi się styl, a na razie dodam tutaj przycisk, który jest samozamykającym się tagiem, wbudowany
przycisk z tytułem gry początkowej, wszystko czapki, aby naprawdę się wyróżniały i zapisały to, a teraz, jeśli wybierzemy tutaj liczbę, otrzymamy
to i nie wygląda to zbyt brzydko. Są jednak dwie rzeczy, które
chcę zmienić: ten tekst powinien być wyśrodkowany, a to pole z liczbą nie
powinno być tak szerokie jak pole otaczające, ale być tak szerokie, jak to konieczne.
Teraz, aby oba działały, pójdę do mojej karty, która zawiera całą zawartość tutaj, a dzięki temu
mam na myśli styl na ekranie startowym gry,
którego również
używam na tej karcie, to jest mój zbiorczy zestaw i oto my może wyrównać elementy, które mają być wyśrodkowane, zamiast używać
domyślnego, który byłby rozciągliwy, a teraz jest to automatycznie wyśrodkowane, a pole jest tylko tak
szerokie, jak wymaga tego liczba.
Teraz to nie wygląda na obskurne, ostatnią
rzeczą, którą właśnie zauważyłem, jest to, że kiedy potwierdzamy dane wejściowe, chcę również użyć interfejsu
API klawiatury, aby zwolnić klawiaturę, więc gdy tylko naciśniemy przycisk potwierdzenia tutaj, również zamykamy klawiaturę, a teraz
mamy tutaj niezły wynik.
Teraz mamy solidny wygląd podstawowy, powiedziałbym, że możemy wybrać
liczbę, przeprowadzamy przybliżoną weryfikację, aby upewnić się, że mamy prawidłową liczbę, a następnym krokiem jest
uruchomienie przycisku uruchamiania gry i zamieniamy to, co widzimy na ekranie, ponieważ nasza gra działa na
ekranie, w którym komputer zgaduje, a następnie upewniamy się, że dajemy użytkownikowi możliwość stwierdzenia, czy
liczby powinny być większe, czy niższe, a
następnie punkt jest zakończony i pokazuje grę na ekranie.