1
00:00:02,110 --> 00:00:07,000
Tak więc na nowym ekranie miejsca chcę móc dodać miejsce, a do tego przede

2
00:00:07,030 --> 00:00:12,190
wszystkim dodam element do wprowadzania tekstu, który oczywiście nie ma nic wspólnego z natywnymi funkcjami

3
00:00:12,190 --> 00:00:19,330
urządzenia, ale po prostu potrzebujemy tego, ponieważ w tam możemy teraz dodać taką metodę wprowadzania tekstu, która pozwala użytkownikowi wprowadzić tytuł,

4
00:00:19,330 --> 00:00:24,350
dlatego też dodam tutaj element tekstowy, w którym mówię tytuł, który powinien działać jako

5
00:00:24,370 --> 00:00:25,360
etykieta dla

6
00:00:25,360 --> 00:00:32,450
tej metody wprowadzania tekstu i ogólnie, I chcę również widok przewijania tutaj, aby zawinąć całą moją zawartość, ponieważ nie wiem,

7
00:00:32,520 --> 00:00:37,540
z którego urządzenia będzie korzystać użytkownik, ale dodamy więcej niż tylko tytuł, dodamy również

8
00:00:37,540 --> 00:00:43,120
selektor obrazów i selektor miejsc ten moduł i dlatego możliwość przewijania tej strony jest naprawdę ważna.

9
00:00:43,180 --> 00:00:48,820
Tak więc teraz mamy tę etykietę tytułu i tekst, który do niej należy, który na razie

10
00:00:48,820 --> 00:00:52,450
nic nie zrobi, ale wkrótce pozwoli użytkownikowi wprowadzić tytuł.

11
00:00:52,540 --> 00:00:55,840
Chcę również upewnić się, że ten formularz można oczywiście

12
00:00:56,170 --> 00:01:02,500
przesłać, więc chcę również dodać tutaj element przycisku, a po wprowadzeniu tekstu tutaj będę mieć przycisk, w którym mówię:

13
00:01:02,500 --> 00:01:10,450
zachowaj miejsce dla przykład, dodaj tutaj kolor i ustaw na Kolory. przede wszystkim musisz się upewnić, że importujesz

14
00:01:10,540 --> 00:01:15,730
tutaj stałą kolorów, a onPress prześle później ten formularz,

15
00:01:15,820 --> 00:01:19,750
na razie nic tu nie robię.

16
00:01:19,750 --> 00:01:25,030
Oczywiście można również konfigurować wprowadzanie tekstu, chociaż tutaj podstawowa konfiguracja jest w porządku, nie

17
00:01:25,030 --> 00:01:29,920
muszę zmieniać typu klawiatury itd., Ale stylizacja byłaby ładna i tak naprawdę jest

18
00:01:29,920 --> 00:01:31,360
dla całej strony.

19
00:01:31,360 --> 00:01:37,330
Na przykład w tym widoku chcę tutaj dodać styl formy, a więc identyfikator stylu formy, aby

20
00:01:37,330 --> 00:01:41,140
móc stylizować formę ogólną. W tytule

21
00:01:41,140 --> 00:01:50,980
dodam styl etykiety, a do wprowadzania tekstu chcę też dodać własne style i

22
00:01:51,100 --> 00:01:55,210
tutaj użyję identyfikatora. Dzięki temu przejdźmy do arkusza stylów

23
00:01:55,210 --> 00:02:00,180
i upewnij się, że dodamy tutaj trochę stylizacji. W ogólnej formie dodam margines

24
00:02:00,220 --> 00:02:05,350
we wszystkich kierunkach 30, aby nie znajdował się bezpośrednio na krawędziach ekranu.

25
00:02:06,160 --> 00:02:07,480
W przypadku

26
00:02:07,780 --> 00:02:15,640
etykiety chcę ustawić rozmiar czcionki powiedzmy 18, a także dodać margines na dole 15, abyśmy mieli

27
00:02:15,640 --> 00:02:20,530
trochę odstępu między etykietą a wprowadzaniem tekstu i na

28
00:02:20,860 --> 00:02:27,670
samym wprowadzaniu tekstu, aby móc widząc to, dodam dolną ramkę i ustawię jej kolor

29
00:02:27,670 --> 00:02:36,460
na jasnoszary tutaj za pomocą tego kodu szesnastkowego #ccc i szerokości dolnej krawędzi tutaj 1, a następnie będę

30
00:02:36,490 --> 00:02:43,060
miał margines na dole, więc do treści pod nim przycisk z 15 i

31
00:02:43,060 --> 00:02:48,300
teraz dodam trochę pionowego wypełnienia, tylko cztery i trochę poziomego

32
00:02:48,670 --> 00:02:52,100
wypełnienia, tylko dwa. Jeśli to zapiszę, rzućmy okiem.

33
00:02:52,150 --> 00:02:57,310
Jeśli przejdę do ekranu nowych miejsc, to właśnie to mam i nie wygląda to

