Tak więc na nowym ekranie miejsca chcę móc dodać miejsce, a do tego przede
wszystkim dodam element do wprowadzania tekstu, który oczywiście nie ma nic wspólnego z natywnymi funkcjami
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ł,
dlatego też dodam tutaj element tekstowy, w którym mówię tytuł, który powinien działać jako
etykieta dla
tej metody wprowadzania tekstu i ogólnie, I chcę również widok przewijania tutaj, aby zawinąć całą moją zawartość, ponieważ nie wiem,
z którego urządzenia będzie korzystać użytkownik, ale dodamy więcej niż tylko tytuł, dodamy również
selektor obrazów i selektor miejsc ten moduł i dlatego możliwość przewijania tej strony jest naprawdę ważna.
Tak więc teraz mamy tę etykietę tytułu i tekst, który do niej należy, który na razie
nic nie zrobi, ale wkrótce pozwoli użytkownikowi wprowadzić tytuł.
Chcę również upewnić się, że ten formularz można oczywiście
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ę:
zachowaj miejsce dla przykład, dodaj tutaj kolor i ustaw na Kolory. przede wszystkim musisz się upewnić, że importujesz
tutaj stałą kolorów, a onPress prześle później ten formularz,
na razie nic tu nie robię.
Oczywiście można również konfigurować wprowadzanie tekstu, chociaż tutaj podstawowa konfiguracja jest w porządku, nie
muszę zmieniać typu klawiatury itd., Ale stylizacja byłaby ładna i tak naprawdę jest
dla całej strony.
Na przykład w tym widoku chcę tutaj dodać styl formy, a więc identyfikator stylu formy, aby
móc stylizować formę ogólną. W tytule
dodam styl etykiety, a do wprowadzania tekstu chcę też dodać własne style i
tutaj użyję identyfikatora. Dzięki temu przejdźmy do arkusza stylów
i upewnij się, że dodamy tutaj trochę stylizacji. W ogólnej formie dodam margines
we wszystkich kierunkach 30, aby nie znajdował się bezpośrednio na krawędziach ekranu.
W przypadku
etykiety chcę ustawić rozmiar czcionki powiedzmy 18, a także dodać margines na dole 15, abyśmy mieli
trochę odstępu między etykietą a wprowadzaniem tekstu i na
samym wprowadzaniu tekstu, aby móc widząc to, dodam dolną ramkę i ustawię jej kolor
na jasnoszary tutaj za pomocą tego kodu szesnastkowego #ccc i szerokości dolnej krawędzi tutaj 1, a następnie będę
miał margines na dole, więc do treści pod nim przycisk z 15 i
teraz dodam trochę pionowego wypełnienia, tylko cztery i trochę poziomego
wypełnienia, tylko dwa. Jeśli to zapiszę, rzućmy okiem.
Jeśli przejdę do ekranu nowych miejsc, to właśnie to mam i nie wygląda to
zbyt nędznie, również na Androidzie, to chyba coś, nad czym możemy pracować i na czym możemy się oprzeć.
Teraz, oczywiście, te dane wejściowe nic
nie robią, oczywiście chcę uchwycić to, co użytkownik wprowadził i dla uproszczenia, tutaj nie dodam super złożonej weryfikacji
lub czegoś podobnego, zamiast
tego po prostu uchwycę wartość i to wszystko. Możesz oczywiście dodać sprawdzanie poprawności, możesz dodać
reduktor, tak
jak zrobiliśmy to w module wprowadzania użytkownika, gdzie nauczyłeś się, jak możesz zarządzać
bardziej złożonymi formularzami na wszystkie sposoby, tutaj znowu będę to bardzo proste i dlatego po prostu zaimportuję użyj haka stanu
z React tutaj, aby móc po prostu uchwycić moje wartości tutaj.
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
do pustego ciągu, a następnie dodam tutaj
funkcję, procedurę zmiany tytułu, która odbiera tekst wprowadzony przez użytkownika i gdzie Potem po
prostu ustawię wartość tytułu na ten tekst i tutaj możesz oczywiście dodać sprawdzanie poprawności, ale znowu dla uproszczenia, nie zrobię
tego.
Jest to procedura zmiany tytułu, która powinna być teraz powiązana z propozycją zmiany tekstu tutaj, podczas wprowadzania
tekstu,
więc wskażę procedurę zmiany tytułu i powiążę wartość tego wejścia oczywiście z moją wartością tytułu, ponieważ tam przechowuję
dane wejściowe użytkownika, dzięki czemu mamy tutaj w
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ł,
mamy też miejsce
do zapisania.
Za każdym razem, gdy naciskamy ten
przycisk, chcę go zapisać, więc będę mieć moją procedurę zapisywania miejsca, która jest funkcją, którą chcę
powiązać z tym
przyciskiem zapisu miejsca, więc tutaj zamiast tej pustej anonimowej funkcji, wskażę zapisywanie umieść moduł obsługi tego przycisku
zapisz miejsce i tam, teraz chcę się upewnić, że to miejsce zostanie zapisane
i do tego ponownie użyję Redux.
Więc zainstaluję Redux z instalacją npm - zapisz redux, a także React Redux, a także zainstaluję Redux Thunk, abyśmy
również mogli z niego korzystać.
Na razie nie potrzebuję tego, ponieważ nie rozmawiam z serwerem, ale później, gdy
dodamy natywne funkcje urządzenia, zobaczysz, że mamy tam również funkcje asynchroniczne i
gdzie możemy chcieć poczekać na ich zakończenie przed faktycznie wysyłamy akcję dokładnie tam, gdzie
może nam pomóc Redux Thunk. Dlatego po zainstalowaniu tych trzech pakietów możemy teraz skonfigurować Redux.