1
00:00:02,260 --> 00:00:07,540
W związku z tym, jak już wspomniano, wróciłem do projektu, nad którym pracowaliśmy i

2
00:00:07,540 --> 00:00:09,640
oczywiście teraz interesuje mnie ekran

3
00:00:09,640 --> 00:00:16,060
edycji produktu, to jest ekran, na którym mam te dane tekstowe z moimi etykietami, a następnie wprowadzanie

4
00:00:16,060 --> 00:00:19,540
tekstu, gdzie obecnie mamy bardzo podstawową obsługę wprowadzania, przynajmniej

5
00:00:19,540 --> 00:00:25,390
pobieramy dane wejściowe użytkownika i przechowujemy je za pomocą stanu React, z hakiem stanu użycia, a

6
00:00:25,450 --> 00:00:26,460
następnie karmimy

7
00:00:26,560 --> 00:00:30,200
wartości Androida z powrotem do wejścia i to wszystko.

8
00:00:30,310 --> 00:00:37,210
To pozwala nam przechwytywać i wykorzystywać dane wejściowe użytkownika, ale po pierwsze, możemy poprawić sposób, w jaki to robimy,

9
00:00:37,210 --> 00:00:42,730
możemy napisać to w sposób bardziej do wielokrotnego użytku i nie dokonujemy żadnej weryfikacji, więc

10
00:00:42,760 --> 00:00:46,510
to są rzeczy, które chcę zmienić w tym module.

11
00:00:46,530 --> 00:00:50,850
Ponadto nie konfigurujemy w żaden sposób naszych danych wejściowych, co oznacza,

12
00:00:50,940 --> 00:00:53,850
że obecnie wszystkie dane tekstowe są równe.

13
00:00:53,850 --> 00:00:57,140
Nie zmieniamy rodzaju klawiatury, którą prezentujemy,

14
00:00:57,270 --> 00:01:02,910
nie oferujemy wprowadzania wielowierszowego na przykład dla dłuższych tekstów, takich jak tutaj dla opisu,

15
00:01:02,910 --> 00:01:08,370
nic takiego się nie dzieje i dlatego zacznijmy od skonfigurowania tych danych wejściowych,

16
00:01:08,370 --> 00:01:15,120
zanim przejdziemy dalej do walidacji i tak dalej. Ważną konfiguracją, którą można dodać do klawiatury,

17
00:01:15,180 --> 00:01:21,420
jest typ klawiatury. Można ustawić podpórkę typu klawiatury i tam masz kilka dostępnych wartości. Teraz masz tutaj sporo wartości,

18
00:01:21,420 --> 00:01:26,970
ale oficjalne dokumenty są również miejscem, z którym powinieneś się skonsultować, zastanawiając się nad typem, który

19
00:01:26,970 --> 00:01:33,230
chcesz tu przypisać, ponieważ podczas odwiedzania oficjalnej dokumentacji wprowadzania tekstu, oczywiście widzisz kilka przykładów, ale potem zobaczysz również

20
00:01:33,230 --> 00:01:38,270
wszystkie rekwizyty, które masz i tam, możesz dowiedzieć się więcej o każdym rekwizycie i

21
00:01:38,270 --> 00:01:41,450
tym, jak możesz go skonfigurować, a na przykład dla

22
00:01:41,450 --> 00:01:46,010
typu klawiatury dowiedzieliśmy się, że tylko te typy są obsługiwane na różnych platformach.

23
00:01:46,160 --> 00:01:52,080
Tak więc, chociaż mamy dostępne konkretne typy iOS i Android, typów tych można używać tylko wraz z kontrolą

24
00:01:52,130 --> 00:01:53,750
platformy, aby upewnić się, że

25
00:01:53,750 --> 00:01:58,310
nie używasz tego typu na Androidzie, który nie jest tam obsługiwany i dlatego nie

26
00:01:58,310 --> 00:01:59,560
miałby żadnych efekt.

