Zacznijmy od stylizacji szuflady na ekranie filtrów, co
nie jest trudne,
jest to coś, co robiliśmy wcześniej. W nawigatorze filtrów tutaj
w nawigatorze stosów musimy w końcu skonfigurować domyślne opcje nawigacji, których używamy
również dla nawigatora ulubionych w naszym nawigatorze posiłków. Możemy więc skopiować tutaj drugi obiekt konfiguracji i dodać
go tutaj w naszym nawigatorze filtrów jako drugi argument do utworzenia nawigatora stosu.
Oczywiście możemy usunąć tę komentowaną
linię, ale dzięki tej prostej zmianie upewniamy się, że używamy tego samego stylu paska nawigacji lub
paska akcji.
To prosta, ale przydatna zmiana, teraz dla samej szuflady, co z
tym wyglądem tutaj i stylem szuflady?
Teraz możesz, jeśli chcesz kontrolować całą szufladę i zmienić sposób, w jaki są tam rozmieszczone elementy, i nie korzystać z
tego domyślnego ustawienia listy z efektem marszczenia tutaj na Androidzie i innym efektem na iOS,
ale myślę,
że to niezła domyślna których tak naprawdę nie chcę zmienić.
Jeśli chcesz, możesz jednak zastąpić cały ten komponent, który jest renderowany tutaj i dołączony, znajdziesz link
do oficjalnych dokumentów, gdzie możesz dowiedzieć się więcej na ten temat, na wypadek, gdybyś musiał
to dostosować.
To, co oczywiście chcę zmienić, to styl tych elementów i wyświetlany tutaj tekst.
To nie
jest zbyt trudne, zacznijmy od tekstu. Jako tekst, jak można powiedzieć, domyślnie pobiera tutaj
te identyfikatory, filtry ulubionych posiłków.
Teraz oczywiście może to zrobić, ale ulubione posiłki, to nie jest tak
naprawdę tekst, który chcemy pokazać naszym użytkownikom.
Dlatego chcę to zastąpić i możemy to zrobić za pomocą starych dobrych opcji
nawigacji, które podobnie jak poprzednio za pomocą kart, w których moglibyśmy również kontrolować tekst etykiety, musimy
ustawić na nawigatorach stosu, albo podczas tworzenia stos nawigatora, tam oprócz ustawiania domyślnych opcji nawigacji dla
każdego ekranu w tym nawigatorze, możemy ustawić opcje nawigacji dla całego nawigatora, który
nie jest wtedy przeznaczony dla ekranów nawigatora, ale dla nawigatora, gdy
jest
on używany jako ekran, który robimy tu, a potem tutaj, możemy ustawić etykietę szuflady i ustawić to na filtry z
kilkoma wykrzyknikami, abyśmy widzieli, że to
działa, teraz widzimy to
tutaj, więc tutaj możemy to ustawić, jedna opcja.
Alternatywnie tutaj, podczas tworzenia nawigatora szuflad, możemy użyć dłuższej formy, w której ustawiliśmy ekran
i gdzie następnie skonfigurowaliśmy opcje nawigacji tutaj, a są to po prostu alternatywy,
w których żadna z
tych dwóch nie
jest lepsza ani gorsza, możesz użyć jednej z je, a teraz tutaj, ustawię etykietę szuflady
na posiłki, powiedzmy, to ma dla mnie więcej sensu niż ulubione posiłki.
Dzięki temu po otwarciu szuflady widzę posiłki i filtry. W przypadku filtrów nie zastąpiłem teraz tytułu,
ponieważ nie mam nic przeciwko domyślnemu pobieraniu mojego identyfikatora, ale
w przypadku posiłków go zastąpiłem.
A co z stylizacją, kolorem i tak dalej?
Oczywiście można to również kontrolować. Cóż, tak jak poprzednio, na przykład w przypadku kart,
w których moglibyśmy również przekazać drugi argument, aby utworzyć dolny nawigator kart do sterowania układem i stylem
kart w
ogóle, możemy zrobić to samo dla szuflady. Aby utworzyć nawigator szuflad, możemy przekazać drugi argument,
którym jest obiekt skonfigurowany do samego nawigatora szuflad i
tam otrzymujemy kilka opcji.
Ponownie, oficjalne dokumenty zawierają wyczerpującą listę wszystkiego, co możesz skonfigurować, na
przykład masz opcje zawartości, które pozwalają kontrolować zawartość w szufladzie, więc elementy szuflady
do końca i tam, masz mnóstwo ustawienia, które możesz skonfigurować, na przykład
możesz ustawić aktywny kolor odcienia, który ma zasadniczo na celu pokolorowanie elementu, gdy jest on aktywny,
i tam możemy ustawić kolory, akcentować kolor, jeśli chcemy, zamiast używać tego niebieskiego domyślnego i
dlatego
teraz jest pomarańczowy i tak łatwo to zmienić, to wszystko, co musimy zrobić.
Teraz, jeśli chcemy również zmienić używaną
tam czcionkę, możemy to zrobić. Oprócz ustawienia aktywnego koloru odcienia tutaj w opcjach zawartości,
możemy tutaj ustawić
styl etykiety, który pobiera obiekt stylu, który zostanie zastosowany do podstawowego komponentu tekstowego w
szufladzie, dzięki czemu możemy ustawić takie elementy,
jak wyrównanie tekstu, jeśli chcemy lub w moim przypadku tutaj, po prostu skonfiguruj rodzinę czcionek i ustaw to, aby otwierało sans, może
tak, nawet nie odważną wersję. Jeśli to zrobimy, wyraźnie zauważymy różnicę.
Teraz przywrócę mu pogrubienie, bo to ładniejsze, ale żeby zobaczyć różnicę, myślę,
że było jasne bez pogrubienia.
Teraz używamy tutaj własnej
czcionki, odważnej wersji i własnego koloru,
i
to całkiem fajne, powiedziałbym, to samo oczywiście działa również na Androidzie.
W ten sposób możesz pracować z szufladą, jak
również stylizować wszystko, a dzięki temu
poznałeś główne wzorce nawigacji, które możesz dodać do swojej aplikacji za pomocą
nawigacji React.
Oczywiście, jak wielokrotnie podkreślałem w tym module, jest wiele do skonfigurowania, wszyscy ci nawigatorzy mają różne
opcje nawigacji i ustawienia dla samych nawigatorów, dlatego zdecydowanie sprawdź oficjalne dokumenty
i po prostu baw się z różnymi ustawieniami, które tam widzisz, aby
eksperymentuj z tym, co możesz zrobić. To, co pokazałem tutaj i to, co tutaj zmieniliśmy,
to prawdopodobnie wspólne rzeczy, które chcesz dostosować, dlatego pokazałem je tutaj,
ale znowu jest tak
wiele do zrobienia, zdecydowanie sprawdź oficjalne dokumenty. W przypadku tej aplikacji
część nawigacyjna jest w zasadzie zrobiona, nie
ma już nic więcej do dodania,
teraz nadszedł czas, aby wrócić do ogólnego stylu, na przykład
upewnij się, że wszędzie używamy odpowiednich czcionek, również w zakładkach i nagłówku oraz dla przykład
również dla tekstu tutaj, którego obecnie nie jesteśmy, a
następnie wypełnij resztę aplikacji odrobiną mięsa. Na przykład tutaj strona ze szczegółami, która w
tej chwili ma jeszcze zawartość fikcyjną, a także nasza strona filtrów, która również zawiera tylko fikcyjną zawartość.
Tak zrobię w pozostałej części tego
modułu, a następnie w następnym module upewnimy się, że dodamy więcej logiki i że możemy na przykład
oznaczyć coś jako ulubionego, a zatem możemy dodać go do ulubionych karta, która obecnie nie działa.
Ale na razie zakończmy stylizację i dodaj resztę układu i zawartości do tej aplikacji.