1
00:00:02,390 --> 00:00:05,610
Więc robimy postępy krok po kroku, nie

2
00:00:05,660 --> 00:00:08,150
jesteśmy w stanie wprowadzić liczby.

3
00:00:08,150 --> 00:00:14,090
Wydaje mi się, że technicznie możemy wprowadzić liczbę, jeśli znajdziemy pole wejściowe, oto jest, ale szukanie go

4
00:00:14,090 --> 00:00:17,920
nie jest przyjemne, byłoby fajniej, gdybyś mógł je zobaczyć, prawda?

5
00:00:18,680 --> 00:00:22,270
Dlatego stylizujmy to pole wprowadzania,

6
00:00:22,280 --> 00:00:30,470
to pole wprowadzania tekstu tutaj i tak jak poprzednio, poszedłem to zrobić w osobnym

7
00:00:30,470 --> 00:00:31,260
komponencie.

8
00:00:31,310 --> 00:00:40,520
Więc w folderze składników dodam własne dane wejściowe. plik js i tam, jak zawsze zaimportuj React z React,

9
00:00:40,520 --> 00:00:46,580
a następnie zaimportuj tekst z React Native i tutaj właściwie nie będę potrzebować widoku,

10
00:00:46,580 --> 00:00:51,970
ponieważ po prostu wprowadzimy tekst tutaj w dobrym stylu i skonfigurujemy tam,

11
00:00:51,970 --> 00:00:59,880
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

12
00:00:59,880 --> 00:01:01,980
potrzebujemy jednego arkusza stylów, ponieważ

13
00:01:02,280 --> 00:01:08,550
należy go teraz stylizować, aby uzyskać jeden domyślny wygląd danych wejściowych, który można ponownie wykorzystać

14
00:01:08,550 --> 00:01:13,710
w tym aplikacji, jeśli potrzebowaliśmy wielu danych wejściowych w różnych miejscach i

15
00:01:13,710 --> 00:01:15,120
to jest

16
00:01:15,120 --> 00:01:20,130
naprawdę sposób myślenia, w który musisz wejść, twórz komponenty wielokrotnego użytku,

17
00:01:20,130 --> 00:01:26,460
abyś nie musiał kopiować kodu ani powtarzać się, ale abyś mógł łatwo udostępniać swoje komponenty

18
00:01:26,460 --> 00:01:32,700
i łatwo tworzyć aplikacje chcesz ze swojego zestawu elementów konstrukcyjnych, które sam tworzysz na końcu.

19
00:01:32,700 --> 00:01:41,650
Więc tutaj moje style protestują za pomocą Arkusza stylów. tworzenie, tak wygląda dobrze i teraz w tym komponencie

20
00:01:41,710 --> 00:01:44,230
chcę zwrócić wprowadzanie tekstu,

21
00:01:44,230 --> 00:01:46,990
więc to wbudowane wprowadzanie tekstu.

22
00:01:46,990 --> 00:01:49,830
Teraz oczywiście moim pomysłem jest to, że

23
00:01:49,870 --> 00:01:58,180
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,

24
00:01:58,180 --> 00:02:05,200
na przykład specjalną szerokość lub specjalna granica, coś takiego. Aby to umożliwić, ponownie przekażę tutaj obiekt

25
00:02:05,380 --> 00:02:08,050
do stylu i, na przykład,

26
00:02:08,050 --> 00:02:14,470
wezmę wszystkie moje style ustawione w obiekcie moich stylów i tam powiedzmy we właściwości

27
00:02:14,470 --> 00:02:23,970
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

28
00:02:23,970 --> 00:02:30,060
z zewnątrz, a teraz na dole w arkuszu stylów, możemy dodać styl wejściowy,

29
00:02:30,060 --> 00:02:37,180
aby przypisać jakiś styl do danych wejściowych. Więc tutaj moglibyśmy nadać tej wysokości powiedzmy 30, która

30
00:02:37,180 --> 00:02:43,420
powinna być wysokością, która wygląda względnie dobrze i aby coś zobaczyć, chcę również dodać granicę na dole.

31
00:02:43,450 --> 00:02:49,120
Możesz także dodać obramowanie wokół całego wejścia z kolorem obramowania i szerokością obramowania itd. Ale podoba

32
00:02:49,310 --> 00:02:54,970
mi się ten wygląd, w którym mamy tylko obramowanie poniżej wejścia, ale jest to oczywiście całkowicie

33
00:02:55,060 --> 00:02:59,120
subiektywne i coś, co możesz ustawić zgodnie z własnymi preferencjami .

