1
00:00:02,390 --> 00:00:08,060
Przejdźmy teraz do ekranu filtrów i tam właśnie mam tylko zawartość fikcyjną, ekran

2
00:00:08,060 --> 00:00:11,420
filtrów i oczywiście nie jest to tam,

3
00:00:11,510 --> 00:00:20,060
czego chcę, zamiast tego chcę mieć trochę tekstu na górze, tam gdzie mówię dostępne filtry / ograniczenia lub coś w

4
00:00:20,060 --> 00:00:25,910
tym rodzaju, w którym chcę wskazać określony obiekt stylu za pomocą stylów, nazwijmy

5
00:00:25,910 --> 00:00:33,560
go tytuł może dlatego, że będzie to nasz główny tytuł tutaj, a poniżej tego chcę mieć moje różne

6
00:00:33,560 --> 00:00:34,250
filtry.

7
00:00:34,250 --> 00:00:41,180
Jak teraz wygląda filtr? Potrzebujemy przełącznika, pola wyboru, czegoś takiego,

8
00:00:41,180 --> 00:00:45,210
co pozwala nam włączać i wyłączać filtr oraz etykietę.

9
00:00:45,230 --> 00:00:50,840
Oznacza to, że prawdopodobnie widok ma sens grupowania etykiet i przełączania się razem

10
00:00:50,840 --> 00:00:52,970
i prawdopodobnie umieszczania ich

11
00:00:52,970 --> 00:01:04,560
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

12
00:01:04,560 --> 00:01:09,300
jest tam bezglutenowy, a następnie przełącznik i na szczęście React Native

13
00:01:10,050 --> 00:01:16,080
ma wbudowany przełącznik, o nazwie switch. Komponent przełącznika renderuje fajny przełącznik,

14
00:01:16,080 --> 00:01:19,140
którego możemy użyć, więc tutaj możemy po

15
00:01:19,140 --> 00:01:28,180
prostu użyć takiego przełącznika i wyrenderować go na ekranie. Będziemy musieli to skonfigurować, ale aby zacząć,

16
00:01:28,210 --> 00:01:36,520
możemy użyć tego w ten sposób. A teraz, jeśli chodzi o podstawową stylizację, tytuł i

17
00:01:36,520 --> 00:01:37,780
kontener filtrujący,

18
00:01:37,780 --> 00:01:39,490
zejdźmy tutaj, dodajmy tutaj

19
00:01:39,490 --> 00:01:48,040
filtr filtrujący i tytuł, a tytuł jest dość prosty. Tam chcę, aby użyć rodziny

20
00:01:48,120 --> 00:01:58,410
czcionek otwartych bez pogrubienia i rozmiaru czcionki 22, marginesu we wszystkich kierunkach 20, a także

21
00:01:58,550 --> 00:02:08,580
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

22
00:02:08,610 --> 00:02:11,530
osi, więc pionowe centrowanie nie powinno

23
00:02:11,700 --> 00:02:14,330
już się zdarzyć i dlatego

24
00:02:14,460 --> 00:02:21,610
możemy po prostu pozbyć się uzasadnionego centrum treści i kontenera filtrowania, z drugiej strony powinien ustawić

25
00:02:21,640 --> 00:02:24,970
przełącznik i tekst obok siebie z rzędu.

26
00:02:24,970 --> 00:02:34,060
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

27
00:02:34,060 --> 00:02:40,080
środku, tak aby była wyśrodkowana pionowo. Spójrzmy teraz na to, jeśli to zapiszemy

28
00:02:40,080 --> 00:02:46,290
i przejdziemy do ekranu filtra, oto co otrzymaliśmy. Tutaj mamy przełącznik i jak teraz widzisz, to zawsze przeskakuje

29
00:02:46,290 --> 00:02:47,460
do tyłu, to jest

30
00:02:47,460 --> 00:02:53,130
coś, czym zajmiemy się za sekundę, ale ogólnie widzimy to i tutaj, w filtrach dla Androida, mamy przełącznik Androida,

31
00:02:53,130 --> 00:02:58,380
który również przeskakuje z powrotem, ale dogodnie jest już wstępnie zaktualizowany dla Androida, więc jest to właściwie kolejny

32
00:02:58,380 --> 00:02:58,920
składnik

33
00:02:58,920 --> 00:03:05,300
wbudowany w React Native, który ma domyślny wygląd dla Androida. To nie jest takie

34
00:03:05,300 --> 00:03:07,240
złe.

