1
00:00:02,330 --> 00:00:06,200
Czasami dodawanie wielu takich czeków może być kłopotliwe, a tutaj

2
00:00:06,200 --> 00:00:09,920
mamy już na przykład trzy kontrole w nagłówku,

3
00:00:09,920 --> 00:00:14,070
z pewnością coś, co możemy dodać, ale może nie jest optymalne.

4
00:00:14,480 --> 00:00:22,970
Zamiast tego, aby nasze obiekty stylu były czystsze, moglibyśmy ustawić tutaj nagłówek podstawowy, na

5
00:00:23,360 --> 00:00:37,110
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,

6
00:00:37,110 --> 00:00:39,600
dodaj je tutaj do

7
00:00:39,860 --> 00:00:44,830
headerIOS i headerAndroid i na header iOS, zachowujemy

8
00:00:44,970 --> 00:00:51,020
tylko wygląd iOS tutaj, więc jest biały, następnie ten kolor

9
00:00:56,160 --> 00:01:04,100
dla obramowania u dołu i szerokość jednego piksela dla tego obramowania, a tutaj na

10
00:01:04,200 --> 00:01:13,200
Androida, usuwamy to zaznaczenie i zachowujemy kolor podstawowy jako kolor tła, az drugiej strony pozbywamy się

11
00:01:13,200 --> 00:01:19,800
granicy, używając tych wartości lub całkowicie je usuwając i nie ustawiając

12
00:01:19,800 --> 00:01:20,970
wcale.

13
00:01:20,970 --> 00:01:28,590
Teraz musimy tylko upewnić się, że dodamy headerIOS lub headerAndroid i w tym celu możemy przejść

14
00:01:28,690 --> 00:01:35,050
tutaj i skonfigurować nasz obiekt stylów, w którym scalamy teraz wszystkie nasze

15
00:01:35,070 --> 00:01:45,500
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

16
00:01:45,500 --> 00:01:54,770
bierze obiekt, w którym musimy określić klucz iOS i wskazać wartość lub w tym przypadku obiekt, którego chcemy użyć,

17
00:01:54,770 --> 00:02:02,270
jeśli jesteśmy na iOS, który jest stylami. headerIOS i dodaj klucz Androida i wskaż

18
00:02:02,270 --> 00:02:05,310
style, które ten nagłówekAndroid,

19
00:02:05,540 --> 00:02:12,380
a tym samym mówimy React Native, połącz właściwości właściwości, w tym przypadku obiekt,

20
00:02:12,380 --> 00:02:15,680
który wybieramy dla iOS i Androida.

21
00:02:15,680 --> 00:02:21,410
Więc zawsze musisz przekazać obiekt do wyboru platformy, a następnie masz różne wartości dla iOS i Androida,

22
00:02:21,410 --> 00:02:26,390
a wartość tutaj może być również liczbą, po prostu nie działałaby tutaj, ponieważ

23
00:02:26,390 --> 00:02:32,350
tutaj faktycznie oczekujemy obiektu, dzięki czemu możemy wyciągnij wszystkie pary wartości nieruchomości i przekaż je naszemu otaczającemu stylowi.

24
00:02:32,360 --> 00:02:37,310
Więc tutaj liczba nie ma sensu, ale możesz użyć select z dowolną wartością,

25
00:02:37,370 --> 00:02:38,960
tutaj potrzebujemy tylko

26
00:02:39,020 --> 00:02:45,410
obiektu, więc wskazujemy na obiekt headerIOS i obiekty headerAndroid. I dzięki temu mamy uproszczony kod, mamy tam

27
00:02:45,680 --> 00:02:51,110
uproszczone style, a następnie mamy kod ze stylem podstawowym, w którym następnie używamy wyboru platformy,

28
00:02:51,110 --> 00:02:57,230
aby dynamicznie wybierać różne style w oparciu o platformę, na której działamy, a zatem teraz, mamy taki

29
00:02:57,230 --> 00:03:04,760
sam wygląd jak poprzednio, ale teraz w bardziej elegancki sposób. Kolejnym miejscem w naszej aplikacji, w którym moglibyśmy skorzystać

30
00:03:04,760 --> 00:03:11,360
z tego, jest nasz główny przycisk tutaj. Nasz główny przycisk wygląda i działa tak samo na obu platformach, co

31
00:03:11,480 --> 00:03:14,780
nie jest okropne, ale które może nie być tym, czego chcemy.

32
00:03:15,590 --> 00:03:21,590
Jeśli pójdziemy do naszego przycisku głównego. js, widzimy, że zawsze używamy tutaj krycia dotykalnego, ale tak naprawdę

33
00:03:21,590 --> 00:03:23,940
na Androidzie, możemy chcieć użyć efektu falowania.

34
00:03:23,990 --> 00:03:30,740
Na szczęście React Native ma wbudowany natywny komponent sprzężenia zwrotnego, który w rzeczywistości daje nam dotykalny

35
00:03:30,740 --> 00:03:33,830
obiekt, który ma wbudowany efekt tętnienia,

36
00:03:33,920 --> 00:03:38,730
więc chcemy go używać na Androidzie i dotykowego krycia na iOS.

37
00:03:38,810 --> 00:03:44,300
Teraz możemy oczywiście korzystać z interfejsu API platformy, który w związku z tym musimy również