34
00:02:59,250 --> 00:03:06,160
Obramowanie tylko u dołu można ustawić kolorem dolnego obramowania, a tam pójdę z szarym, innym

35
00:03:06,160 --> 00:03:16,110
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

36
00:03:16,110 --> 00:03:22,680
pionie z 10, aby mieć trochę odstępów wokół wejścia, przynajmniej do góry i do

37
00:03:22,890 --> 00:03:26,380
dołu, a teraz przy tym styl bazowy

38
00:03:26,400 --> 00:03:28,170
dla tego wprowadzania

39
00:03:28,170 --> 00:03:36,660
tekstu jest gotowy, użyjmy go teraz na ekranie gry. Tak więc tam chcę zaimportować własne dane wejściowe

40
00:03:36,660 --> 00:03:39,890
z folderu wejściowego składników, i zastąpić

41
00:03:40,930 --> 00:03:46,690
to wprowadzanie tekstu tutaj własnym wprowadzeniem, które ostatecznie otacza to wbudowane wprowadzanie

42
00:03:46,690 --> 00:03:47,440
tekstu.

43
00:03:47,500 --> 00:03:48,510
Więc skorzystaj

44
00:03:48,510 --> 00:03:52,300
z moich własnych danych wejściowych, pozbądź się tam wprowadzania tekstu, którego

45
00:03:52,600 --> 00:03:59,370
już nie potrzebujemy, a teraz, jeśli to zapiszemy, zobaczymy to trochę, ale jest bardzo małe, ledwo widać to tutaj na

46
00:03:59,410 --> 00:04:04,600
iOS i to staje się coraz większy podczas pisania, co oczywiście nie jest tym, czego chcemy.

47
00:04:04,900 --> 00:04:06,590
Oczywiście nie skończyliśmy, zamiast stylizować

48
00:04:07,200 --> 00:04:09,290
szerokość, przejdę do ekranu startowego gry,

49
00:04:09,300 --> 00:04:10,950
więc do miejsca, w

50
00:04:10,980 --> 00:04:14,460
którym używamy danych wejściowych i konfiguruję tutaj styl, ponieważ dla

51
00:04:14,460 --> 00:04:19,200
mnie ma sens, że mamy ogólne style, które zawsze chcemy w elemencie wejściowym, takie

52
00:04:19,380 --> 00:04:24,720
jak wysokość lub obramowanie, ale niektóre określone style, na przykład jak duży powinien być, więc jak

53
00:04:24,720 --> 00:04:25,230
szeroki

54
00:04:25,350 --> 00:04:28,480
powinien być, to jest coś, co chcesz ustawić w

55
00:04:28,650 --> 00:04:36,150
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

56
00:04:36,150 --> 00:04:42,360
użyję tutaj szerokości 50 pikseli, która powinna wyglądać dobrze i przypisać ją do moich niestandardowych danych wejściowych za

57
00:04:42,450 --> 00:04:43,760
pomocą prop stylu

58
00:04:43,830 --> 00:04:51,840
Zatem możemy teraz wskazać style. i dzięki temu będzie miał tę szerokość przez cały czas,

59
00:04:51,840 --> 00:04:55,380
a jeśli tam piszemy, nie będziemy już

60
00:04:55,380 --> 00:05:00,040
jej rozszerzać, zamiast tego możemy po prostu automatycznie przewijać w danych wejściowych.

61
00:05:00,150 --> 00:05:05,760
Teraz dla tego konkretnego wejścia, dla tego konkretnego układu tutaj, byłoby również miło, gdyby tekst

62
00:05:05,760 --> 00:05:06,500
był

63
00:05:06,600 --> 00:05:12,330
wyśrodkowany, myślę, w przypadku większości danych wejściowych chcesz tego domyślnego zachowania pisania od lewej do

64
00:05:12,330 --> 00:05:13,220
prawej i

65
00:05:13,260 --> 00:05:20,480
rozpoczynania od lewej krawędzi, ale tutaj myślę, że jakiś wyśrodkowany tekst byłby fajny, dlatego na ekranie gry, w której

66
00:05:20,480 --> 00:05:23,550
chcę mieć to wyśrodkowanie tutaj, przy tym wprowadzeniu

67
00:05:23,660 --> 00:05:30,470
możemy również dodać właściwość wyrównywania tekstu i ustawić ją na środek, a teraz wyśrodkuje ona ten tekst na

68
00:05:30,470 --> 00:05:32,330
środku jako piszemy i to

