Teraz zaczęliśmy pracować nad danymi wejściowymi i nie wygląda to tak źle, ale
chcemy się upewnić, że użytkownicy mogą wprowadzać tylko liczby, które są tylko cyframi, i że nie możemy tutaj wpisać kropki,
przecinka ani wkleić treść liczbowa i
do tego oczywiście musimy zweryfikować to, co wpisał użytkownik tutaj.
Teraz, aby zweryfikować to, co wprowadził użytkownik, chcę, jak już to pokazałem, w zasadzie zapisać wartość wprowadzoną przez
użytkownika
przy każdym naciśnięciu klawisza i przekazać ją z powrotem do wejścia, ale
po każdym naciśnięciu klawisza chcę również zweryfikować dane wejściowe, aby upewnijmy się, że mamy
tam prawidłową wartość, czyli w zasadzie liczbę. Po pierwsze, musimy zarządzać jakimś stanem
tutaj na ekranie startowym gry, więc zaimportuję stan użycia, a następnie tutaj na początku tego komponentu, skonfiguruję wywołanie stanu użytkowania, więc
zarejestruj stan i będzie to wprowadzona wartość, i mimo że będzie to liczba później, technicznie jest to
ciąg znaków na początku, ponieważ wszystkie dane wejściowe są tylko ciągiem znaków i
musisz
ręcznie przekonwertować to na liczbę, jeśli chcesz. Dodam też tutaj funkcję wprowadzonej wartości, drugi
element, który uzyskujemy ze stanu użycia tablicy, daje nam teraz, a
teraz możemy dodać tutaj stałą, która nazwie nazwę obsługi wprowadzania liczb lub cokolwiek, co chcesz nazwać.
Spowoduje to pobranie tekstu wejściowego i jest to funkcja, ponieważ jest to tylko funkcja,
którą przechowuję w tej stałej, którą chcę połączyć z moim wejściem i tam z onChangeText, wskaż
program obsługi wprowadzania liczb i
podaj wartość z powrotem, a to nasza wprowadzona wartość.
Teraz normalnie powiedzielibyśmy tutaj: ustaw wprowadzoną wartość i ustaw tekst wejściowy jako naszą nową wprowadzoną wartość,
którą przesyłamy z powrotem do
danych wejściowych, ale tutaj właściwie przede wszystkim sprawdzę poprawność wprowadzonej wartości.
Więc tutaj zrobię to, że nie ustawię tutaj wprowadzonej wartości bezpośrednio
na tekście, zamiast tego ustawię ją na tekst wejściowy, w którym zamieniam, i mogę wywołać replace, ponieważ tekst wejściowy będzie ciągiem,
a to jest normalna metoda JavaScript, która istnieje na ciągach, w których zastępuję niektóre treści
na podstawie wyrażeń regularnych. Teraz wyrażenia regularne mogą być
przerażające, ale to proste, tworzymy je za pomocą dwóch ukośników i tam dodam nawiasy kwadratowe i zasadniczo z tym wyrażeniem
mówię, że zastępuję wszystko, co nie jest liczbą od 0 do 9, więc nie liczba, globalnie w całym tekście, co oznacza, że
nie będzie po prostu szukał pierwszego trafienia w zasadzie, ale przeszuka cały tekst, zastąpię go
pustym ciągiem,
więc po prostu upuszczę dowolną liczbę wartość. Tak właśnie się dzieje i to właśnie przechowuję
w nowym stanie, a dzięki
temu powinniśmy upewnić się, że użytkownik nie może wprowadzić niczego, co nie jest liczbą.
Sprawdźmy to tutaj
na Androidzie, jeśli naciśniemy przecinek, zobaczysz, że natychmiast zostanie usunięty i właśnie
tego potrzebujemy tutaj, dopuszczamy tylko wartości liczbowe.
To jest trochę poprawności, którą tu mamy, ale to
nie wszystko, czego chcę, ale wciąż nie jesteśmy skończeni z wprowadzaniem danych, ponieważ w iOS, jeśli jesteśmy w tym trybie wprowadzania
i chcemy zamknąć tę klawiaturę, teraz to naprawdę nie jest wykonalne.
Nie możemy kliknąć na zewnątrz i zamknąć go i byłoby miło, gdybyśmy mogli. Teraz, aby upewnić się, że możemy i
zamykamy klawiaturę, jeśli użytkownik stuknie gdzie indziej,
owinę tutaj cały widok specjalnym komponentem dostarczonym przez React Native, który można dotknąć bez komponentu sprzężenia
zwrotnego, a więc komponent,
który pozwala nam aby zarejestrować odbiornika dotykowego bez wizualnej informacji zwrotnej, ponieważ właśnie
tego tutaj potrzebujemy.
Dzięki temu możemy owinąć cały ekran, dzięki czemu cały
nasz widok można owinąć za pomocą tego dotykowego bez nasłuchiwania opinii, dzięki czemu możemy tam zarejestrować
się lub odsłuchać wydarzenie prasowe, a gdy nastąpi prasa, chcę odrzucić klawiatura i
do tego React Native daje nam użyteczny interfejs API, który możemy importować z React
Native i to jest interfejs API klawiatury. To nie jest teraz komponent, ale interfejs API, w
którym możemy wchodzić w interakcje z samym rodzimym urządzeniem, więc w tym przypadku z klawiaturą i tutaj
po naciśnięciu tego przycisku chcę uruchomić funkcję i tutaj prosta funkcja wbudowana, krótka anonimowa funkcja, możesz
oczywiście również użyć funkcji nazwanej, ale
tutaj chcę tylko wywołać klawiaturę. odwołać.
Jest to funkcja, którą daje nam interfejs API klawiatury, który importujemy z React Native, i robi
to, co sugerują nazwy,
więc teraz, jeśli klikniemy tutaj, możemy
pisać, ale jeśli kliknę gdzie indziej, wyłączymy klawiaturę i klawiaturę Oczywiście dzieje się na obu platformach i
myślę, że jest to lepsze doświadczenie użytkownika, ponieważ właśnie tego można się spodziewać, że
zamkniesz klawiaturę, jeśli dotkniesz gdzie indziej na ekranie.