1 00:00:02,230 --> 00:00:08,380 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 2 00:00:08,380 --> 00:00:14,030 i wysokości, a także temu, jak reagować na zmiany szerokości i wysokości podczas obracania 3 00:00:14,080 --> 00:00:17,010 urządzenia, na przykład bardzo ważne rzeczy. 4 00:00:17,680 --> 00:00:22,900 Zobaczmy teraz, jak możesz renderować różne style lub układy lub cokolwiek chcesz, w 5 00:00:23,080 --> 00:00:25,660 zależności od platformy, na której pracujesz. 6 00:00:25,660 --> 00:00:31,120 W tej chwili mamy w zasadzie identyczną aplikację na iOS i Androida z jednym wyjątkiem i to jest 7 00:00:31,120 --> 00:00:32,240 nasz przycisk tutaj. 8 00:00:32,320 --> 00:00:38,320 Przyciski wyglądają inaczej, ponieważ składnik przycisku, którego używamy, jest komponentem zapisanym w React Native i 9 00:00:38,320 --> 00:00:46,060 jest jednym z bardzo rzadkich, w rzeczywistości jedynym składnikiem oferty React Native, który automatycznie dostosowuje się na podstawie platformy, na 10 00:00:46,060 --> 00:00:49,310 której działa twoja aplikacja, żadna inna komponent naprawdę 11 00:00:49,390 --> 00:00:56,290 to robi, ale oczywiście możesz napisać kod, aby dostosować swoje style, logikę układu, cokolwiek chcesz, w zależności 12 00:00:56,320 --> 00:01:01,000 od platformy, na której działasz. Aby zobaczyć przykład, przejdźmy do 13 00:01:01,000 --> 00:01:04,170 naszego komponentu nagłówka i przejdźmy do sposobu, w 14 00:01:04,180 --> 00:01:08,020 jaki prezentujemy ten nagłówek. Na Androidzie możemy 15 00:01:08,020 --> 00:01:12,810 mieć ten kolor tła, a następnie tekst przed nim, w iOS 16 00:01:12,820 --> 00:01:19,240 możemy chcieć mieć biały kolor tła i mieć tylko cienką ramkę na dole, a zamiast 17 00:01:19,240 --> 00:01:21,750 tego mieć tekst w naszym 18 00:01:21,760 --> 00:01:25,270 podstawowym kolorze, który byłby bardziej typowy wygląd iOS. 19 00:01:25,360 --> 00:01:31,810 Teraz, aby dowiedzieć się, na jakiej platformie korzystasz, React Native ma Cię na swoim koncie, 20 00:01:32,110 --> 00:01:37,630 ma obiekt platformy, w którym wymiary pomagają znaleźć wymiary urządzenia, na którym 21 00:01:37,630 --> 00:01:41,750 pracujesz, platforma pomaga znaleźć platformę urządzenia biegniesz dalej. 22 00:01:41,910 --> 00:01:45,270 Teraz w stylach, które tworzyłeś, możemy 23 00:01:45,270 --> 00:01:48,660 na tej podstawie renderować inny kolor tła. 24 00:01:48,810 --> 00:01:53,310 Możemy korzystać z platformy, a teraz masz kilka właściwości, których możesz 25 00:01:53,310 --> 00:02:01,170 użyć, na przykład masz właściwość systemu operacyjnego, a system operacyjny to w zasadzie system operacyjny i jest to jedna 26 00:02:01,170 --> 00:02:02,220 z wartości, 27 00:02:02,220 --> 00:02:05,670 które tutaj widzisz, przede wszystkim iOS lub Android. 28 00:02:05,700 --> 00:02:12,000 Więc tutaj możemy sprawdzić, czy jest to równe, powiedzmy, Androidowi, w tym przypadku ustawiłem kolor tła 29 00:02:12,000 --> 00:02:13,570 na kolory podstawowe, 30 00:02:13,770 --> 00:02:20,130 ale jeśli nie jest to Android, a zatem jeśli jest to iOS, ustawiłem to na powiedzenie białe. 31 00:02:20,130 --> 00:02:28,800 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 32 00:02:28,980 --> 00:02:31,090 urządzeniu z systemem Android. 33 00:02:31,260 --> 00:02:36,960 Teraz oczywiście nie musisz konfigurować żadnego odbiornika na platformie, a także nie oferuje takiej funkcjonalności, 34 00:02:37,140 --> 00:02:42,090 ponieważ platforma nie może się zmienić, gdy aplikacja jest uruchomiona, to oczywiście 35 00:02:42,090 --> 00:02:43,800 ten sam system operacyjny. 36 00:02:43,830 --> 00:02:46,240 Teraz zakończmy stylizację na iOS. 37 00:02:46,650 --> 00:02:53,340 Powiedziałem, że chcę mieć cienką ramkę na dole, abyśmy mogli dodać kolor 38 00:02:53,340 --> 00:03:01,410 dolnej ramki i sprawdzić platformę, a jeśli system operacyjny jest równy iOS, chcę ustawić kolor 39 00:03:01,410 --> 00:03:07,950 dolnej ramki, aby powiedzieć, że jest szarawy kolor, w przeciwnym razie 40 00:03:07,980 --> 00:03:16,350 wyślę go na biały lub przezroczysty, abyśmy nie widzieli go na Androidzie i dodali dolną ramkę 41 00:03:16,770 --> 00:03:25,590 z powiedzmy, i tam też sprawdzamy dla iOS, powiedzmy jeden piksel na iOS i zero na Androidzie. 42 00:03:25,590 --> 00:03:31,410 Więc teraz nie powinniśmy nic widzieć na Androidzie, ale mamy tę cienką ramkę tutaj na iOS. 43 00:03:31,530 --> 00:03:39,530 Wreszcie, pokolorujmy tekst, przechodząc tutaj do tekstu tytułowego, a tekst tytułowy rzeczywiście łączy się ze wszystkimi stylami ustawionymi na 44 00:03:39,590 --> 00:03:42,400 podporze stylu, więc tutaj w tekście 45 00:03:42,770 --> 00:03:48,950 tytułowym możemy dodać rekwizyt stylu i wskazać style. tytuł tutaj lub jakkolwiek chcesz go 46 00:03:48,960 --> 00:03:55,440 nazwać i dodaj taki obiekt stylu tytułu tutaj w naszym arkuszu stylów, w 47 00:03:55,860 --> 00:04:01,380 którym ustawiamy kolor, który jest kolorem tekstu również na podstawie platformy. 48 00:04:01,770 --> 00:04:08,970 Jeśli to jest iOS, powiedzmy, że ustawiliśmy to na kolory. pierwotne i inaczej, ustawmy na biały, wcześniej był 49 00:04:08,970 --> 00:04:09,830 czarny, 50 00:04:09,840 --> 00:04:11,700 teraz ustawmy na biały. 51 00:04:11,700 --> 00:04:18,990 Teraz mamy biały tytuł tutaj na Androida, ale kolorowy tytuł tutaj na iOS i to, jak łatwo można 52 00:04:18,990 --> 00:04:22,600 ustawić różne style w zależności od platformy, na której 53 00:04:22,620 --> 00:04:23,400 działa.