27
00:02:00,230 --> 00:02:06,430
Dlatego pozostanę przy różnych typach platform, aby nie musiałem dodawać dodatkowej kontroli platformy i tam, zwykle dla powiedzmy zwykłego

28
00:02:06,440 --> 00:02:11,600
tekstu, trzymalibyśmy się domyślnie, co oczywiście jest typem, którego nie robimy muszę to przypisać, ale to

29
00:02:11,600 --> 00:02:18,110
na przykład zmiany, gdy spojrzymy na naszą cenę wejściową. Tam chcę się upewnić, że ludzie wprowadzają tylko prawidłowe

30
00:02:18,110 --> 00:02:24,860
liczby, że nie wpisują żadnego tekstu, dlatego oczywiście chcę pokazać odpowiednią klawiaturę, która im w tym pomoże, a

31
00:02:24,860 --> 00:02:27,850
jeśli spojrzymy na oficjalną dokumentację, zobaczymy że są

32
00:02:28,130 --> 00:02:33,170
trzy główne typy klawiatur międzyplatformowych, które możemy pokazać - klawiatura numeryczna, klawiatura dziesiętna i

33
00:02:33,350 --> 00:02:40,460
numeryczna, a na przykład klawiatura dziesiętna to dane wejściowe, które pozwalają użytkownikowi wprowadzać liczby dziesiętne, co jest właśnie tym,

34
00:02:40,460 --> 00:02:46,250
czego chcę tutaj za moją cenę. Dlatego ustawienie tego typu klawiatury tutaj

35
00:02:46,250 --> 00:02:50,660
ma wiele sensu, ponieważ teraz, gdy spojrzymy na tę cenę

36
00:02:51,080 --> 00:02:58,460
wejściową tutaj i przełączę miękką klawiaturę, którą można zrobić za pomocą skrótu polecenia k tutaj na iOS

37
00:02:58,520 --> 00:03:07,340
lub z menu sprzętowym na górze, potem klawiatura, przełącz klawiaturę programową, widać, że teraz otwiera się tutaj ta dziesiętna klawiatura,

38
00:03:07,340 --> 00:03:12,860
podczas gdy na innych wejściach mam normalną klawiaturę tekstową i oczywiście to

39
00:03:13,220 --> 00:03:14,750
samo na Androidzie.

40
00:03:14,750 --> 00:03:20,590
Jeśli pójdziemy tam do administratora, a następnie spojrzymy na cenę, zobaczymy również, że tam, zamiast zwykłej

41
00:03:20,590 --> 00:03:26,200
klawiatury tekstowej, którą otrzymujemy w innych polach wprowadzania, wyświetla się nam ten przyjazny numer.

42
00:03:26,480 --> 00:03:33,840
W ten sposób możemy to skonfigurować i jest to oczywiście ważna konfiguracja. Możemy również skonfigurować inne rzeczy,

43
00:03:34,010 --> 00:03:38,840
na przykład tutaj w polu wprowadzania tytułu.

44
00:03:39,060 --> 00:03:43,950
Jeśli naciśniesz klawisz kontrolny i spojrzysz na autouzupełnianie, zobaczysz wiele rzeczy, które możesz skonfigurować, na

45
00:03:43,950 --> 00:03:49,560
przykład, czy powinna być automatycznie pisana wielkimi literami. Tam masz różne wartości, które możesz

46
00:03:49,560 --> 00:03:55,590
ustawić, na przykład, że postać powinna być pisana wielkimi literami, tylko pełne zdania lub słowa,

47
00:03:55,590 --> 00:04:01,020
a tutaj pójdę na pełne zdania, na przykład, aby pomóc w pisaniu wielkimi literami.

48
00:04:01,140 --> 00:04:07,350
Możesz także włączyć autokorekcję i dodając ją w ten sposób, upewniasz się, że dla tego wejścia jest włączona

