Czasami dodawanie wielu takich czeków może być kłopotliwe, a tutaj
mamy już na przykład trzy kontrole w nagłówku,
z pewnością coś, co możemy dodać, ale może nie jest optymalne.
Zamiast tego, aby nasze obiekty stylu były czystsze, moglibyśmy ustawić tutaj nagłówek podstawowy, na
przykład nagłówek podstawowy, a następnie dodać headerIOS i headerAndroid, a teraz usuwamy wszystkie style, które zmieniają się w zależności od platformy, ze stylu podstawowego,
dodaj je tutaj do
headerIOS i headerAndroid i na header iOS, zachowujemy
tylko wygląd iOS tutaj, więc jest biały, następnie ten kolor
dla obramowania u dołu i szerokość jednego piksela dla tego obramowania, a tutaj na
Androida, usuwamy to zaznaczenie i zachowujemy kolor podstawowy jako kolor tła, az drugiej strony pozbywamy się
granicy, używając tych wartości lub całkowicie je usuwając i nie ustawiając
wcale.
Teraz musimy tylko upewnić się, że dodamy headerIOS lub headerAndroid i w tym celu możemy przejść
tutaj i skonfigurować nasz obiekt stylów, w którym scalamy teraz wszystkie nasze
podstawowe style nagłówków, więc są one zawsze ustawione, ale teraz dodatkowo możemy scalić w wyniku wyboru platformy, która jest teraz metodą, która
bierze obiekt, w którym musimy określić klucz iOS i wskazać wartość lub w tym przypadku obiekt, którego chcemy użyć,
jeśli jesteśmy na iOS, który jest stylami. headerIOS i dodaj klucz Androida i wskaż
style, które ten nagłówekAndroid,
a tym samym mówimy React Native, połącz właściwości właściwości, w tym przypadku obiekt,
który wybieramy dla iOS i Androida.
Więc zawsze musisz przekazać obiekt do wyboru platformy, a następnie masz różne wartości dla iOS i Androida,
a wartość tutaj może być również liczbą, po prostu nie działałaby tutaj, ponieważ
tutaj faktycznie oczekujemy obiektu, dzięki czemu możemy wyciągnij wszystkie pary wartości nieruchomości i przekaż je naszemu otaczającemu stylowi.
Więc tutaj liczba nie ma sensu, ale możesz użyć select z dowolną wartością,
tutaj potrzebujemy tylko
obiektu, więc wskazujemy na obiekt headerIOS i obiekty headerAndroid. I dzięki temu mamy uproszczony kod, mamy tam
uproszczone style, a następnie mamy kod ze stylem podstawowym, w którym następnie używamy wyboru platformy,
aby dynamicznie wybierać różne style w oparciu o platformę, na której działamy, a zatem teraz, mamy taki
sam wygląd jak poprzednio, ale teraz w bardziej elegancki sposób. Kolejnym miejscem w naszej aplikacji, w którym moglibyśmy skorzystać
z tego, jest nasz główny przycisk tutaj. Nasz główny przycisk wygląda i działa tak samo na obu platformach, co
nie jest okropne, ale które może nie być tym, czego chcemy.
Jeśli pójdziemy do naszego przycisku głównego. js, widzimy, że zawsze używamy tutaj krycia dotykalnego, ale tak naprawdę
na Androidzie, możemy chcieć użyć efektu falowania.
Na szczęście React Native ma wbudowany natywny komponent sprzężenia zwrotnego, który w rzeczywistości daje nam dotykalny
obiekt, który ma wbudowany efekt tętnienia,
więc chcemy go używać na Androidzie i dotykowego krycia na iOS.
Teraz możemy oczywiście korzystać z interfejsu API platformy, który w związku z tym musimy również
zaimportować z React Native, aby użyć tutaj innego
komponentu opartego na platformie i do tego możemy użyć naprawdę fajnej funkcji React nie
ma React Native specyficznej,
ale możemy użyć w React w ogóle możemy ustawić zmienną, która zaczyna się od dużej litery, abyśmy
mogli używać jej jako elementu jsx, ponieważ tylko zmienne wielkich znaków mogą być używane jako elementy jsx i nazywamy to, powiedzmy,
komponentem przycisku, nazwą zależy wyłącznie od Ciebie i domyślnie jest to krycie dotykalne.
Wskazuję więc na dotykalny obiekt nieprzezroczystości, bez kątowych nawiasów, po prostu wskazując go w ten sposób.
Teraz możemy dodać opcję sprawdź i sprawdź, czy system operacyjny platformy jest równy systemowi Android i ważne, sprawdź
także coś innego na
platformie, sprawdź również, czy wersja platformy jest większa lub równa 21, ponieważ tylko interfejs API systemu Android w wersji
21 lub wyższej obsługuje efekt tętnienia.
Więc jeśli oba są prawdziwe, ustawimy składnik przycisku na dotykową natywną informację zwrotną, więc użyjemy tego
z efektem marszczenia, w przeciwnym razie użyjemy tego z efektem krycia.
Więc jeśli korzystamy z Androida, a wersja Androida jest wystarczająco wysoka, ma 21 lub
więcej, wtedy używamy dotykowej natywnej informacji zwrotnej. Teraz, gdy nazywam to wielką literą, możemy użyć tego tutaj
zamiast dotykalnego krycia w naszym kodzie jsx, początkowo wygląda dziwnie, ale będzie działał doskonale. Jeśli teraz to zapiszemy, a to się
zrestartuje, zobaczysz teraz, że masz ten efekt tętnienia, możesz to zobaczyć, jeśli naciśniemy i przytrzymamy, zobaczysz
ten efekt tętnienia na przycisku. Nie wygląda jeszcze idealnie, ponieważ w rzeczywistości jest
prostokątny i nie respektuje naszego promienia granicy i naprawimy to,
ale działa, a z drugiej strony tutaj na iOS, mamy efekt krycia, jak możesz powiedzieć, jeśli to naciśniesz.
Więc teraz poprawmy promień krawędzi i możemy to zrobić, owijając to innym widokiem, a to tylko mały
hack, małe obejście, o którym musisz wiedzieć.
Kończymy to innym widokiem, w którym ustawiam styl powiedzmy kontener
przycisku, dodaję ten styl tam w naszym arkuszu stylów i na tym kontenerze przycisków, który jest teraz zawinięty
wokół wszystkiego,
ustawiam ten sam promień obramowania, jak ustawiłem na przycisku , więc w tym przypadku 25 i dodaję ukryty przepełnienie,
co oznacza, że każdy komponent potomny, który wykroczyłby poza granice tego komponentu, więc komponent z
tym stylem jest zasadniczo przycięty, co zapewni efekt marszczenia, który jest teraz
element potomny tego widoku zostanie przycięty na zaokrąglonych krawędziach tego przycisku.
Więc teraz, jeśli to zapiszemy i spróbujemy ponownie, zobaczysz, że efekt marszczenia wypełnia tylko przycisk, co oczywiście
wygląda znacznie lepiej, a na iOS oczywiście nadal zachowujemy się tak samo jak poprzednio.
Używanie platformy w teście if jest również czymś, co możemy zrobić, ale możemy
również użyć tej zgrabnej sztuczki, aby renderować zupełnie różne komponenty w oparciu o platformę, na której
działamy.