69
00:05:32,330 --> 00:05:35,830
jest naprawdę miłe po prostu wpisując liczbę, w ten sposób.

70
00:05:36,920 --> 00:05:40,260
Mówiąc o tym, w tej chwili możemy

71
00:05:40,550 --> 00:05:45,980
wprowadzić tam wszystko, więc z pewnością musimy skonfigurować to wejście i jeśli to zrobię,

72
00:05:45,980 --> 00:05:52,250
jeśli przejdę do komponentu wejściowego, w którym używamy wprowadzania tekstu, jest wiele rzeczy, które możemy tam

73
00:05:52,250 --> 00:05:59,030
skonfigurować i faktycznie najlepszym źródłem jest zawsze oficjalna dokumentacja. Tam, w dokumentach API, jeśli tam pójdziesz i poszukasz

74
00:05:59,030 --> 00:06:05,990
wprowadzania tekstu, znajdziesz nie tylko wyjaśnienie, ale także wszystkie rekwizyty, które możesz tam ustawić, i możesz ustawić takie

75
00:06:06,320 --> 00:06:09,230
rzeczy, czy to wielowierszowe czy nie , jak

76
00:06:09,230 --> 00:06:11,100
długi może być tekst.

77
00:06:11,330 --> 00:06:13,730
Możesz także ustawić tekst

78
00:06:13,730 --> 00:06:18,700
zastępczy, możesz ustawić autokorekcję i wszystkie inne fajne rzeczy, więc

79
00:06:18,770 --> 00:06:25,670
zdecydowanie sprawdź te dokumenty, aby znaleźć konkretną właściwość, której możesz potrzebować w przypadku użycia.

80
00:06:25,730 --> 00:06:31,970
Chcę mieć możliwość ustawiania tych rekwizytów, ale chcę mieć możliwość ustawiania ich z miejsca,

81
00:06:31,970 --> 00:06:37,640
w którym używam niestandardowych danych wejściowych. Więc nie stąd, ponieważ zapewniłoby to stosowanie tej samej

82
00:06:37,730 --> 00:06:40,150
konfiguracji dla wszystkich danych wejściowych, które

83
00:06:40,430 --> 00:06:46,550
moglibyśmy mieć w naszej aplikacji, chcę mieć większą elastyczność i po prostu skonfigurować tutaj styl bazowy i skonfigurować

84
00:06:46,550 --> 00:06:51,440
dane wejściowe w miejscu, w którym następnie użyj go zamiast w składniku opakowania rdzenia.

85
00:06:51,440 --> 00:06:57,140
Fajną rzeczą jest React, a nie React Native, to po prostu React w normalnym Javascriptie ma

86
00:06:57,140 --> 00:06:58,200
taką składnię.

87
00:06:58,460 --> 00:07:05,920
Możesz wziąć otrzymane rekwizyty i rozłożyć je na swoim składniku w ten sposób.

88
00:07:05,920 --> 00:07:11,110
Składnia może wyglądać nieco dziwnie, ale w końcu bierze wszystkie

89
00:07:11,140 --> 00:07:19,120
rekwizyty, które masz, wszystkie ustawione tutaj rekwizyty i w zasadzie dodaje je do komponentu jako rekwizyty.

90
00:07:19,150 --> 00:07:23,600
Teraz, jeśli później zdefiniujesz inne rekwizyty, takie jak styl, a już masz tutaj

91
00:07:23,650 --> 00:07:26,020
styl, ten styl zastąpi styl, który tu

92
00:07:26,040 --> 00:07:31,210
masz i to jest właśnie to, czego chcę, ponieważ jeśli ustawię rekwizyt stylu na własną

93
00:07:31,210 --> 00:07:37,450
rękę z zewnątrz, zdecydowanie chcę to zastąpić tym rekwizytem stylu i dodać styl, który jest tam ustawiony, do wprowadzania

94
00:07:37,450 --> 00:07:38,200
tekstu,

95
00:07:38,200 --> 00:07:43,630
ale jeśli ustawisz inne rekwizyty poza tym komponentem, więc na moim niestandardowym komponencie, zostaną one dodane

96
00:07:43,630 --> 00:07:49,010
do tekstu i pozwala nam dodać wszystkie rekwizyty, które możemy dodać przy wprowadzaniu tekstu również przy

97
00:07:49,120 --> 00:07:52,120
naszym wprowadzaniu, a więc na naszym własnym komponencie.

98
00:07:52,120 --> 00:08:03,400
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