34
00:02:57,400 --> 00:03:03,360
zbyt nędznie, również na Androidzie, to chyba coś, nad czym możemy pracować i na czym możemy się oprzeć.

35
00:03:03,460 --> 00:03:05,970
Teraz, oczywiście, te dane wejściowe nic

36
00:03:05,980 --> 00:03:13,390
nie robią, oczywiście chcę uchwycić to, co użytkownik wprowadził i dla uproszczenia, tutaj nie dodam super złożonej weryfikacji

37
00:03:13,390 --> 00:03:15,770
lub czegoś podobnego, zamiast

38
00:03:15,790 --> 00:03:22,030
tego po prostu uchwycę wartość i to wszystko. Możesz oczywiście dodać sprawdzanie poprawności, możesz dodać

39
00:03:22,330 --> 00:03:23,360
reduktor, tak

40
00:03:23,370 --> 00:03:28,680
jak zrobiliśmy to w module wprowadzania użytkownika, gdzie nauczyłeś się, jak możesz zarządzać

41
00:03:28,690 --> 00:03:36,490
bardziej złożonymi formularzami na wszystkie sposoby, tutaj znowu będę to bardzo proste i dlatego po prostu zaimportuję użyj haka stanu

42
00:03:36,490 --> 00:03:40,660
z React tutaj, aby móc po prostu uchwycić moje wartości tutaj.

43
00:03:40,660 --> 00:03:49,360
Więc tutaj będę mieć moją wartość tytułu i ustawić funkcję wartości tytułu i użyć stanu użycia, aby zainicjować to

44
00:03:49,350 --> 00:03:53,140
do pustego ciągu, a następnie dodam tutaj

45
00:03:53,230 --> 00:03:59,800
funkcję, procedurę zmiany tytułu, która odbiera tekst wprowadzony przez użytkownika i gdzie Potem po

46
00:03:59,800 --> 00:04:08,750
prostu ustawię wartość tytułu na ten tekst i tutaj możesz oczywiście dodać sprawdzanie poprawności, ale znowu dla uproszczenia, nie zrobię

47
00:04:08,750 --> 00:04:09,470
tego.

48
00:04:09,470 --> 00:04:15,380
Jest to procedura zmiany tytułu, która powinna być teraz powiązana z propozycją zmiany tekstu tutaj, podczas wprowadzania

49
00:04:15,380 --> 00:04:16,040
tekstu,

50
00:04:16,040 --> 00:04:22,190
więc wskażę procedurę zmiany tytułu i powiążę wartość tego wejścia oczywiście z moją wartością tytułu, ponieważ tam przechowuję

51
00:04:22,190 --> 00:04:25,070
dane wejściowe użytkownika, dzięki czemu mamy tutaj w

52
00:04:25,190 --> 00:04:33,050
pełni funkcjonalną informację wejściową od użytkownika, w której również rejestruję wartości. Teraz dzięki temu możemy zdobyć tytuł,

53
00:04:33,050 --> 00:04:35,530
mamy też miejsce

54
00:04:35,570 --> 00:04:37,640
do zapisania.

55
00:04:37,640 --> 00:04:40,110
Za każdym razem, gdy naciskamy ten

56
00:04:40,190 --> 00:04:46,370
przycisk, chcę go zapisać, więc będę mieć moją procedurę zapisywania miejsca, która jest funkcją, którą chcę

57
00:04:46,370 --> 00:04:47,680
powiązać z tym

58
00:04:47,720 --> 00:04:54,050
przyciskiem zapisu miejsca, więc tutaj zamiast tej pustej anonimowej funkcji, wskażę zapisywanie umieść moduł obsługi tego przycisku

59
00:04:54,050 --> 00:04:58,920
zapisz miejsce i tam, teraz chcę się upewnić, że to miejsce zostanie zapisane

60
00:04:59,030 --> 00:05:01,540
i do tego ponownie użyję Redux.

61
00:05:01,910 --> 00:05:10,880
Więc zainstaluję Redux z instalacją npm - zapisz redux, a także React Redux, a także zainstaluję Redux Thunk, abyśmy

62
00:05:10,880 --> 00:05:13,660
również mogli z niego korzystać.

63
00:05:13,670 --> 00:05:19,170
Na razie nie potrzebuję tego, ponieważ nie rozmawiam z serwerem, ale później, gdy

64
00:05:19,170 --> 00:05:24,230
dodamy natywne funkcje urządzenia, zobaczysz, że mamy tam również funkcje asynchroniczne i

65
00:05:24,230 --> 00:05:29,750
gdzie możemy chcieć poczekać na ich zakończenie przed faktycznie wysyłamy akcję dokładnie tam, gdzie

66
00:05:29,750 --> 00:05:34,470
może nam pomóc Redux Thunk. Dlatego po zainstalowaniu tych trzech pakietów możemy teraz skonfigurować Redux.