35
00:03:07,250 --> 00:03:13,070
Jedną rzeczą, którą chcę zmienić, jest kontener filtra, chcę przypisać stałą szerokość,

36
00:03:13,070 --> 00:03:19,430
powiedzmy 80%, i faktycznie zmień to tutaj na odstęp między, a nie wokół,

37
00:03:19,430 --> 00:03:20,480
ponieważ

38
00:03:20,480 --> 00:03:32,030
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

39
00:03:32,030 --> 00:03:39,440
nie skacze do tyłu, gdy go uruchomimy. W tym celu musisz wiedzieć, że w przypadku przełączników musisz ręcznie

40
00:03:39,440 --> 00:03:46,130
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

41
00:03:46,670 --> 00:03:53,120
wejściowych musisz przechowywać to, co użytkownik wprowadza i przesyłać je z powrotem do komponent, aby odzwierciedlić to w

42
00:03:53,210 --> 00:03:54,790
zaktualizowanym interfejsie użytkownika i

43
00:03:55,130 --> 00:03:57,080
robimy to z zarządzaniem stanem.

44
00:03:57,100 --> 00:04:03,040
Więc importujemy, aby użyć haka stanu z React, abyśmy mogli zarządzać stanem tutaj

45
00:04:03,290 --> 00:04:13,770
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

46
00:04:14,660 --> 00:04:16,930
fałsz, a teraz ten przełącznik

47
00:04:17,150 --> 00:04:18,800
tutaj, masz właściwość

48
00:04:22,330 --> 00:04:29,650
value, jest to właściwość wbudowana we wbudowany przełącznik, w którym wprowadzam isGlutenFree, więc przyjmuje to wartość logiczną,

49
00:04:29,650 --> 00:04:36,640
która wskazuje, czy ten przełącznik jest renderowany jako aktywny czy nieaktywny, więc jeśli jest oznaczony jako

50
00:04:36,640 --> 00:04:42,550
zaznaczony lub niezaznaczone powinienem powiedzieć, a masz właściwość onValueChange, która przyjmuje funkcję, która

51
00:04:42,550 --> 00:04:45,160
jest uruchamiana za każdym razem, gdy

52
00:04:45,160 --> 00:04:49,520
użytkownik kliknie ten przełącznik. Ta funkcja tutaj otrzymuje nową wartość,

53
00:04:49,610 --> 00:04:56,480
więc jeśli przełącznik był w trybie fałszywym, w trybie odznaczenia nowa wartość będzie prawdziwa, i odwrotnie, oczywiście i

54
00:04:56,480 --> 00:05:02,750
możemy to wykorzystać do aktualizacji naszego stanu i ustawienia isGlutenFree na nowa wartość, a ponieważ również

55
00:05:03,110 --> 00:05:09,050
zasilamy ten stan z powrotem, teraz nasz przełącznik powinien być zmienny i powinien pozostać w

56
00:05:09,290 --> 00:05:10,800
tym zaktualizowanym trybie.

57
00:05:10,820 --> 00:05:17,430
Jeśli więc przyjrzymy się temu, teraz naprawdę możemy przełączyć przełącznik i to jest poprawa.

58
00:05:17,450 --> 00:05:21,800
Styl przełącznika nie jest tym, czego chcę, ale używa jakiegoś

59
00:05:21,800 --> 00:05:26,010
domyślnego koloru, oczywiście chciałbym używać moich kolorów, których używam w

60
00:05:26,180 --> 00:05:30,020
aplikacji przez cały czas i dlatego możemy importować nasze

61
00:05:30,020 --> 00:05:39,140
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

62
00:05:39,710 --> 00:05:45,130
ścieżki, który pozwala nam dostosować kolory dla tego przełącznika, więc kolor tła i

63
00:05:45,140 --> 00:05:52,910
tak dalej, a kolor ścieżki przyjmuje obiekt jako wartość, stąd mamy obiekt, który przekazujemy tutaj do tego dynamicznego wiązania,

64
00:05:52,910 --> 00:05:59,030
w którym można ustawić kolor tła dla stanu fałszywego, więc jeśli jest nieaktywny, jeśli jest

65
00:05:59,030 --> 00:06:04,490
niezaznaczony, a tam jest w porządku z ustawieniem domyślnym, to wygląda dobrze ja,

66
00:06:04,490 --> 00:06:05,270
ale

67
00:06:05,660 --> 00:06:09,570
możesz też ustawić jeden dla prawdziwego przypadku, który jest