49
00:04:07,350 --> 00:04:12,540
automatyczna korekcja, ustawiając ją na false, możesz ją wyłączyć lub po prostu pomijając ją, to

50
00:04:12,540 --> 00:04:18,120
również jest opcja i tak dalej . Istnieje kilka rzeczy, które możesz skonfigurować i

51
00:04:18,120 --> 00:04:23,730
zdecydowanie polecam, jak zawsze, rzucić okiem na oficjalne dokumenty, aby dowiedzieć się o dostępnych opcjach

52
00:04:23,790 --> 00:04:25,930
konfiguracji i ich działaniu, a

53
00:04:25,980 --> 00:04:32,400
także po prostu pobaw się nimi, aby uzyskać pomysł na to, co możesz tam zrobić, na czym polega

54
00:04:32,400 --> 00:04:40,090
każda opcja i co może mieć sens dla Twojej następnej aplikacji. Inną wartością, którą chcę na przykład ustawić,

55
00:04:40,090 --> 00:04:42,580
jest typ klucza powrotu.

56
00:04:42,580 --> 00:04:44,920
Można to ustawić na kilka wartości i

57
00:04:44,980 --> 00:04:50,350
ponownie, jeśli sprawdzisz oficjalne dokumenty, dowiesz się, że nie wszystkie wartości są dostępne na wszystkich

58
00:04:50,440 --> 00:04:56,260
platformach, tylko te pięć są dostępne na różnych platformach i tam możesz w zasadzie skonfigurować ten przycisk

59
00:04:56,260 --> 00:05:00,130
na dole prawy róg. Jeśli spojrzysz na swoje dane wejściowe

60
00:05:06,070 --> 00:05:12,090
tutaj i klikniesz na dowolne dane wejściowe, to ten przycisk tutaj, w prawym dolnym rogu, mówi:

61
00:05:12,090 --> 00:05:15,950
wróć tutaj dla imageUrl. Teraz w tytule ustawiłem go na następny,

62
00:05:15,960 --> 00:05:21,870
więc jeśli klikniesz w pole tytułu, zobaczysz tutaj, że jest szerszy, który jest niemiecki na następny, a to tylko

63
00:05:21,870 --> 00:05:27,770
dlatego, że mam tutaj niemiecki emulator i pozwól mi również zrestartować to na Androidzie, ponieważ tam się zawiesił, abym

64
00:05:27,770 --> 00:05:29,660
mógł go tam również pokazać.

65
00:05:30,730 --> 00:05:36,280
Jeśli przejdziemy do naszych danych wejściowych, kliknij w tytuł, zobaczysz ten następny przycisk tutaj, na imageUrl,

66
00:05:36,280 --> 00:05:41,080
masz ten zrobiony tutaj przycisk, który można skonfigurować z typem klucza powrotu, ale

67
00:05:41,080 --> 00:05:47,020
pamiętaj, że to kontroluje tylko, jak to jest wyświetlane, co tam jest napisane, jaka jest tam etykieta

68
00:05:47,020 --> 00:05:49,150
lub jaki rodzaj przycisku jest prezentowany,

69
00:05:49,300 --> 00:05:55,150
nie zmienia to automatycznie tego, co robi ten przycisk, na przykład jeśli kliknę szerszy przycisk, ta

70
00:05:55,150 --> 00:05:56,200
klawiatura zostanie

71
00:05:56,200 --> 00:05:59,990
zamknięta, to samo jest prawdą, jeśli Klikam tutaj klawisz powrotu.

72
00:06:00,150 --> 00:06:05,040
Teraz, gdy mówimy o zachowaniach wprowadzania tekstu, wszystkie wydarzenia, których możemy słuchać, są interesujące.

73
00:06:05,340 --> 00:06:09,190
Włączając, masz wyobrażenie o wszystkich zdarzeniach, których możesz słuchać, i

