Teraz, gdy pozbywamy się tych podstaw i zanim zanurzymy się głębiej w React Native, a także
w jaki sposób możemy stylizować nasze aplikacje w nieco piękniejszy sposób, ponieważ oczywiście nasza stylizacja
zdecydowanie ma pewien potencjał, aby to ująć w ten sposób, zanim przejdziemy
do tego wszystkiego, pozwól, że pokażę ci inny ekscytujący komponent, który jest wbudowany w
React Native i który pokazuje również, jak łatwo możesz dodawać fajne funkcje do aplikacji React Native i
to jest modalny komponent.
Znajdziesz go oczywiście w oficjalnych dokumentach w tym przewodniku po komponentach
i interfejsach API, gdzieś tam znajdziesz modal.
Teraz jest pod innymi i tutaj ten modal jest ładnym komponentem, który pozwala
dodać tak ładną nakładkę, pełnoekranową nakładkę przy niewielkim wysiłku.
Dodajmy teraz modal do faktycznego hostowania naszego celu, teraz cel jest
tutaj na górze i to jest w porządku,
ale tak naprawdę chcę go przenieść do modalu, aby na końcu mieć nakładkę pełnoekranową i
mamy tylko przycisk u
góry, więc zamiast wprowadzania celu, który otwiera ten modal.
Przejdźmy więc do wprowadzania celu
i
tam chcę zawinąć to w modal. Więc zaimportuję modal z React
Native, ponieważ jest to komponent dostarczany
z React Native i tam, chcę użyć tego modalu wokół mojego widoku tutaj, więc
teraz tak teraz i teraz zapiszmy to i zobaczmy,
czy to już coś zmienia trochę
tak, nasza
stylizacja jest wyłączona, tracimy wyściółkę, którą pierwotnie ustawiliśmy, prawda?
W aplikacji js, mamy ogólne wypełnienie naszego widoku ekranu,
które jest widokiem zewnętrznym, z pewnością nie jest już stosowane na dwóch platformach, na dwóch urządzeniach,
ponieważ nasza zawartość jest daleko poza tym ekranem, więc modal już coś robi i
oczywiście tak bardzo nie widzimy. Teraz dla modalu, więc dla tego
komponentu modalnego możesz ustawić widoczny klucz, który określa, czy jest on obecnie widoczny,
czy nie, i który przyjmuje wartość logiczną, jeśli ustawimy na wartość false, a następnie, jeśli
spojrzymy na
nasze aplikacje, oczywiście widać pusty ekran. Nawiasem mówiąc, w przypadku, gdy Android nie
powinien aktualizować się po ustawieniu tego na false, po prostu zamknij aplikację tutaj za pomocą szuflady aplikacji, a następnie w
procesie na dole procesu uruchamiania npm, naciśnij ponownie, aby ponownie uruchomić na Androida.
Więc teraz mamy pusty ekran, gdy jest ustawiony na
false, teraz oczywiście na stałe kodujemy, to nie jest rozwiązanie.
Zamiast tego w aplikacji. js, chcę teraz mieć przycisk, który pozwoli nam otworzyć ten modal,
a następnie zamkniemy modal
z wnętrza modalu, kiedy tam klikniemy przycisk dodawania. Teraz już importujemy tutaj przycisk do aplikacji. js i teraz, gdy to
widzę, możemy oczywiście pozbyć się również tych importów, których obecnie nie
używamy, więc
po prostu zostaw tutaj przycisk importu wraz z innymi importami, których używamy,
a teraz tutaj na samej górze , możemy dodać przycisk, ale jest to samozamykający
się tag i ustawić tytuł, aby dodać nowy cel, może coś takiego. Jeśli to zrobimy, oczywiście powinniśmy zobaczyć ten przycisk tutaj u góry, a oto
on
i teraz, kiedy
naciskamy ten przycisk, chcemy pokazać ten modal, prawda? Teraz musimy zarządzać większą liczbą
stanów.
Więc oprócz zarządzania celami kursu, teraz będę również zarządzał, czy obecnie jesteśmy w
trybie dodawania kursu, czy nie.
Tak więc początkowo nie jesteśmy tak, że stan początkowy, który ustawiam, jest fałszywy i nadam
nazwę mojemu stanowi
i oczywiście to zależy od ciebie, nadam mu nazwę toAddMode i setIsAddMode.
Znowu te nazwy
zależą od ciebie, po prostu mam tutaj konwencję, którą znajdziesz również w oficjalnych dokumentach React, w której tutaj staramy się
nadać stan, w którym kontrolujemy odpowiednią nazwę, a następnie w zasadzie bierzemy tę nazwę i
dodajemy zestaw przed nim, aby wyjaśnić, że jest to funkcja zmiany tego stanu.
Więc setIsAddMode jest tym, co musimy w końcu wywołać po naciśnięciu tego przycisku,
a tutaj możemy użyć funkcji wbudowanej lub funkcji nazwanej i po prostu dodać tutaj funkcję obsługi,
cokolwiek chcesz.
Pójdę z funkcją inline i zestawem wywołań jestAddMode i ustawię tutaj wartość
true, gdy ten przycisk zostanie wywołany, abyśmy otworzyli modal. Teraz możemy przyjąć, że zmieniamy stan AddMode i przekazać
go do danych wejściowych celu, aby następnie zmienić widoczność modalu. Więc tutaj możemy dodać widoczną rekwizyt, ale ta
nazwa rekwizytu zależy od ciebie, ponieważ jest na naszym własnym komponencie i przekazuję isAddMode,
więc to jest
stan, który kontrolujemy, do trybu widocznego,
więc wartość przechowywana w isAddMode jest przekazywana jako wartość widocznego rekwizytu.
Teraz przy wprowadzaniu celu możemy więc teraz użyć tej
widocznej rekwizytu, więc tutaj możemy użyć rekwizytów
widocznych, teraz odnosząc się do widocznej rekwizyty, którą dostaliśmy na celu, którą następnie
przekazujemy do widocznej rekwizyty modalu. Jeśli teraz to zapiszemy i spojrzymy na
naszą aplikację, jeśli kliknę tutaj dodaj nowy cel, rzeczywiście zobaczysz tutaj ponownie tę modalną treść.
Oczywiście nie wygląda to tutaj tak pięknie,
więc powinniśmy to
zmienić, a jeszcze jedną rzeczą, którą chcę zmienić, jest to, że animacja byłaby ładna do otwarcia modalu, prawda?
Więc dodajmy typ animacji, który jest przyjemną właściwością, którą możemy ustawić tutaj i możesz ustawić to na ciąg znaków i masz trzy
opcje - żadna nie jest domyślna, ale możesz ustawić to na przesuwanie, a teraz
modal powinien się pojawić poprzez przesuwanie w górę.
Więc jeśli naciśniesz Dodaj nowy cel, teraz przesuwa się w
górę, również na Androidzie.
Powiedziałbym, że jest to sposób na lepsze wrażenia użytkownika. Kolejnym krokiem jest zapewnienie, że nasza
zawartość w tym module będzie ładniejsza, być może skoncentrowana tutaj w środku modułu.