1
00:00:02,140 --> 00:00:06,630
Teraz zaczęliśmy pracować nad danymi wejściowymi i nie wygląda to tak źle, ale

2
00:00:06,630 --> 00:00:13,980
chcemy się upewnić, że użytkownicy mogą wprowadzać tylko liczby, które są tylko cyframi, i że nie możemy tutaj wpisać kropki,

3
00:00:13,980 --> 00:00:16,440
przecinka ani wkleić treść liczbowa i

4
00:00:16,530 --> 00:00:20,280
do tego oczywiście musimy zweryfikować to, co wpisał użytkownik tutaj.

5
00:00:20,550 --> 00:00:27,900
Teraz, aby zweryfikować to, co wprowadził użytkownik, chcę, jak już to pokazałem, w zasadzie zapisać wartość wprowadzoną przez

6
00:00:27,900 --> 00:00:28,440
użytkownika

7
00:00:28,440 --> 00:00:33,510
przy każdym naciśnięciu klawisza i przekazać ją z powrotem do wejścia, ale

8
00:00:33,510 --> 00:00:39,000
po każdym naciśnięciu klawisza chcę również zweryfikować dane wejściowe, aby upewnijmy się, że mamy

9
00:00:39,000 --> 00:00:44,770
tam prawidłową wartość, czyli w zasadzie liczbę. Po pierwsze, musimy zarządzać jakimś stanem

10
00:00:44,860 --> 00:00:54,510
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

11
00:00:54,520 --> 00:01:02,180
zarejestruj stan i będzie to wprowadzona wartość, i mimo że będzie to liczba później, technicznie jest to

12
00:01:02,300 --> 00:01:08,000
ciąg znaków na początku, ponieważ wszystkie dane wejściowe są tylko ciągiem znaków i

13
00:01:08,000 --> 00:01:09,080
musisz

14
00:01:09,080 --> 00:01:15,170
ręcznie przekonwertować to na liczbę, jeśli chcesz. Dodam też tutaj funkcję wprowadzonej wartości, drugi

15
00:01:15,170 --> 00:01:19,220
element, który uzyskujemy ze stanu użycia tablicy, daje nam teraz, a

16
00:01:19,430 --> 00:01:25,660
teraz możemy dodać tutaj stałą, która nazwie nazwę obsługi wprowadzania liczb lub cokolwiek, co chcesz nazwać.

17
00:01:25,700 --> 00:01:32,830
Spowoduje to pobranie tekstu wejściowego i jest to funkcja, ponieważ jest to tylko funkcja,

18
00:01:32,830 --> 00:01:40,690
którą przechowuję w tej stałej, którą chcę połączyć z moim wejściem i tam z onChangeText, wskaż

19
00:01:40,960 --> 00:01:43,930
program obsługi wprowadzania liczb i

20
00:01:43,930 --> 00:01:48,330
podaj wartość z powrotem, a to nasza wprowadzona wartość.

21
00:01:48,420 --> 00:01:54,480
Teraz normalnie powiedzielibyśmy tutaj: ustaw wprowadzoną wartość i ustaw tekst wejściowy jako naszą nową wprowadzoną wartość,

22
00:01:54,480 --> 00:01:56,720
którą przesyłamy z powrotem do

23
00:01:56,820 --> 00:02:01,220
danych wejściowych, ale tutaj właściwie przede wszystkim sprawdzę poprawność wprowadzonej wartości.

24
00:02:01,290 --> 00:02:06,300
Więc tutaj zrobię to, że nie ustawię tutaj wprowadzonej wartości bezpośrednio

25
00:02:06,330 --> 00:02:15,790
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,

26
00:02:15,790 --> 00:02:22,450
a to jest normalna metoda JavaScript, która istnieje na ciągach, w których zastępuję niektóre treści

27
00:02:22,450 --> 00:02:27,430
na podstawie wyrażeń regularnych. Teraz wyrażenia regularne mogą być

28
00:02:27,430 --> 00:02:36,010
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

29
00:02:36,040 --> 00:02:45,250
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

30
00:02:45,250 --> 00:02:51,630
nie będzie po prostu szukał pierwszego trafienia w zasadzie, ale przeszuka cały tekst, zastąpię go

