W związku z tym, jak już wspomniano, wróciłem do projektu, nad którym pracowaliśmy i
oczywiście teraz interesuje mnie ekran
edycji produktu, to jest ekran, na którym mam te dane tekstowe z moimi etykietami, a następnie wprowadzanie
tekstu, gdzie obecnie mamy bardzo podstawową obsługę wprowadzania, przynajmniej
pobieramy dane wejściowe użytkownika i przechowujemy je za pomocą stanu React, z hakiem stanu użycia, a
następnie karmimy
wartości Androida z powrotem do wejścia i to wszystko.
To pozwala nam przechwytywać i wykorzystywać dane wejściowe użytkownika, ale po pierwsze, możemy poprawić sposób, w jaki to robimy,
możemy napisać to w sposób bardziej do wielokrotnego użytku i nie dokonujemy żadnej weryfikacji, więc
to są rzeczy, które chcę zmienić w tym module.
Ponadto nie konfigurujemy w żaden sposób naszych danych wejściowych, co oznacza,
że obecnie wszystkie dane tekstowe są równe.
Nie zmieniamy rodzaju klawiatury, którą prezentujemy,
nie oferujemy wprowadzania wielowierszowego na przykład dla dłuższych tekstów, takich jak tutaj dla opisu,
nic takiego się nie dzieje i dlatego zacznijmy od skonfigurowania tych danych wejściowych,
zanim przejdziemy dalej do walidacji i tak dalej. Ważną konfiguracją, którą można dodać do klawiatury,
jest typ klawiatury. Można ustawić podpórkę typu klawiatury i tam masz kilka dostępnych wartości. Teraz masz tutaj sporo wartości,
ale oficjalne dokumenty są również miejscem, z którym powinieneś się skonsultować, zastanawiając się nad typem, który
chcesz tu przypisać, ponieważ podczas odwiedzania oficjalnej dokumentacji wprowadzania tekstu, oczywiście widzisz kilka przykładów, ale potem zobaczysz również
wszystkie rekwizyty, które masz i tam, możesz dowiedzieć się więcej o każdym rekwizycie i
tym, jak możesz go skonfigurować, a na przykład dla
typu klawiatury dowiedzieliśmy się, że tylko te typy są obsługiwane na różnych platformach.
Tak więc, chociaż mamy dostępne konkretne typy iOS i Android, typów tych można używać tylko wraz z kontrolą
platformy, aby upewnić się, że
nie używasz tego typu na Androidzie, który nie jest tam obsługiwany i dlatego nie
miałby żadnych efekt.
Dlatego pozostanę przy różnych typach platform, aby nie musiałem dodawać dodatkowej kontroli platformy i tam, zwykle dla powiedzmy zwykłego
tekstu, trzymalibyśmy się domyślnie, co oczywiście jest typem, którego nie robimy muszę to przypisać, ale to
na przykład zmiany, gdy spojrzymy na naszą cenę wejściową. Tam chcę się upewnić, że ludzie wprowadzają tylko prawidłowe
liczby, że nie wpisują żadnego tekstu, dlatego oczywiście chcę pokazać odpowiednią klawiaturę, która im w tym pomoże, a
jeśli spojrzymy na oficjalną dokumentację, zobaczymy że są
trzy główne typy klawiatur międzyplatformowych, które możemy pokazać - klawiatura numeryczna, klawiatura dziesiętna i
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,
czego chcę tutaj za moją cenę. Dlatego ustawienie tego typu klawiatury tutaj
ma wiele sensu, ponieważ teraz, gdy spojrzymy na tę cenę
wejściową tutaj i przełączę miękką klawiaturę, którą można zrobić za pomocą skrótu polecenia k tutaj na iOS
lub z menu sprzętowym na górze, potem klawiatura, przełącz klawiaturę programową, widać, że teraz otwiera się tutaj ta dziesiętna klawiatura,
podczas gdy na innych wejściach mam normalną klawiaturę tekstową i oczywiście to
samo na Androidzie.
Jeśli pójdziemy tam do administratora, a następnie spojrzymy na cenę, zobaczymy również, że tam, zamiast zwykłej
klawiatury tekstowej, którą otrzymujemy w innych polach wprowadzania, wyświetla się nam ten przyjazny numer.
W ten sposób możemy to skonfigurować i jest to oczywiście ważna konfiguracja. Możemy również skonfigurować inne rzeczy,
na przykład tutaj w polu wprowadzania tytułu.
Jeśli naciśniesz klawisz kontrolny i spojrzysz na autouzupełnianie, zobaczysz wiele rzeczy, które możesz skonfigurować, na
przykład, czy powinna być automatycznie pisana wielkimi literami. Tam masz różne wartości, które możesz
ustawić, na przykład, że postać powinna być pisana wielkimi literami, tylko pełne zdania lub słowa,
a tutaj pójdę na pełne zdania, na przykład, aby pomóc w pisaniu wielkimi literami.
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
automatyczna korekcja, ustawiając ją na false, możesz ją wyłączyć lub po prostu pomijając ją, to
również jest opcja i tak dalej . Istnieje kilka rzeczy, które możesz skonfigurować i
zdecydowanie polecam, jak zawsze, rzucić okiem na oficjalne dokumenty, aby dowiedzieć się o dostępnych opcjach
konfiguracji i ich działaniu, a
także po prostu pobaw się nimi, aby uzyskać pomysł na to, co możesz tam zrobić, na czym polega
każda opcja i co może mieć sens dla Twojej następnej aplikacji. Inną wartością, którą chcę na przykład ustawić,
jest typ klucza powrotu.
Można to ustawić na kilka wartości i
ponownie, jeśli sprawdzisz oficjalne dokumenty, dowiesz się, że nie wszystkie wartości są dostępne na wszystkich
platformach, tylko te pięć są dostępne na różnych platformach i tam możesz w zasadzie skonfigurować ten przycisk
na dole prawy róg. Jeśli spojrzysz na swoje dane wejściowe
tutaj i klikniesz na dowolne dane wejściowe, to ten przycisk tutaj, w prawym dolnym rogu, mówi:
wróć tutaj dla imageUrl. Teraz w tytule ustawiłem go na następny,
więc jeśli klikniesz w pole tytułu, zobaczysz tutaj, że jest szerszy, który jest niemiecki na następny, a to tylko
dlatego, że mam tutaj niemiecki emulator i pozwól mi również zrestartować to na Androidzie, ponieważ tam się zawiesił, abym
mógł go tam również pokazać.
Jeśli przejdziemy do naszych danych wejściowych, kliknij w tytuł, zobaczysz ten następny przycisk tutaj, na imageUrl,
masz ten zrobiony tutaj przycisk, który można skonfigurować z typem klucza powrotu, ale
pamiętaj, że to kontroluje tylko, jak to jest wyświetlane, co tam jest napisane, jaka jest tam etykieta
lub jaki rodzaj przycisku jest prezentowany,
nie zmienia to automatycznie tego, co robi ten przycisk, na przykład jeśli kliknę szerszy przycisk, ta
klawiatura zostanie
zamknięta, to samo jest prawdą, jeśli Klikam tutaj klawisz powrotu.
Teraz, gdy mówimy o zachowaniach wprowadzania tekstu, wszystkie wydarzenia, których możemy słuchać, są interesujące.
Włączając, masz wyobrażenie o wszystkich zdarzeniach, których możesz słuchać, i
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
klawisza i daje pełne zdarzenie wejściowe, onChangeText, który również odpala przy każdym naciśnięciu klawisza, ale podaje
tylko wprowadzony tekst, który zazwyczaj jest tym, co bardziej Cię interesuje.
onEndEditing, gdzie możemy również dowiedzieć się, kiedy to się uruchomi, więc jeśli wejdę tutaj onEndEditing, zobaczmy, kiedy to zostanie wydrukowane
w konsoli, jeśli teraz
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
uruchomił się tutaj, jeśli kliknę na
to, teraz został uruchomiony na Edycji. To samo dotyczy na przykład kliknięcia szerszego
przycisku tutaj, więc w zasadzie za każdym razem, gdy zostawiamy tę klawiaturę z fokusem lub ogólnie, gdy klikamy
również ten zrobiony przycisk.
Ponadto mamy także innych nasłuchiwaczy, na przykład onFocus, który oczywiście uruchamia się, gdy to wejście
zyskuje fokus, lub też onSelectionChange, gdy zaznaczamy tam tekst, lub onSubmitEditing, który jest uruchamiany po kliknięciu tego przycisku powrotu, więc
jeśli dodam tutaj onSubmitEditing, gdy
I dodaj również ten detektor, a także dodaj instrukcję dziennika konsoli, zobaczysz, że teraz to się uruchomi, za każdym razem,
gdy tu wpiszę, nie uruchomi się, za każdym razem, gdy kliknę tutaj, to też nie uruchomi
się, otrzymamy
tylko onEndEditing zaloguj się tutaj, ale uruchomi się, jeśli naciśniesz szerszy klawisz tutaj, zobaczysz
onSubmitEditing, więc jest
to słuchacz, którego użyjesz do odsłuchania po kliknięciu klawisza powrotu, a następnie
możesz zrobić wszystko, co chcesz, na przykład przesłać danych lub automatycznie przenieś fokus do
następnego wejścia za pomocą odniesień, na przykład, jeśli chcesz.
W ten sposób możesz to skonfigurować i tak jak powiedziałem, zaleciłbym zanurzenie się
w tym, aby poczuć, jak
to działa, teraz jednak przejdę dalej i chcę się upewnić, że nie słuchamy tylko sygnałów wejściowych
i przechowujemy wartości, ale sprawdzamy również, co wpisuje użytkownik.