99
00:08:03,400 --> 00:08:09,670
przykład, aby upewnić się, że kiedy naciśniemy przycisk wysyłania, stracimy

100
00:08:09,670 --> 00:08:16,430
fokus i zamkniemy miękką klawiaturę. Możemy ustawić autocapitalize na none, co jest jedną z dozwolonych

101
00:08:16,480 --> 00:08:20,040
wartości, jeśli sprawdzicie dokumenty. Możesz ustawić na brak, zdania,

102
00:08:20,050 --> 00:08:24,610
słowa i tak dalej, więc nie chcę tutaj włączać wielkich liter, ponieważ wprowadzimy tylko liczbę, ale

103
00:08:24,610 --> 00:08:30,610
także dlatego, że chcę pokazać ci różne konfiguracje, które możesz ustawić. Ustawię tutaj autokorekty na wartość false,

104
00:08:30,610 --> 00:08:35,050
abyśmy nie korygowali automatycznie danych wprowadzanych przez użytkownika, i bardzo

105
00:08:35,080 --> 00:08:41,000
ważne tutaj, ustawię typ klawiatury na numeryczną, aby użytkownik musiał wprowadzić tutaj liczbę.

106
00:08:41,320 --> 00:08:47,590
Ustawię tutaj maksymalną długość na 2, aby można było wprowadzić tylko dwie cyfry, a nie bardzo długą liczbę,

107
00:08:47,620 --> 00:08:53,890
ponieważ ta gra tutaj i to tylko jedno z ograniczeń, które tu mam, to że ta gra działa

108
00:08:53,890 --> 00:08:57,140
tylko z dwucyfrowymi numer. Po skonfigurowaniu tego wszystkiego,

109
00:08:57,140 --> 00:09:02,990
jeśli teraz wrócimy, a ja przełączę klawiaturę, zobaczysz, że masz tutaj tę klawiaturę numeryczną i

110
00:09:02,990 --> 00:09:09,180
możesz tam wpisać tylko dwie cyfry i nie więcej, co jest oczywiście dokładnie tym, czego chcę.

111
00:09:09,260 --> 00:09:14,170
Ponadto tutaj na Androidzie widzimy to, jeśli klikniesz przycisk potwierdzenia,

112
00:09:14,180 --> 00:09:21,140
to go zamknie, to dzięki temu rozmyciuOnSubmit. W systemie iOS taki przycisk nie istnieje tutaj, więc tam naprawdę

113
00:09:21,140 --> 00:09:25,730
będziemy musieli znaleźć inne rozwiązanie, aby to zamknąć, jeśli stukniesz gdzie indziej, na przykład, ponieważ teraz

114
00:09:25,760 --> 00:09:27,150
tak się nie dzieje.

115
00:09:27,320 --> 00:09:32,090
Ale dobrą rzeczą jest to, że mamy teraz klawiaturę, którą widzimy, i klawiaturę, na której możemy wprowadzać cyfry.

116
00:09:32,090 --> 00:09:37,910
Jedną rzeczą, którą chcę zmienić, jest to, że teraz mogę również wprowadzić separator dziesiętny.

117
00:09:37,910 --> 00:09:44,420
Teraz, aby się tego pozbyć, możesz zmienić typ klawiatury na klawiaturę numeryczną i zobaczyć wszystkie dostępne typy klawiatury, jak

118
00:09:44,420 --> 00:09:49,650
zawsze, gdzie są oficjalne dokumenty, gdzie można wprowadzić tekst, możesz zanurzyć się w typ klawiatury i

119
00:09:49,650 --> 00:09:54,650
znaleźć dowiedzieć się, co możesz ustawić, co działa na wszystkich platformach i co możesz ustawić,

120
00:09:54,650 --> 00:09:59,480
jeśli masz sprawdzanie, na której platformie uruchamiasz kod, o którym jeszcze się nie

121
00:09:59,480 --> 00:09:59,990
dowiedzieliśmy.

122
00:10:00,230 --> 00:10:03,200
Klawiatura numeryczna jest obsługiwana na obu platformach, a jeśli

123
00:10:03,350 --> 00:10:08,380
to ustawisz, masz teraz wejście, w którym nie możesz wpisać tutaj miejsca dziesiętnego, jeśli wpiszesz

124
00:10:08,390 --> 00:10:13,990
tutaj i nie możesz tego zrobić na iOS. Na Androida niestety możesz, ale tam też

125
00:10:14,090 --> 00:10:16,490
będziemy musieli znaleźć inną poprawkę.