1 00:00:02,290 --> 00:00:08,230 Teraz, gdy ten kontener wejściowy jest zdefiniowany i kilka nowych stylów jest w związku z 2 00:00:08,270 --> 00:00:12,580 tym, możemy zrobić coś, o czym wspomniałem, że zawsze będzie dobrym 3 00:00:12,640 --> 00:00:16,380 pomysłem, możemy podzielić naszą aplikację na wiele komponentów. 4 00:00:16,600 --> 00:00:17,800 To spojrzenie tutaj, ten 5 00:00:17,800 --> 00:00:24,100 wygląd pojemnika wejściowego, ten wygląd karty jest prawdopodobnie czymś, co chcemy wykorzystać również w innych częściach 6 00:00:24,100 --> 00:00:24,890 aplikacji. 7 00:00:25,060 --> 00:00:28,450 Możemy mieć różne przedmioty, które chcemy zaprezentować na 8 00:00:28,450 --> 00:00:32,680 takiej karcie, rozważ budowanie sklepu internetowego, w którym każdy produkt 9 00:00:32,680 --> 00:00:39,160 ma taką kartę na ekranie przeglądu. Teraz, aby uniknąć powtarzania tej definicji stylu, możemy 10 00:00:39,160 --> 00:00:45,130 zlecić ją osobnemu komponentowi, komponentowi, który tak naprawdę nie ma dużo logiki, ale który 11 00:00:45,160 --> 00:00:46,950 kontroluje styl jego 12 00:00:47,080 --> 00:00:53,050 zawartości, dlatego jest to czysty komponent prezentacyjny. Technicznie nadal jest to zwykły komponent React, dlatego utworzę nowy plik 13 00:00:53,050 --> 00:00:58,450 tutaj w folderze komponentów i nadam mu nazwę karty. Nazwa zależy od ciebie, ale jest to typowy 14 00:00:58,450 --> 00:00:59,400 wygląd karty, 15 00:00:59,410 --> 00:01:01,510 więc brzmi dla mnie jak pasujące imię. 16 00:01:02,220 --> 00:01:11,290 Teraz, jak zawsze, zaimportuj React z React, a następnie zaimportuj widok z React Native tutaj, a następnie utwórz 17 00:01:11,290 --> 00:01:20,830 komponent karty, funkcjonalny komponent taki jak ten, który ostatecznie eksportujesz jako domyślny i oczywiście, ponieważ tutaj chodzi o prezentację, my 18 00:01:21,310 --> 00:01:22,900 Potrzebuję arkusza 19 00:01:22,900 --> 00:01:28,630 stylów, aby utworzyć obiekt stylu, ponieważ będzie to podstawowa cecha tego komponentu, 20 00:01:28,630 --> 00:01:31,120 powinien tam być, aby owinąć 21 00:01:31,120 --> 00:01:36,200 się wokół dowolnej zawartości i po prostu zastosować ogólną stylizację. 22 00:01:37,270 --> 00:01:42,600 Teraz przejdę do ekranu startowego gry i wezmę wszystkie style z kontenera wejściowego, 23 00:01:42,700 --> 00:01:49,180 skopiuję je stamtąd i dodam do karty. Tutaj dodam nową właściwość karty i użyję 24 00:01:49,180 --> 00:01:49,790 moich 25 00:01:51,220 --> 00:01:54,880 stylów tutaj i wewnątrz elementu karty, będę miał 26 00:01:55,020 --> 00:01:59,670 bardzo prosty znacznik, że tak powiem, bardzo prosty kod jsx. 27 00:01:59,670 --> 00:02:05,900 To tylko widok, który tu wrócę, który powinien być owinięty wokół rekwizytów dzieci, rekwizyty 28 00:02:05,910 --> 00:02:11,880 dzieci to specjalny rekwizyt w React, który jest w zasadzie treścią przekazywaną między 29 00:02:11,880 --> 00:02:18,570 otwierającymi i zamykającymi tagami niestandardowego komponentu. Może więc owijać się wokół dowolnej zawartości, ponieważ 30 00:02:18,570 --> 00:02:25,400 jedynym celem tego elementu karty jest zastosowanie stylu do otaczającego pojemnika, a my robimy to, dodając tutaj kartę stylów. 31 00:02:25,510 --> 00:02:32,610 Teraz jest tylko jedna rzecz, są tutaj pewne style, które prawdopodobnie nie powinny być ustawiane od 32 00:02:32,610 --> 00:02:33,790 wewnątrz karty, 33 00:02:33,810 --> 00:02:41,580 nie każda karta może mieć tę szerokość lub maksymalną szerokość i nie każda karta powinna wyśrodkować swoją zawartość. 34 00:02:41,580 --> 00:02:47,220 Dlatego wytnę te trzy elementy z tego miejsca i ustawię tylko cień i wypełnienie, 35 00:02:47,220 --> 00:02:50,890 a ja chcę, aby było to trochę bardziej elastyczne. 36 00:02:50,970 --> 00:02:57,780 Oprócz stylów kart byłoby miło, gdybyśmy mogli przypisać własne style z zewnątrz, 37 00:02:57,780 --> 00:03:07,440 a może nawet zastąpić niektóre style kart. Możemy to zrobić, przekazując nowy obiekt do podpory stylu i 38 00:03:07,530 --> 00:03:13,730 dystrybuując wszystkie właściwości, wszystkie pary klucz-wartość naszego stylu karty tutaj do tego nowego obiektu. 39 00:03:13,800 --> 00:03:20,400 Jest to operator rozprzestrzeniania, nowoczesna funkcja Javascript, która wyciąga wszystkie pary klucz-wartość obiektu z tego obiektu 40 00:03:20,460 --> 00:03:23,910 i dodaje go do nowego otaczającego obiektu. 41 00:03:24,150 --> 00:03:28,170 Kopiujemy więc wszystkie style zdefiniowane tam w dół do tego 42 00:03:28,170 --> 00:03:34,170 nowego obiektu i robię to, aby dodać tutaj kolejną parę klucz-wartość lub inny zestaw par klucz-wartość, 43 00:03:34,170 --> 00:03:41,370 w której biorę wszystkie style zdefiniowane w stylach rekwizytów, więc w prop stylu, który przekazałem własnemu niestandardowemu komponentowi, biorę 44 00:03:41,370 --> 00:03:42,090 wszystkie 45 00:03:42,090 --> 00:03:48,060 zdefiniowane tam pary klucz-wartość i scalam je w ten obiekt, a ponieważ robię to drugi raz, 46 00:03:48,240 --> 00:03:53,760 zastąpi to wszelkie pary klucz-wartość ustawione na karcie stylów, abyśmy mogli przesłonić dowolne style ustawione 47 00:03:53,760 --> 00:03:56,700 tam z zewnątrz, gdy używamy naszego komponentu 48 00:03:56,700 --> 00:04:02,100 i kiedy dodamy dodatkowe style poza komponentem, to również scali to i weźmie pod 49 00:04:02,140 --> 00:04:08,160 uwagę, a tym samym możemy przypisać własne style z zewnątrz elementu karty, gdy używamy elementu karty, 50 00:04:08,160 --> 00:04:12,730 a użycie elementu karty jest czymś, co miałoby sens jako kolejny krok. 51 00:04:12,750 --> 00:04:20,040 Przejdźmy więc do ekranu startowego gry i zaimportuj kartę z folderu składników, a tam 52 00:04:20,040 --> 00:04:28,220 z folderu karty i zamień nasz widok pojemnika wejściowego tutaj na kartę, podobnie jak ta, z otwierającymi 53 00:04:28,220 --> 00:04:29,920 i zamykającymi znacznikami. 54 00:04:29,930 --> 00:04:35,420 Teraz znowu chcę ustawić własne style, chcę ustawić własną szerokość, maksymalną szerokość i 55 00:04:35,510 --> 00:04:39,040 wyrównać elementy, więc zachowam pojemnik wejściowy w arkuszu 56 00:04:39,320 --> 00:04:46,030 stylów na dole, ale teraz pozbędę się wszystkich pozostałych stylów, wszystkie style, które są teraz ustawione na 57 00:04:46,100 --> 00:04:46,650 karcie, 58 00:04:46,790 --> 00:04:54,920 tak aby zachować tylko szerokość i wyrównanie tutaj, a następnie dodać to tutaj do karty na rekwizycie stylu, który jest 59 00:04:54,980 --> 00:05:01,280 zaakceptowany lub który ma wpływ, ponieważ w składniku karty jest to rekwizyt stylu, który Scalam z 60 00:05:01,280 --> 00:05:10,250 innymi stylami, więc dla tej propozycji stylu wskażę kontener wejściowy stylów. Teraz, gdy to zapiszemy, pojawia się błąd, 61 00:05:10,250 --> 00:05:12,330 obiekt nie 62 00:05:12,350 --> 00:05:17,350 jest funkcją w pobliżu arkusza stylów React Native. 63 00:05:17,420 --> 00:05:24,250 Tak w karcie. plik js, jak tu wskazuje, coś jest nie tak, nawet podaje mi numer 64 00:05:24,260 --> 00:05:30,890 linii, to linia 10, to właśnie ten numer tutaj oznacza i tak, mój problem tutaj polega na tym, że używam takiego arkusza stylów, to 65 00:05:30,920 --> 00:05:31,640 źle, zamiast 66 00:05:31,640 --> 00:05:35,760 tego musimy zadzwonić do arkusza stylów . Utwórz, aby zdefiniować własne style, więc jest 67 00:05:35,780 --> 00:05:37,010 to właściwa składnia. 68 00:05:37,010 --> 00:05:42,240 Jest to więc błąd składniowy, a nie technicznie błąd składniowy, ale niepoprawnie używam obiektu arkusza stylów. 69 00:05:42,410 --> 00:05:46,430 To jest błąd z mojej strony, komunikat błędu pomógł nam w tym i teraz 70 00:05:46,430 --> 00:05:52,420 mamy taki sam wygląd jak poprzednio, ale mamy tę kartę wielokrotnego użytku, której możemy teraz używać w dowolnym miejscu, w którym 71 00:05:52,430 --> 00:05:55,280 chcemy mieć dokładnie taki wygląd z cieniami i wkrótce.