Przejdźmy teraz do ekranu filtrów i tam właśnie mam tylko zawartość fikcyjną, ekran
filtrów i oczywiście nie jest to tam,
czego chcę, zamiast tego chcę mieć trochę tekstu na górze, tam gdzie mówię dostępne filtry / ograniczenia lub coś w
tym rodzaju, w którym chcę wskazać określony obiekt stylu za pomocą stylów, nazwijmy
go tytuł może dlatego, że będzie to nasz główny tytuł tutaj, a poniżej tego chcę mieć moje różne
filtry.
Jak teraz wygląda filtr? Potrzebujemy przełącznika, pola wyboru, czegoś takiego,
co pozwala nam włączać i wyłączać filtr oraz etykietę.
Oznacza to, że prawdopodobnie widok ma sens grupowania etykiet i przełączania się razem
i prawdopodobnie umieszczania ich
obok siebie, a ja nadam widokowi styl pojemnika na filtr, coś w tym rodzaju i tam, jak powiedziałem, chcę mam tekst z etykietą, na przykład powiedzmy, że
jest tam bezglutenowy, a następnie przełącznik i na szczęście React Native
ma wbudowany przełącznik, o nazwie switch. Komponent przełącznika renderuje fajny przełącznik,
którego możemy użyć, więc tutaj możemy po
prostu użyć takiego przełącznika i wyrenderować go na ekranie. Będziemy musieli to skonfigurować, ale aby zacząć,
możemy użyć tego w ten sposób. A teraz, jeśli chodzi o podstawową stylizację, tytuł i
kontener filtrujący,
zejdźmy tutaj, dodajmy tutaj
filtr filtrujący i tytuł, a tytuł jest dość prosty. Tam chcę, aby użyć rodziny
czcionek otwartych bez pogrubienia i rozmiaru czcionki 22, marginesu we wszystkich kierunkach 20, a także
ustawić wyrównywanie tekstu do środka, aby wyśrodkować. Nawiasem mówiąc, ogólny ekran nie powinien już wyśrodkowywać elementów na głównej
osi, więc pionowe centrowanie nie powinno
już się zdarzyć i dlatego
możemy po prostu pozbyć się uzasadnionego centrum treści i kontenera filtrowania, z drugiej strony powinien ustawić
przełącznik i tekst obok siebie z rzędu.
Więc tutaj możemy ustawić kierunek wygięcia w rzędzie, może uzasadnić zawartość, dodając miejsce dookoła i wyrównywać elementy na osi poprzecznej na
środku, tak aby była wyśrodkowana pionowo. Spójrzmy teraz na to, jeśli to zapiszemy
i przejdziemy do ekranu filtra, oto co otrzymaliśmy. Tutaj mamy przełącznik i jak teraz widzisz, to zawsze przeskakuje
do tyłu, to jest
coś, czym zajmiemy się za sekundę, ale ogólnie widzimy to i tutaj, w filtrach dla Androida, mamy przełącznik Androida,
który również przeskakuje z powrotem, ale dogodnie jest już wstępnie zaktualizowany dla Androida, więc jest to właściwie kolejny
składnik
wbudowany w React Native, który ma domyślny wygląd dla Androida. To nie jest takie
złe.
Jedną rzeczą, którą chcę zmienić, jest kontener filtra, chcę przypisać stałą szerokość,
powiedzmy 80%, i faktycznie zmień to tutaj na odstęp między, a nie wokół,
ponieważ
myślę, że teraz wygląda to trochę ładniej, tak zdecydowanie, również na Androidzie, a teraz możemy się upewnić, że ten przełącznik faktycznie działa i że
nie skacze do tyłu, gdy go uruchomimy. W tym celu musisz wiedzieć, że w przypadku przełączników musisz ręcznie
zarządzać ich stanem, a to w rzeczywistości nie jest nowe, w React często zdarza się, że w przypadku tych składników
wejściowych musisz przechowywać to, co użytkownik wprowadza i przesyłać je z powrotem do komponent, aby odzwierciedlić to w
zaktualizowanym interfejsie użytkownika i
robimy to z zarządzaniem stanem.
Więc importujemy, aby użyć haka stanu z React, abyśmy mogli zarządzać stanem tutaj
w tym komponencie funkcjonalnym i że tutaj będę miał mój stan glutenu i nadam mu nazwę isGlutenFree i ustawię stan użycia isGlutenFree, początkowo to
fałsz, a teraz ten przełącznik
tutaj, masz właściwość
value, jest to właściwość wbudowana we wbudowany przełącznik, w którym wprowadzam isGlutenFree, więc przyjmuje to wartość logiczną,
która wskazuje, czy ten przełącznik jest renderowany jako aktywny czy nieaktywny, więc jeśli jest oznaczony jako
zaznaczony lub niezaznaczone powinienem powiedzieć, a masz właściwość onValueChange, która przyjmuje funkcję, która
jest uruchamiana za każdym razem, gdy
użytkownik kliknie ten przełącznik. Ta funkcja tutaj otrzymuje nową wartość,
więc jeśli przełącznik był w trybie fałszywym, w trybie odznaczenia nowa wartość będzie prawdziwa, i odwrotnie, oczywiście i
możemy to wykorzystać do aktualizacji naszego stanu i ustawienia isGlutenFree na nowa wartość, a ponieważ również
zasilamy ten stan z powrotem, teraz nasz przełącznik powinien być zmienny i powinien pozostać w
tym zaktualizowanym trybie.
Jeśli więc przyjrzymy się temu, teraz naprawdę możemy przełączyć przełącznik i to jest poprawa.
Styl przełącznika nie jest tym, czego chcę, ale używa jakiegoś
domyślnego koloru, oczywiście chciałbym używać moich kolorów, których używam w
aplikacji przez cały czas i dlatego możemy importować nasze
kolory oczywiście, więc importuj kolory ze stałych / Kolorów, a przełącznik ma kolejną właściwość, która pomaga nam tutaj stylizować, możemy dodać kolor
ścieżki, który pozwala nam dostosować kolory dla tego przełącznika, więc kolor tła i
tak dalej, a kolor ścieżki przyjmuje obiekt jako wartość, stąd mamy obiekt, który przekazujemy tutaj do tego dynamicznego wiązania,
w którym można ustawić kolor tła dla stanu fałszywego, więc jeśli jest nieaktywny, jeśli jest
niezaznaczony, a tam jest w porządku z ustawieniem domyślnym, to wygląda dobrze ja,
ale
możesz też ustawić jeden dla prawdziwego przypadku, który jest
sprawdzany i tam chcę użyć kolorów, koloru podstawowego i oczywiście możesz wybrać dowolny kolor.
A jeśli to zrobimy i wrócę do filtrów, teraz używamy tutaj własnego koloru, co oczywiście jest bardziej
zgodne z resztą tej
aplikacji i oczywiście będzie to działać również tutaj na Androidzie. Możemy również ustawić kolor kciuka, który jest kolorem tego kciuka
tutaj, który jest tutaj zielony, na Androidzie, a to po prostu wymaga sznurka, sznurka koloru, więc kod szesnastkowy, na
przykład, możemy również wskazać kolor podstawowy kolor i jeśli robimy to, na iOS, teraz ma ten
kolor i to samo
na Androida.
Teraz oczywiście na iOS, to nie wygląda tak
dobrze, chciałbym zachować wartość domyślną, a rozwiązanie jest dość
proste, możemy ponownie użyć starego, dobrego interfejsu API platformy, zaimportować to, a następnie
tutaj, przypisując kolor kciuka , Sprawdzam platformę. OS równy Androidowi, w takim przypadku chcę użyć podstawowego koloru dla mojego
kciuka, w przeciwnym razie ustawię go na pusty ciąg, co oznacza, że użyje domyślnego koloru białego w iOS.
I dzięki temu mamy taki sam wygląd jak poprzednio, który lubię na iOS,
ale oczywiście możesz również
dostosować to do swoich wymagań, a na Androidzie nadal będziemy mieć wygląd, który widzieliśmy wcześniej, jeśli przejdę do
filtra tutaj ekran, który również wygląda dobrze. Więc to jest przełącznik i jak
możemy go dodać, teraz musimy tylko powtórzyć to dla wszystkich naszych innych
przełączników, więc wszystkie pozostałe filtry mam na myśli. Mogę więc skopiować ten widok i dodać
go
ponownie dla laktozy lub dla wegan, ale jeśli zdarza się, że kopiujesz i wklejasz
w kółko, gdy próbujemy to zrobić tutaj, zawsze jest to dobry przypadek, aby utworzyć osobny składnik lub funkcja, która
renderuje ten kod wielokrotnego użytku.
I tutaj ponownie utworzę osobny komponent w tym samym pliku, ponieważ tak naprawdę go
tam
używam, możesz też wybrać osobny plik, jeśli chcesz.
Nazwie to przełącznik filtra, a to dostanie kilka rekwizytów iw
tym komponencie, w końcu zwracam ten kod, skonfigurowaliśmy for z widokiem i tekstem i tak dalej,
i
oczywiście teraz tekst musi być dynamiczny. Tam możemy ustawić to na etykietę rekwizytów
i to od ciebie zależy, co wybierzesz tutaj, ponieważ to ty i tak później
przekażesz wartości rekwizytów, i oczywiście tutaj, co dzieje się naValueChange i co przekazujemy do wartości, również się różni.
Więc tutaj powinien to być na przykład stan rekwizytów lub wartość rekwizytów lub cokolwiek chcesz użyć, a tutaj dla
onValueChange, po prostu wskażę na rekwizyty. onChange na przykład, ale znowu wszystkie
te nazwy rekwizytów oczywiście są całkowicie zależne od ciebie, ponieważ będziesz
tym, który użyje tego komponentu i będziemy go teraz używać, tak jak ten, samozamykający się komponent, w którym możemy teraz ustawić
etykietę ponieważ spodziewam się tutaj propozycji etykiety, jeśli nazwiesz
ją inaczej, oczywiście musisz
ją tutaj nazwać inaczej, a etykieta oczywiście jest bezglutenowa, ponieważ zamierzam tutaj wymienić ten przełącznik.
Następnie musimy przejść w stan, ponieważ dodałem tutaj prop stanu, aby zarządzać moją wartością, jeśli
nazwałeś go inaczej, musisz również nazwać go inaczej
tam, a tutaj wskażę isGlutenFree, mój stan
i potrzeby zmiany do
dostarczenia, ponieważ tutaj używam wniosku onChange, aby powiązać go z onValueChange.
Powinno to wskazywać na funkcję i oczywiście tutaj, po prostu zatrzymam tę funkcję
tutaj, a ponieważ używam onChange tutaj, aby przekazać ją do onValueChange, otrzymujemy również tutaj argument nowej wartości.
Teraz możemy pozbyć się tego widoku na dole i po prostu użyć naszego komponentu przełącznika filtra, a teraz
po prostu powtórzyć to, co jest oczywiście łatwiejsze.
Więc teraz tutaj możemy również mieć bez laktozy, wegańskie i wegetariańskie i musimy teraz
dodać trzy nowe stany, więc pozwólcie, że powtórzę to, mamy isLactoseFree i zestaw isLactoseFree,
tutaj mamy isVegan i zestaw isVegan,
a tutaj mamy isVegetarian
i set isVegetarian.
Teraz musimy tylko upewnić się, że używamy stanów we właściwych miejscach, więc dla drugiego
przełącznika filtra, w którym mamy filtr bezlaktozowy, przesyłam stan
isLactoseFree i aktualizuję zestaw oczywiście isLactoseFree. W przypadku przełącznika wegańskiego przekazuję
isVegan i aktualizujemy go za pomocą zestawu isVegan, a dla wegetarianinów przekazujemy isVegetarian i
aktualizujemy zestaw isVegetarian, w ten sposób.
OK,
to powinno być to, jeśli teraz to zapiszemy, powinniśmy mieć ekran filtrów z naszymi różnymi filtrami, które
możemy ustawić niezależnie, ponieważ mamy niezależne stany. Myślę, że byłoby miło mieć
trochę odstępów między tymi rzędami, więc zastosujmy to. W naszym pojemniku z filtrem możemy po prostu
dodać pionowy margines, powiedzmy 10 lub 50, może nieco więcej, a to powinno zapewnić, że mamy tam
pewne odstępy,
tak i to wygląda całkiem ładnie.