Zacznijmy od implementacji uwierzytelniania, a jednym bardzo ważnym krokiem w tym kierunku jest dodanie nowego ekranu,
ekranu uwierzytelniania, który powinien zawierać formularz logowania lub rejestracji, którego użytkownik może użyć do zalogowania się
lub rejestracji, a zatem tutaj na ekranie
autoryzacji zaimportuję zareaguj od zareaguj, a także zaimportuję niektóre
rzeczy z React Native, ponieważ stamtąd, z React Native, chcę mieć widok przewijania, ponieważ zbudujemy
formularz i chcę upewnij się, że użytkownicy na wszystkich urządzeniach mogą się
z nim komunikować.
Dodam tutaj arkusz stylów i na razie powinno to być, zawsze możemy
dodać więcej, jeśli będziemy potrzebować więcej.
Możemy również dołączyć widok i klawiaturę unikając widoku Chyba upewniam się, że wszystkie dane
wejściowe są zawsze osiągalne.
Mówiąc o danych wejściowych, oczywiście dodamy formularz i dlatego ponownie użyję komponentu wejściowego, który
zbudowaliśmy w sekcji formularzy, którą mogę znaleźć w folderze interfejsu użytkownika składników.
Dlatego obejrzyj tę sekcję, aby dowiedzieć się, co robi ten komponent i
jak możemy nim zarządzać.
Dzięki temu możemy utworzyć tutaj element auth screen, który odbiera rekwizyty, a także możemy utworzyć
ten obiekt stylów za pomocą arkusza stylów, stworzyć
tam metodę i oczywiście wyeksportować ekran auth, tak jak ten.
Teraz oczywiście pytanie brzmi, w jaki sposób prezentujemy ten ekran autoryzacji? Jak możemy się upewnić, że to
widzimy, jeśli nie jesteśmy zalogowani?
Teraz to jest coś, co udoskonalimy w tym module, ale aby rozpocząć, możemy przejść
do nawigatora i upewnić się, że po uruchomieniu aplikacji widzimy ten ekran uwierzytelnienia, a do tego
możemy użyć specjalnego nowego nawigatora, którego nie używane wcześniej, dla którego jest specjalnie zbudowany, można niemal powiedzieć,
że dla tego przypadku użycia uwierzytelnienia i że funkcja tworzenia przełącznika nawigatora pomaga nam
w tym, więc tworzy taki przełącznik nawigatora. Szczególną cechą tego nawigatora jest to, że
zawsze wyświetla dokładnie jeden ekran i nie można wrócić do innego ekranu, jeśli następnie przejdziesz do innego.
Tak więc cofanie się jest wyraźnie zabronione, czego dokładnie chcemy, ponieważ nie powinieneś być
w stanie wrócić do ekranu logowania, jeśli się właśnie zalogowałeś.
Dlatego na dole pliku utworzę nowego nawigatora, być może mojego głównego nawigatora, nazwa oczywiście
zależy od Ciebie, z funkcją tworzenia przełącznika nawigatora i podobnie jak poprzednio, ten nawigator bierze
argument, w którym konfigurujemy to, więc obiekt, w którym go konfigurujemy i tam, chcę powiązać
ekran autoryzacji, a także oczywiście mój stos. Teraz, aby mieć fajny nagłówek, utworzę
tutaj również mój auth navigator, który jest nawigatorem stosu utworzonym za pomocą funkcji tworzenia stosu nawigatora, a tam
po prostu zmapuję ekran autoryzacji, nad którym właśnie zacząłem pracować,
i oczywiście trzeba go zaimportować, więc w tym ShopNavigator. plik js, możemy zaimportować ekran autoryzacji z ekranu autoryzacji użytkownika w
ten
sposób i po dodaniu tego importu, jeśli zejdziemy w dół, mapujemy to tutaj na autoryzację w nawigatorze autoryzacji,
a nawigator autoryzacji jest następnie mapowany na autoryzację tutaj w nawigatorze przełączania i sklep jest oczywiście mapowany do
nawigatora sklepu, a teraz jest to główny nawigator, który zamykamy za pomocą funkcji
tworzenia kontenera aplikacji, a zatem dzięki temu, jeśli to zapiszemy, faktycznie wyświetlimy ekran autoryzacji
jako pierwszy ekran, który
w tej chwili nie spowoduje wyświetlenia żadnego ważnego jsx, więc otrzymujemy błąd, ale możemy oczywiście nad tym popracować, ponieważ celem jest
teraz wyświetlenie tego ekranu uwierzytelniania, w którym możemy się zalogować i zrobić swoje. Więc tutaj chcę przedstawić te dane wejściowe i faktycznie zaimportuję
również element karty z karty interfejsu użytkownika składników, aby ta ładna karta wyglądała tutaj i zawierała moje dane
wejściowe i oczywiście jest to całkowicie opcjonalne, ale
tutaj dodam to tutaj dodam kartę, a na karcie możemy dodać widok przewijania, abyśmy
mogli przewijać wewnątrz tej karty, oczywiście możesz również dodać widok
przewijania wokół karty, abyś mógł przewijać ogólnie ekran, ale zrobię to w ten sposób, dodaję też swój własny
styl do karty, którą mogę nazwać pojemnikiem autoryzacyjnym, nazwa może być całkowicie zależna od ciebie, a także opiszę to
wszystko jako opakowanie zobacz, gdzie dodam styl, który nazwiemy ekranem. Właściwie tutaj możemy już korzystać z klawiatury, unikając widoku. Myślę, że
z zachowaniem paddingu, a następnie przesunięcia pionowego klawiatury powiedzmy 50. Teraz w tym widoku przewijania, który mamy
na karcie, możemy zacząć dodawać dane wejściowe, niestandardowe dane, które zbudowaliśmy
wcześniej w trakcie kursu. Na przykład tutaj dane wejściowe z adresem e-mail
z identyfikatorem i etykietą e-maila, ponieważ tam chcę pobrać adres e-mail użytkownika, a zatem adres e-mail typu klawiatury obsługiwany zarówno
w systemie iOS, jak i Android.
Powinien być również wymagany i chcę użyć walidatora e-mail, są to dwie funkcje sprawdzania
poprawności, które wbudowałem w dane wejściowe wcześniej w tym kursie, a także automatyczne wyłączanie wielkich liter powinno być
wyłączone, więc ustawię to na żadną, ponieważ jest to duże adres e-mail naprawdę
nie jest pomocny, a komunikat o błędzie, który chcę pokazać, jeśli coś jest nie tak, wprowadź poprawny adres e-mail, coś w tym rodzaju.
Teraz, gdy wartość się zmienia, więc przy zmianie wartości chcemy coś zrobić, ale na
razie nic tutaj nie zrobię, po prostu zapewnij pustą funkcję, abyśmy nie otrzymali błędu i wartości
początkowej, którą chcę pokazać tutaj jest to po
prostu pusty ciąg, ponieważ nie chcę podawać żadnej innej wartości początkowej.
Teraz oczywiście nie jest to jedyne wejście, więc powtórzę to, ponieważ
potrzebuję tutaj również hasła z etykietą hasła, a typ klawiatury powinien być tutaj domyślny, ponieważ chcę mieć normalne słowo kluczowe, ale
chcę
zaciemnij dane wejściowe, abyśmy ich nie widzieli i można
to zrobić, dodając tutaj bezpieczne wprowadzanie tekstu.
Oczywiście nie jest to rekwizyt obsługiwany przez mój niestandardowy komponent,
ale należy pamiętać, że w tym komponencie przekazujemy wszystkie rekwizyty do wbudowanego wprowadzania tekstu, a
wbudowane wprowadzanie tekstu obsługuje tutaj tę właściwość bezpiecznego wprowadzania tekstu, dlatego ja mogę
to ustawić. W tym
przypadku sprawdzanie poprawności nie powinno również sprawdzać, czy jest to adres e-mail,
ale upewnij się, że mamy minimalną długość, powiedzmy pięć znaków. Tutaj można również wyłączyć automatyczne pisanie wielkimi literami,
komunikat o błędzie powinien wprowadzić poprawne hasło, a dzięki temu zobaczyłem, że tutaj oczywiście mam literówkę,
którą powinien być adres e-mail, tutaj hasło i zostawię to tutaj jak to jest.
Teraz, aby móc
to przesłać, potrzebuję również przycisku, więc tutaj zaimportuję przycisk z React Native i dodam dwa przyciski faktycznie
na
karcie, a zatem również w widoku przewijania. Pierwszy przycisk ma tytuł logowania, powiedzmy,
a później zmienimy go na logowanie lub rejestrację, w zależności od trybu, w
którym się znajdujemy i kolor jest importowany lub dodawany za pomocą stałej kolorów, którą powinieneś
import i na tych stałych kolorach użyję kolorów. podstawowy i onPress w tej chwili mogą po prostu wskazać pustą
funkcję i powtórzę to, ponieważ chcę mieć drugi przycisk, w którym mówię przełącznik,
aby się zarejestrować i oczywiście to później powie również przełącznik, aby się zalogować, jeśli jesteśmy zalogowani w górę i
tam możemy użyć naszego koloru akcentu. Jeśli teraz to zapiszemy, powinniśmy mieć podstawowy
ekran logowania, oto on, nie wygląda tak, jak powinien,
ale mamy tutaj swoje dane
wejściowe, mamy te dwa przyciski, również na Androida po
zakończeniu ładowania,
tutaj idziemy i teraz oczywiście chcę to odpowiednio stylizować.
Przejdźmy więc do arkusza
stylów i zauważmy, że mam przypisane dwa style na końcu - screen i kontener uwierzytelniania, więc tutaj w
stylach chcę dodać zarówno screen, jak i kontener uwierzytelniania,
są to dwa style, z którymi planuję pracować. Teraz dla ekranu ustawię flex na
jeden, a następnie wyjustuję moją zawartość na środku i wyrównam elementy w środku, aby
wyśrodkować je zarówno
na osi pionowej i poziomej, a także na pojemniku uwierzytelniającym.
Chcę ustawić szerokość powiedzmy 80%, aby nie wziąć pełnej dostępnej szerokości i maksymalnej
szerokości faktycznie 400 pikseli, w przypadku gdyby 80% było więcej, ograniczamy to do 400 pikseli i może wysokość powiedzmy 50%, ale maksymalna wysokość wynosi również 400.
Zobaczmy, jak to wygląda. Jeśli
to uratujemy, to właśnie
tu dostanę.
Teraz mogę tam przewijać, ponieważ skonfigurowałem taki widok przewijania i tak naprawdę nie chcę
tego zachowania.
Nie ustawię tutaj
wysokości, po prostu dodam maksymalną wysokość, aby była ograniczona na
pewnej wysokości, ale domyślnie zajmuje tyle wysokości, ile jest wymagane, dlatego raczej
zamiast tego dodam trochę wypełnienia, abyśmy mieli trochę przestrzeń wokół wejść i nie znajduje
się
na krawędzi karty, więc wygląda to znacznie ładniej i zobaczmy, jak to wygląda na Androidzie,
tak, ogólnie wygląda OK.
Jeśli kliknę tam, to również
przewinie się w górę, więc klawiatura unikająca widoku wykonuje swoją pracę, ale oczywiście nadal pojawia się błąd, który
przy zmianie danych wejściowych powoduje błąd, ponieważ tak, dodałem tutaj zmianę wartości,
która powinna być przy zmianie wejścia, a nie przy zmianie wartości.
To trochę poprawka, ale zmierzamy we właściwym kierunku.
Teraz jeszcze nie skończyłem, chcę mieć
tytuł nagłówka, a co powiesz na kolor tła, prawdopodobnie też byłby miły.
Dlatego w odniesieniu do tytułu nagłówka możemy oczywiście dodać AuthScreen. navigationOptions i na razie pracuję z niektórymi
opcjami statycznymi, ponieważ chcę po prostu dodać tutaj tytuł nagłówka i ustawić
go tak, aby uwierzytelniał lub po prostu uwierzytelniał, coś takiego
i dla
tła, oczywiście możemy dać tutaj widok, który zawiera wszystko kolor tła,
ale tak naprawdę chcę pokazać wam nowy komponent, którego do tej pory nie
używaliśmy i do tego musimy zainstalować zupełnie nowy pakiet, a to pakiet expo-liniowo-gradientowy, który zainstalowałeś z
instalacją npm --save gradient expo-liniowy.
Jest to pakiet, który pozwala nam
z łatwością dodać
gradient liniowy, więc w bardzo prosty sposób i po zainstalowaniu wystarczy zaimportować
z gradientu liniowego expo i zaimportować komponent, który to eksponuje, składnik gradientu liniowego.
Teraz jest to komponent, którego możesz użyć na swojej stronie i tutaj użyję go wewnątrz klawiatury,
unikając widoku, liniowego gradientu jak ten i owijam go wokół wszystkich innych treści tutaj i teraz możesz skonfigurować to
i
tam, ja chcesz się upewnić, że ma to klucz kolorów, który pozwala nam ustawić kolory między
nimi, powinien przejść, ponieważ gradient jest po prostu gradientem między wieloma kolorami, przynajmniej
dwoma, ale możesz dodać więcej, a teraz możesz po prostu dodać kolory, takie
jak czerwony lub dodając kody szesnastkowe i chcę przejść między #ffedff i powiedzmy inny kod szesnastkowy, # ffe3ff i oczywiście
możesz tutaj eksperymentować z różnymi kolorami.
Teraz musimy również dodać styl tutaj, a ja nazwiemy ten gradient stylów, który możemy teraz dodać tutaj,
a ten gradient przyjmie szerokość 100% i wysokość 100%, więc weźmie całą szerokość i wysokość może
dostać, tak to wygląda, ale teraz mamy problem, oczywiście, że
nasza treść
nie jest już wyśrodkowana. Aby upewnić się, że
tak jest, musimy teraz dodać uzasadnienie treści i ponownie wyrównać elementy, a zatem
tutaj
na otaczającym ekranie możemy się tego pozbyć.
Teraz mamy taki sam wygląd
jak poprzednio, oczywiście możemy to również osiągnąć, nie ustawiając szerokości i wysokości, a jedynie zginając jeden.
Więc teraz z tą konfiguracją i ważne jest, aby ekran nie próbował wyśrodkować,
ponieważ w przeciwnym
razie gradient zostanie wyśrodkowany, ale przy tej konfiguracji mamy teraz ten wygląd z tym ładnym gradientem i aby zobaczyć
tytuł naszego nagłówka, po prostu musimy upewnić się, że w ustawieniach nawigacji, w nawigatorze sklepu, przypisujemy nasze domyślne
rekwizyty nawigacyjne do nawigatora autoryzacji.
Dodam więc drugi argument, aby utworzyć nawigator stosu, a domyślne opcje nawigacji wskazują tylko
domyślne opcje nawigacji, które ustawiają kolor nagłówka, kolor nagłówka i tak dalej.
Oczywiście upewnij się, że nie ma tu literówki w opcjach nawigacji na ekranie autoryzacji na ekranie autoryzacji,
tak jak ja.
Więc z tym naprawionym, jest to konfiguracja, którą mamy tutaj, oczywiście
możesz eksperymentować z kolorami i używać różnych kolorów, jeśli
wolisz, jestem z tego zadowolony, a teraz jedyną rzeczą, którą chcę naprawić tutaj, jest moja stylizacja
dla przycisków, pewne odstępy wokół nich byłyby fajne i można je łatwo dodać, zawijając przyciski w widokach, w rzeczywistości oba przyciski.
Zrobię to tutaj i teraz nadam każdemu widokowi styl tutaj, może kontener przycisku stylów, zrobię to w pierwszym widoku i drugim widoku, a teraz możemy
nadać temu kontenerowi przycisku styl
w dół w arkuszu stylów i tutaj może ustawić górny margines
na przykład na 10, aby upewnić się, że każdy przycisk ma mały margines na górze, aby
przyciski nie znajdowały się bezpośrednio obok siebie, co moim zdaniem naprawdę pomogłoby
naszym przyciskom.
Wygląda to dobrze na
iOS, sprawdźmy też na Androidzie, tak,
nie wygląda to tak źle.
Dzięki temu mamy tę podstawową konfigurację, teraz upewnijmy się, że to też robi coś pożytecznego i że
faktycznie próbujemy się z tym zalogować.