31
00:02:52,850 --> 00:02:53,940
pustym ciągiem,

32
00:02:56,620 --> 00:03:02,440
więc po prostu upuszczę dowolną liczbę wartość. Tak właśnie się dzieje i to właśnie przechowuję

33
00:03:02,440 --> 00:03:04,540
w nowym stanie, a dzięki

34
00:03:04,600 --> 00:03:09,460
temu powinniśmy upewnić się, że użytkownik nie może wprowadzić niczego, co nie jest liczbą.

35
00:03:09,460 --> 00:03:11,410
Sprawdźmy to tutaj

36
00:03:11,410 --> 00:03:16,720
na Androidzie, jeśli naciśniemy przecinek, zobaczysz, że natychmiast zostanie usunięty i właśnie

37
00:03:16,720 --> 00:03:19,960
tego potrzebujemy tutaj, dopuszczamy tylko wartości liczbowe.

38
00:03:19,960 --> 00:03:24,030
To jest trochę poprawności, którą tu mamy, ale to

39
00:03:24,030 --> 00:03:32,890
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

40
00:03:32,890 --> 00:03:37,410
i chcemy zamknąć tę klawiaturę, teraz to naprawdę nie jest wykonalne.

41
00:03:37,420 --> 00:03:44,500
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

42
00:03:44,500 --> 00:03:47,960
zamykamy klawiaturę, jeśli użytkownik stuknie gdzie indziej,

43
00:03:48,160 --> 00:03:56,020
owinę tutaj cały widok specjalnym komponentem dostarczonym przez React Native, który można dotknąć bez komponentu sprzężenia

44
00:03:56,020 --> 00:03:58,490
zwrotnego, a więc komponent,

45
00:03:58,630 --> 00:04:04,960
który pozwala nam aby zarejestrować odbiornika dotykowego bez wizualnej informacji zwrotnej, ponieważ właśnie

46
00:04:04,960 --> 00:04:07,060
tego tutaj potrzebujemy.

47
00:04:07,150 --> 00:04:11,080
Dzięki temu możemy owinąć cały ekran, dzięki czemu cały

48
00:04:11,080 --> 00:04:18,190
nasz widok można owinąć za pomocą tego dotykowego bez nasłuchiwania opinii, dzięki czemu możemy tam zarejestrować

49
00:04:18,190 --> 00:04:24,070
się lub odsłuchać wydarzenie prasowe, a gdy nastąpi prasa, chcę odrzucić klawiatura i

50
00:04:24,070 --> 00:04:30,010
do tego React Native daje nam użyteczny interfejs API, który możemy importować z React

51
00:04:30,010 --> 00:04:37,240
Native i to jest interfejs API klawiatury. To nie jest teraz komponent, ale interfejs API, w

52
00:04:37,240 --> 00:04:43,820
którym możemy wchodzić w interakcje z samym rodzimym urządzeniem, więc w tym przypadku z klawiaturą i tutaj

53
00:04:43,820 --> 00:04:50,230
po naciśnięciu tego przycisku chcę uruchomić funkcję i tutaj prosta funkcja wbudowana, krótka anonimowa funkcja, możesz

54
00:04:50,230 --> 00:04:52,700
oczywiście również użyć funkcji nazwanej, ale

55
00:04:52,870 --> 00:04:57,230
tutaj chcę tylko wywołać klawiaturę. odwołać.

56
00:04:57,310 --> 00:05:02,680
Jest to funkcja, którą daje nam interfejs API klawiatury, który importujemy z React Native, i robi

57
00:05:02,680 --> 00:05:04,220
to, co sugerują nazwy,

58
00:05:04,360 --> 00:05:06,570
więc teraz, jeśli klikniemy tutaj, możemy

59
00:05:06,580 --> 00:05:12,610
pisać, ale jeśli kliknę gdzie indziej, wyłączymy klawiaturę i klawiaturę Oczywiście dzieje się na obu platformach i

60
00:05:12,640 --> 00:05:17,740
myślę, że jest to lepsze doświadczenie użytkownika, ponieważ właśnie tego można się spodziewać, że

61
00:05:18,160 --> 00:05:21,040
zamkniesz klawiaturę, jeśli dotkniesz gdzie indziej na ekranie.