68
00:06:09,740 --> 00:06:15,680
sprawdzany i tam chcę użyć kolorów, koloru podstawowego i oczywiście możesz wybrać dowolny kolor.

69
00:06:15,680 --> 00:06:22,580
A jeśli to zrobimy i wrócę do filtrów, teraz używamy tutaj własnego koloru, co oczywiście jest bardziej

70
00:06:22,580 --> 00:06:24,740
zgodne z resztą tej

71
00:06:24,740 --> 00:06:33,340
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

72
00:06:33,340 --> 00:06:41,290
tutaj, który jest tutaj zielony, na Androidzie, a to po prostu wymaga sznurka, sznurka koloru, więc kod szesnastkowy, na

73
00:06:42,410 --> 00:06:49,530
przykład, możemy również wskazać kolor podstawowy kolor i jeśli robimy to, na iOS, teraz ma ten

74
00:06:49,530 --> 00:06:51,270
kolor i to samo

75
00:06:55,710 --> 00:06:56,820
na Androida.

76
00:06:59,660 --> 00:07:03,420
Teraz oczywiście na iOS, to nie wygląda tak

77
00:07:03,420 --> 00:07:07,480
dobrze, chciałbym zachować wartość domyślną, a rozwiązanie jest dość

78
00:07:07,500 --> 00:07:13,620
proste, możemy ponownie użyć starego, dobrego interfejsu API platformy, zaimportować to, a następnie

79
00:07:13,620 --> 00:07:21,000
tutaj, przypisując kolor kciuka , Sprawdzam platformę. OS równy Androidowi, w takim przypadku chcę użyć podstawowego koloru dla mojego

80
00:07:21,480 --> 00:07:26,410
kciuka, w przeciwnym razie ustawię go na pusty ciąg, co oznacza, że użyje domyślnego koloru białego w iOS.

81
00:07:26,510 --> 00:07:31,650
I dzięki temu mamy taki sam wygląd jak poprzednio, który lubię na iOS,

82
00:07:31,650 --> 00:07:33,300
ale oczywiście możesz również

83
00:07:33,300 --> 00:07:40,140
dostosować to do swoich wymagań, a na Androidzie nadal będziemy mieć wygląd, który widzieliśmy wcześniej, jeśli przejdę do

84
00:07:40,140 --> 00:07:45,650
filtra tutaj ekran, który również wygląda dobrze. Więc to jest przełącznik i jak

85
00:07:45,950 --> 00:07:50,060
możemy go dodać, teraz musimy tylko powtórzyć to dla wszystkich naszych innych

86
00:07:50,120 --> 00:07:55,700
przełączników, więc wszystkie pozostałe filtry mam na myśli. Mogę więc skopiować ten widok i dodać

87
00:07:55,700 --> 00:07:56,430
go

88
00:07:56,990 --> 00:08:01,960
ponownie dla laktozy lub dla wegan, ale jeśli zdarza się, że kopiujesz i wklejasz

89
00:08:02,090 --> 00:08:08,900
w kółko, gdy próbujemy to zrobić tutaj, zawsze jest to dobry przypadek, aby utworzyć osobny składnik lub funkcja, która

90
00:08:08,900 --> 00:08:10,680
renderuje ten kod wielokrotnego użytku.

91
00:08:10,730 --> 00:08:15,590
I tutaj ponownie utworzę osobny komponent w tym samym pliku, ponieważ tak naprawdę go

92
00:08:15,590 --> 00:08:16,040
tam

93
00:08:16,040 --> 00:08:19,150
używam, możesz też wybrać osobny plik, jeśli chcesz.

94
00:08:19,390 --> 00:08:23,720
Nazwie to przełącznik filtra, a to dostanie kilka rekwizytów iw

95
00:08:23,720 --> 00:08:30,820
tym komponencie, w końcu zwracam ten kod, skonfigurowaliśmy for z widokiem i tekstem i tak dalej,

96
00:08:30,820 --> 00:08:31,410
i

97
00:08:31,610 --> 00:08:37,100
oczywiście teraz tekst musi być dynamiczny. Tam możemy ustawić to na etykietę rekwizytów

98
00:08:37,100 --> 00:08:41,810
i to od ciebie zależy, co wybierzesz tutaj, ponieważ to ty i tak później

99
00:08:43,050 --> 00:08:48,930
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.

100
00:08:48,930 --> 00:08:57,230
Więc tutaj powinien to być na przykład stan rekwizytów lub wartość rekwizytów lub cokolwiek chcesz użyć, a tutaj dla