74
00:06:09,210 --> 00:06:15,350
na przykład masz onBlur, który uruchamia się, gdy wejście traci fokus, onChange uruchamia się, więc przy każdym naciśnięciu

75
00:06:15,420 --> 00:06:21,090
klawisza i daje pełne zdarzenie wejściowe, onChangeText, który również odpala przy każdym naciśnięciu klawisza, ale podaje

76
00:06:21,150 --> 00:06:25,230
tylko wprowadzony tekst, który zazwyczaj jest tym, co bardziej Cię interesuje.

77
00:06:25,980 --> 00:06:35,000
onEndEditing, gdzie możemy również dowiedzieć się, kiedy to się uruchomi, więc jeśli wejdę tutaj onEndEditing, zobaczmy, kiedy to zostanie wydrukowane

78
00:06:35,010 --> 00:06:37,440
w konsoli, jeśli teraz

79
00:06:37,440 --> 00:06:46,710
przejdę do moich danych wejściowych i pamiętaj, że jestem w tytule wejściowym, więc jeśli Piszę tam test, widzimy, że nie

80
00:06:46,710 --> 00:06:49,350
uruchomił się tutaj, jeśli kliknę na

81
00:06:49,350 --> 00:06:54,930
to, teraz został uruchomiony na Edycji. To samo dotyczy na przykład kliknięcia szerszego

82
00:06:54,930 --> 00:07:01,920
przycisku tutaj, więc w zasadzie za każdym razem, gdy zostawiamy tę klawiaturę z fokusem lub ogólnie, gdy klikamy

83
00:07:01,920 --> 00:07:03,890
również ten zrobiony przycisk.

84
00:07:03,960 --> 00:07:10,620
Ponadto mamy także innych nasłuchiwaczy, na przykład onFocus, który oczywiście uruchamia się, gdy to wejście

85
00:07:10,620 --> 00:07:19,640
zyskuje fokus, lub też onSelectionChange, gdy zaznaczamy tam tekst, lub onSubmitEditing, który jest uruchamiany po kliknięciu tego przycisku powrotu, więc

86
00:07:19,640 --> 00:07:21,860
jeśli dodam tutaj onSubmitEditing, gdy

87
00:07:21,860 --> 00:07:30,820
I dodaj również ten detektor, a także dodaj instrukcję dziennika konsoli, zobaczysz, że teraz to się uruchomi, za każdym razem,

88
00:07:30,820 --> 00:07:37,820
gdy tu wpiszę, nie uruchomi się, za każdym razem, gdy kliknę tutaj, to też nie uruchomi

89
00:07:37,960 --> 00:07:39,130
się, otrzymamy

90
00:07:39,130 --> 00:07:45,600
tylko onEndEditing zaloguj się tutaj, ale uruchomi się, jeśli naciśniesz szerszy klawisz tutaj, zobaczysz

91
00:07:45,610 --> 00:07:47,290
onSubmitEditing, więc jest

92
00:07:47,290 --> 00:07:52,870
to słuchacz, którego użyjesz do odsłuchania po kliknięciu klawisza powrotu, a następnie

93
00:07:52,870 --> 00:07:59,230
możesz zrobić wszystko, co chcesz, na przykład przesłać danych lub automatycznie przenieś fokus do

94
00:07:59,230 --> 00:08:03,090
następnego wejścia za pomocą odniesień, na przykład, jeśli chcesz.

95
00:08:03,200 --> 00:08:08,240
W ten sposób możesz to skonfigurować i tak jak powiedziałem, zaleciłbym zanurzenie się

96
00:08:08,240 --> 00:08:10,370
w tym, aby poczuć, jak

97
00:08:10,400 --> 00:08:16,160
to działa, teraz jednak przejdę dalej i chcę się upewnić, że nie słuchamy tylko sygnałów wejściowych

98
00:08:16,160 --> 00:08:19,460
i przechowujemy wartości, ale sprawdzamy również, co wpisuje użytkownik.