Dokładnie przyjrzeliśmy się wymiarom, orientacjom i renderowaniu różnych stylów i układów w zależności od dostępnej szerokości
i wysokości, a także temu, jak reagować na zmiany szerokości i wysokości podczas obracania
urządzenia, na przykład bardzo ważne rzeczy.
Zobaczmy teraz, jak możesz renderować różne style lub układy lub cokolwiek chcesz, w
zależności od platformy, na której pracujesz.
W tej chwili mamy w zasadzie identyczną aplikację na iOS i Androida z jednym wyjątkiem i to jest
nasz przycisk tutaj.
Przyciski wyglądają inaczej, ponieważ składnik przycisku, którego używamy, jest komponentem zapisanym w React Native i
jest jednym z bardzo rzadkich, w rzeczywistości jedynym składnikiem oferty React Native, który automatycznie dostosowuje się na podstawie platformy, na
której działa twoja aplikacja, żadna inna komponent naprawdę
to robi, ale oczywiście możesz napisać kod, aby dostosować swoje style, logikę układu, cokolwiek chcesz, w zależności
od platformy, na której działasz. Aby zobaczyć przykład, przejdźmy do
naszego komponentu nagłówka i przejdźmy do sposobu, w
jaki prezentujemy ten nagłówek. Na Androidzie możemy
mieć ten kolor tła, a następnie tekst przed nim, w iOS
możemy chcieć mieć biały kolor tła i mieć tylko cienką ramkę na dole, a zamiast
tego mieć tekst w naszym
podstawowym kolorze, który byłby bardziej typowy wygląd iOS.
Teraz, aby dowiedzieć się, na jakiej platformie korzystasz, React Native ma Cię na swoim koncie,
ma obiekt platformy, w którym wymiary pomagają znaleźć wymiary urządzenia, na którym
pracujesz, platforma pomaga znaleźć platformę urządzenia biegniesz dalej.
Teraz w stylach, które tworzyłeś, możemy
na tej podstawie renderować inny kolor tła.
Możemy korzystać z platformy, a teraz masz kilka właściwości, których możesz
użyć, na przykład masz właściwość systemu operacyjnego, a system operacyjny to w zasadzie system operacyjny i jest to jedna
z wartości,
które tutaj widzisz, przede wszystkim iOS lub Android.
Więc tutaj możemy sprawdzić, czy jest to równe, powiedzmy, Androidowi, w tym przypadku ustawiłem kolor tła
na kolory podstawowe,
ale jeśli nie jest to Android, a zatem jeśli jest to iOS, ustawiłem to na powiedzenie białe.
Teraz, jeśli to zrobimy i zachowamy to, zobaczymy tutaj biały nagłówek na urządzeniu z systemem iOS i kolorowy nagłówek na
urządzeniu z systemem Android.
Teraz oczywiście nie musisz konfigurować żadnego odbiornika na platformie, a także nie oferuje takiej funkcjonalności,
ponieważ platforma nie może się zmienić, gdy aplikacja jest uruchomiona, to oczywiście
ten sam system operacyjny.
Teraz zakończmy stylizację na iOS.
Powiedziałem, że chcę mieć cienką ramkę na dole, abyśmy mogli dodać kolor
dolnej ramki i sprawdzić platformę, a jeśli system operacyjny jest równy iOS, chcę ustawić kolor
dolnej ramki, aby powiedzieć, że jest szarawy kolor, w przeciwnym razie
wyślę go na biały lub przezroczysty, abyśmy nie widzieli go na Androidzie i dodali dolną ramkę
z powiedzmy, i tam też sprawdzamy dla iOS, powiedzmy jeden piksel na iOS i zero na Androidzie.
Więc teraz nie powinniśmy nic widzieć na Androidzie, ale mamy tę cienką ramkę tutaj na iOS.
Wreszcie, pokolorujmy tekst, przechodząc tutaj do tekstu tytułowego, a tekst tytułowy rzeczywiście łączy się ze wszystkimi stylami ustawionymi na
podporze stylu, więc tutaj w tekście
tytułowym możemy dodać rekwizyt stylu i wskazać style. tytuł tutaj lub jakkolwiek chcesz go
nazwać i dodaj taki obiekt stylu tytułu tutaj w naszym arkuszu stylów, w
którym ustawiamy kolor, który jest kolorem tekstu również na podstawie platformy.
Jeśli to jest iOS, powiedzmy, że ustawiliśmy to na kolory. pierwotne i inaczej, ustawmy na biały, wcześniej był
czarny,
teraz ustawmy na biały.
Teraz mamy biały tytuł tutaj na Androida, ale kolorowy tytuł tutaj na iOS i to, jak łatwo można
ustawić różne style w zależności od platformy, na której
działa.