101
00:08:57,310 --> 00:09:03,490
onValueChange, po prostu wskażę na rekwizyty. onChange na przykład, ale znowu wszystkie

102
00:09:03,490 --> 00:09:08,140
te nazwy rekwizytów oczywiście są całkowicie zależne od ciebie, ponieważ będziesz

103
00:09:08,140 --> 00:09:16,870
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ć

104
00:09:16,870 --> 00:09:20,730
etykietę ponieważ spodziewam się tutaj propozycji etykiety, jeśli nazwiesz

105
00:09:20,800 --> 00:09:22,990
ją inaczej, oczywiście musisz

106
00:09:22,990 --> 00:09:29,230
ją tutaj nazwać inaczej, a etykieta oczywiście jest bezglutenowa, ponieważ zamierzam tutaj wymienić ten przełącznik.

107
00:09:29,380 --> 00:09:35,830
Następnie musimy przejść w stan, ponieważ dodałem tutaj prop stanu, aby zarządzać moją wartością, jeśli

108
00:09:35,830 --> 00:09:39,610
nazwałeś go inaczej, musisz również nazwać go inaczej

109
00:09:39,620 --> 00:09:42,970
tam, a tutaj wskażę isGlutenFree, mój stan

110
00:09:42,970 --> 00:09:45,120
i potrzeby zmiany do

111
00:09:45,130 --> 00:09:49,840
dostarczenia, ponieważ tutaj używam wniosku onChange, aby powiązać go z onValueChange.

112
00:09:49,840 --> 00:09:55,990
Powinno to wskazywać na funkcję i oczywiście tutaj, po prostu zatrzymam tę funkcję

113
00:09:55,990 --> 00:10:03,550
tutaj, a ponieważ używam onChange tutaj, aby przekazać ją do onValueChange, otrzymujemy również tutaj argument nowej wartości.

114
00:10:04,870 --> 00:10:10,480
Teraz możemy pozbyć się tego widoku na dole i po prostu użyć naszego komponentu przełącznika filtra, a teraz

115
00:10:10,510 --> 00:10:13,270
po prostu powtórzyć to, co jest oczywiście łatwiejsze.

116
00:10:13,270 --> 00:10:23,450
Więc teraz tutaj możemy również mieć bez laktozy, wegańskie i wegetariańskie i musimy teraz

117
00:10:24,490 --> 00:10:34,740
dodać trzy nowe stany, więc pozwólcie, że powtórzę to, mamy isLactoseFree i zestaw isLactoseFree,

118
00:10:34,740 --> 00:10:39,210
tutaj mamy isVegan i zestaw isVegan,

119
00:10:39,270 --> 00:10:42,720
a tutaj mamy isVegetarian

120
00:10:48,010 --> 00:10:51,000
i set isVegetarian.

121
00:10:51,020 --> 00:10:57,740
Teraz musimy tylko upewnić się, że używamy stanów we właściwych miejscach, więc dla drugiego

122
00:10:57,760 --> 00:11:02,220
przełącznika filtra, w którym mamy filtr bezlaktozowy, przesyłam stan

123
00:11:02,250 --> 00:11:09,100
isLactoseFree i aktualizuję zestaw oczywiście isLactoseFree. W przypadku przełącznika wegańskiego przekazuję

124
00:11:09,160 --> 00:11:17,980
isVegan i aktualizujemy go za pomocą zestawu isVegan, a dla wegetarianinów przekazujemy isVegetarian i

125
00:11:17,980 --> 00:11:22,060
aktualizujemy zestaw isVegetarian, w ten sposób.

126
00:11:25,410 --> 00:11:25,880
OK,

127
00:11:25,970 --> 00:11:31,790
to powinno być to, jeśli teraz to zapiszemy, powinniśmy mieć ekran filtrów z naszymi różnymi filtrami, które

128
00:11:31,790 --> 00:11:36,770
możemy ustawić niezależnie, ponieważ mamy niezależne stany. Myślę, że byłoby miło mieć

129
00:11:36,770 --> 00:11:43,610
trochę odstępów między tymi rzędami, więc zastosujmy to. W naszym pojemniku z filtrem możemy po prostu

130
00:11:43,610 --> 00:11:50,570
dodać pionowy margines, powiedzmy 10 lub 50, może nieco więcej, a to powinno zapewnić, że mamy tam

131
00:11:50,570 --> 00:11:51,970
pewne odstępy,

132
00:11:52,130 --> 00:11:54,550
tak i to wygląda całkiem ładnie.