38
00:03:44,330 --> 00:03:47,510
zaimportować z React Native, aby użyć tutaj innego

39
00:03:47,630 --> 00:03:52,520
komponentu opartego na platformie i do tego możemy użyć naprawdę fajnej funkcji React nie

40
00:03:52,520 --> 00:03:54,200
ma React Native specyficznej,

41
00:03:54,290 --> 00:04:00,200
ale możemy użyć w React w ogóle możemy ustawić zmienną, która zaczyna się od dużej litery, abyśmy

42
00:04:00,230 --> 00:04:07,430
mogli używać jej jako elementu jsx, ponieważ tylko zmienne wielkich znaków mogą być używane jako elementy jsx i nazywamy to, powiedzmy,

43
00:04:07,490 --> 00:04:12,170
komponentem przycisku, nazwą zależy wyłącznie od Ciebie i domyślnie jest to krycie dotykalne.

44
00:04:12,170 --> 00:04:19,730
Wskazuję więc na dotykalny obiekt nieprzezroczystości, bez kątowych nawiasów, po prostu wskazując go w ten sposób.

45
00:04:19,730 --> 00:04:27,350
Teraz możemy dodać opcję sprawdź i sprawdź, czy system operacyjny platformy jest równy systemowi Android i ważne, sprawdź

46
00:04:27,350 --> 00:04:29,230
także coś innego na

47
00:04:29,240 --> 00:04:37,210
platformie, sprawdź również, czy wersja platformy jest większa lub równa 21, ponieważ tylko interfejs API systemu Android w wersji

48
00:04:37,230 --> 00:04:40,040
21 lub wyższej obsługuje efekt tętnienia.

49
00:04:40,100 --> 00:04:46,130
Więc jeśli oba są prawdziwe, ustawimy składnik przycisku na dotykową natywną informację zwrotną, więc użyjemy tego

50
00:04:46,130 --> 00:04:50,480
z efektem marszczenia, w przeciwnym razie użyjemy tego z efektem krycia.

51
00:04:50,600 --> 00:04:56,930
Więc jeśli korzystamy z Androida, a wersja Androida jest wystarczająco wysoka, ma 21 lub

52
00:04:56,930 --> 00:05:03,350
więcej, wtedy używamy dotykowej natywnej informacji zwrotnej. Teraz, gdy nazywam to wielką literą, możemy użyć tego tutaj

53
00:05:03,350 --> 00:05:12,260
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ę

54
00:05:12,500 --> 00:05:22,640
zrestartuje, zobaczysz teraz, że masz ten efekt tętnienia, możesz to zobaczyć, jeśli naciśniemy i przytrzymamy, zobaczysz

55
00:05:22,640 --> 00:05:29,450
ten efekt tętnienia na przycisku. Nie wygląda jeszcze idealnie, ponieważ w rzeczywistości jest

56
00:05:29,450 --> 00:05:33,350
prostokątny i nie respektuje naszego promienia granicy i naprawimy to,

57
00:05:33,350 --> 00:05:40,340
ale działa, a z drugiej strony tutaj na iOS, mamy efekt krycia, jak możesz powiedzieć, jeśli to naciśniesz.

58
00:05:40,340 --> 00:05:47,990
Więc teraz poprawmy promień krawędzi i możemy to zrobić, owijając to innym widokiem, a to tylko mały

59
00:05:47,990 --> 00:05:51,780
hack, małe obejście, o którym musisz wiedzieć.

60
00:05:52,010 --> 00:05:57,490
Kończymy to innym widokiem, w którym ustawiam styl powiedzmy kontener

61
00:05:58,480 --> 00:06:07,430
przycisku, dodaję ten styl tam w naszym arkuszu stylów i na tym kontenerze przycisków, który jest teraz zawinięty

62
00:06:07,430 --> 00:06:08,640
wokół wszystkiego,

63
00:06:08,780 --> 00:06:17,910
ustawiam ten sam promień obramowania, jak ustawiłem na przycisku , więc w tym przypadku 25 i dodaję ukryty przepełnienie,

64
00:06:18,000 --> 00:06:25,320
co oznacza, że każdy komponent potomny, który wykroczyłby poza granice tego komponentu, więc komponent z

65
00:06:25,320 --> 00:06:31,170
tym stylem jest zasadniczo przycięty, co zapewni efekt marszczenia, który jest teraz

66
00:06:31,170 --> 00:06:36,670
element potomny tego widoku zostanie przycięty na zaokrąglonych krawędziach tego przycisku.

67
00:06:37,210 --> 00:06:44,070
Więc teraz, jeśli to zapiszemy i spróbujemy ponownie, zobaczysz, że efekt marszczenia wypełnia tylko przycisk, co oczywiście

68
00:06:44,070 --> 00:06:50,200
wygląda znacznie lepiej, a na iOS oczywiście nadal zachowujemy się tak samo jak poprzednio.

69
00:06:51,070 --> 00:06:55,750
Używanie platformy w teście if jest również czymś, co możemy zrobić, ale możemy

70
00:06:55,780 --> 00:07:01,180
również użyć tej zgrabnej sztuczki, aby renderować zupełnie różne komponenty w oparciu o platformę, na której

71
00:07:01,180 --> 00:07:01,780
działamy.