Więc robimy postępy krok po kroku, nie
jesteśmy w stanie wprowadzić liczby.
Wydaje mi się, że technicznie możemy wprowadzić liczbę, jeśli znajdziemy pole wejściowe, oto jest, ale szukanie go
nie jest przyjemne, byłoby fajniej, gdybyś mógł je zobaczyć, prawda?
Dlatego stylizujmy to pole wprowadzania,
to pole wprowadzania tekstu tutaj i tak jak poprzednio, poszedłem to zrobić w osobnym
komponencie.
Więc w folderze składników dodam własne dane wejściowe. plik js i tam, jak zawsze zaimportuj React z React,
a następnie zaimportuj tekst z React Native i tutaj właściwie nie będę potrzebować widoku,
ponieważ po prostu wprowadzimy tekst tutaj w dobrym stylu i skonfigurujemy tam,
a następnie będziemy mieć stała wejściowa tutaj, która jest naszym składnikiem funkcjonalnym, który w końcu również eksportujemy, i oczywiście
potrzebujemy jednego arkusza stylów, ponieważ
należy go teraz stylizować, aby uzyskać jeden domyślny wygląd danych wejściowych, który można ponownie wykorzystać
w tym aplikacji, jeśli potrzebowaliśmy wielu danych wejściowych w różnych miejscach i
to jest
naprawdę sposób myślenia, w który musisz wejść, twórz komponenty wielokrotnego użytku,
abyś nie musiał kopiować kodu ani powtarzać się, ale abyś mógł łatwo udostępniać swoje komponenty
i łatwo tworzyć aplikacje chcesz ze swojego zestawu elementów konstrukcyjnych, które sam tworzysz na końcu.
Więc tutaj moje style protestują za pomocą Arkusza stylów. tworzenie, tak wygląda dobrze i teraz w tym komponencie
chcę zwrócić wprowadzanie tekstu,
więc to wbudowane wprowadzanie tekstu.
Teraz oczywiście moim pomysłem jest to, że
możemy stylizować go stąd, więc przypiszmy styl stamtąd, ale podobnie jak w przypadku karty, byłoby miło, gdybyśmy mogli również ustawić stylizację z zewnątrz,
na przykład specjalną szerokość lub specjalna granica, coś takiego. Aby to umożliwić, ponownie przekażę tutaj obiekt
do stylu i, na przykład,
wezmę wszystkie moje style ustawione w obiekcie moich stylów i tam powiedzmy we właściwości
wejściowej, którą musimy jeszcze dodać, a ponadto dodać również wszystkie style, które czerpiemy ze stylu rekwizytów, abyśmy mogli również ustawiać style
z zewnątrz, a teraz na dole w arkuszu stylów, możemy dodać styl wejściowy,
aby przypisać jakiś styl do danych wejściowych. Więc tutaj moglibyśmy nadać tej wysokości powiedzmy 30, która
powinna być wysokością, która wygląda względnie dobrze i aby coś zobaczyć, chcę również dodać granicę na dole.
Możesz także dodać obramowanie wokół całego wejścia z kolorem obramowania i szerokością obramowania itd. Ale podoba
mi się ten wygląd, w którym mamy tylko obramowanie poniżej wejścia, ale jest to oczywiście całkowicie
subiektywne i coś, co możesz ustawić zgodnie z własnymi preferencjami .
Obramowanie tylko u dołu można ustawić kolorem dolnego obramowania, a tam pójdę z szarym, innym
gotowym kolorem, którego możemy użyć z tym skrótem i nadać temu dolnemu obramowaniu również szerokość jednego z nich, dodaj margines w
pionie z 10, aby mieć trochę odstępów wokół wejścia, przynajmniej do góry i do
dołu, a teraz przy tym styl bazowy
dla tego wprowadzania
tekstu jest gotowy, użyjmy go teraz na ekranie gry. Tak więc tam chcę zaimportować własne dane wejściowe
z folderu wejściowego składników, i zastąpić
to wprowadzanie tekstu tutaj własnym wprowadzeniem, które ostatecznie otacza to wbudowane wprowadzanie
tekstu.
Więc skorzystaj
z moich własnych danych wejściowych, pozbądź się tam wprowadzania tekstu, którego
już nie potrzebujemy, a teraz, jeśli to zapiszemy, zobaczymy to trochę, ale jest bardzo małe, ledwo widać to tutaj na
iOS i to staje się coraz większy podczas pisania, co oczywiście nie jest tym, czego chcemy.
Oczywiście nie skończyliśmy, zamiast stylizować
szerokość, przejdę do ekranu startowego gry,
więc do miejsca, w
którym używamy danych wejściowych i konfiguruję tutaj styl, ponieważ dla
mnie ma sens, że mamy ogólne style, które zawsze chcemy w elemencie wejściowym, takie
jak wysokość lub obramowanie, ale niektóre określone style, na przykład jak duży powinien być, więc jak
szeroki
powinien być, to jest coś, co chcesz ustawić w
miejscu, w którym faktycznie używasz i dlatego tutaj dodam tę właściwość wejściową do obiektu arkusza stylów ekranu startowego gry i być może
użyję tutaj szerokości 50 pikseli, która powinna wyglądać dobrze i przypisać ją do moich niestandardowych danych wejściowych za
pomocą prop stylu
Zatem możemy teraz wskazać style. i dzięki temu będzie miał tę szerokość przez cały czas,
a jeśli tam piszemy, nie będziemy już
jej rozszerzać, zamiast tego możemy po prostu automatycznie przewijać w danych wejściowych.
Teraz dla tego konkretnego wejścia, dla tego konkretnego układu tutaj, byłoby również miło, gdyby tekst
był
wyśrodkowany, myślę, w przypadku większości danych wejściowych chcesz tego domyślnego zachowania pisania od lewej do
prawej i
rozpoczynania od lewej krawędzi, ale tutaj myślę, że jakiś wyśrodkowany tekst byłby fajny, dlatego na ekranie gry, w której
chcę mieć to wyśrodkowanie tutaj, przy tym wprowadzeniu
możemy również dodać właściwość wyrównywania tekstu i ustawić ją na środek, a teraz wyśrodkuje ona ten tekst na
środku jako piszemy i to
jest naprawdę miłe po prostu wpisując liczbę, w ten sposób.
Mówiąc o tym, w tej chwili możemy
wprowadzić tam wszystko, więc z pewnością musimy skonfigurować to wejście i jeśli to zrobię,
jeśli przejdę do komponentu wejściowego, w którym używamy wprowadzania tekstu, jest wiele rzeczy, które możemy tam
skonfigurować i faktycznie najlepszym źródłem jest zawsze oficjalna dokumentacja. Tam, w dokumentach API, jeśli tam pójdziesz i poszukasz
wprowadzania tekstu, znajdziesz nie tylko wyjaśnienie, ale także wszystkie rekwizyty, które możesz tam ustawić, i możesz ustawić takie
rzeczy, czy to wielowierszowe czy nie , jak
długi może być tekst.
Możesz także ustawić tekst
zastępczy, możesz ustawić autokorekcję i wszystkie inne fajne rzeczy, więc
zdecydowanie sprawdź te dokumenty, aby znaleźć konkretną właściwość, której możesz potrzebować w przypadku użycia.
Chcę mieć możliwość ustawiania tych rekwizytów, ale chcę mieć możliwość ustawiania ich z miejsca,
w którym używam niestandardowych danych wejściowych. Więc nie stąd, ponieważ zapewniłoby to stosowanie tej samej
konfiguracji dla wszystkich danych wejściowych, które
moglibyśmy mieć w naszej aplikacji, chcę mieć większą elastyczność i po prostu skonfigurować tutaj styl bazowy i skonfigurować
dane wejściowe w miejscu, w którym następnie użyj go zamiast w składniku opakowania rdzenia.
Fajną rzeczą jest React, a nie React Native, to po prostu React w normalnym Javascriptie ma
taką składnię.
Możesz wziąć otrzymane rekwizyty i rozłożyć je na swoim składniku w ten sposób.
Składnia może wyglądać nieco dziwnie, ale w końcu bierze wszystkie
rekwizyty, które masz, wszystkie ustawione tutaj rekwizyty i w zasadzie dodaje je do komponentu jako rekwizyty.
Teraz, jeśli później zdefiniujesz inne rekwizyty, takie jak styl, a już masz tutaj
styl, ten styl zastąpi styl, który tu
masz i to jest właśnie to, czego chcę, ponieważ jeśli ustawię rekwizyt stylu na własną
rękę z zewnątrz, zdecydowanie chcę to zastąpić tym rekwizytem stylu i dodać styl, który jest tam ustawiony, do wprowadzania
tekstu,
ale jeśli ustawisz inne rekwizyty poza tym komponentem, więc na moim niestandardowym komponencie, zostaną one dodane
do tekstu i pozwala nam dodać wszystkie rekwizyty, które możemy dodać przy wprowadzaniu tekstu również przy
naszym wprowadzaniu, a więc na naszym własnym komponencie.
Tak więc tutaj, gdzie używamy danych wejściowych, możemy teraz nie tylko dodać styl, ale możemy również dodać rozmycie, na
przykład, aby upewnić się, że kiedy naciśniemy przycisk wysyłania, stracimy
fokus i zamkniemy miękką klawiaturę. Możemy ustawić autocapitalize na none, co jest jedną z dozwolonych
wartości, jeśli sprawdzicie dokumenty. Możesz ustawić na brak, zdania,
słowa i tak dalej, więc nie chcę tutaj włączać wielkich liter, ponieważ wprowadzimy tylko liczbę, ale
także dlatego, że chcę pokazać ci różne konfiguracje, które możesz ustawić. Ustawię tutaj autokorekty na wartość false,
abyśmy nie korygowali automatycznie danych wprowadzanych przez użytkownika, i bardzo
ważne tutaj, ustawię typ klawiatury na numeryczną, aby użytkownik musiał wprowadzić tutaj liczbę.
Ustawię tutaj maksymalną długość na 2, aby można było wprowadzić tylko dwie cyfry, a nie bardzo długą liczbę,
ponieważ ta gra tutaj i to tylko jedno z ograniczeń, które tu mam, to że ta gra działa
tylko z dwucyfrowymi numer. Po skonfigurowaniu tego wszystkiego,
jeśli teraz wrócimy, a ja przełączę klawiaturę, zobaczysz, że masz tutaj tę klawiaturę numeryczną i
możesz tam wpisać tylko dwie cyfry i nie więcej, co jest oczywiście dokładnie tym, czego chcę.
Ponadto tutaj na Androidzie widzimy to, jeśli klikniesz przycisk potwierdzenia,
to go zamknie, to dzięki temu rozmyciuOnSubmit. W systemie iOS taki przycisk nie istnieje tutaj, więc tam naprawdę
będziemy musieli znaleźć inne rozwiązanie, aby to zamknąć, jeśli stukniesz gdzie indziej, na przykład, ponieważ teraz
tak się nie dzieje.
Ale dobrą rzeczą jest to, że mamy teraz klawiaturę, którą widzimy, i klawiaturę, na której możemy wprowadzać cyfry.
Jedną rzeczą, którą chcę zmienić, jest to, że teraz mogę również wprowadzić separator dziesiętny.
Teraz, aby się tego pozbyć, możesz zmienić typ klawiatury na klawiaturę numeryczną i zobaczyć wszystkie dostępne typy klawiatury, jak
zawsze, gdzie są oficjalne dokumenty, gdzie można wprowadzić tekst, możesz zanurzyć się w typ klawiatury i
znaleźć dowiedzieć się, co możesz ustawić, co działa na wszystkich platformach i co możesz ustawić,
jeśli masz sprawdzanie, na której platformie uruchamiasz kod, o którym jeszcze się nie
dowiedzieliśmy.
Klawiatura numeryczna jest obsługiwana na obu platformach, a jeśli
to ustawisz, masz teraz wejście, w którym nie możesz wpisać tutaj miejsca dziesiętnego, jeśli wpiszesz
tutaj i nie możesz tego zrobić na iOS. Na Androida niestety możesz, ale tam też
będziemy musieli znaleźć inną poprawkę.