Teraz, gdy ten kontener wejściowy jest zdefiniowany i kilka nowych stylów jest w związku z
tym, możemy zrobić coś, o czym wspomniałem, że zawsze będzie dobrym
pomysłem, możemy podzielić naszą aplikację na wiele komponentów.
To spojrzenie tutaj, ten
wygląd pojemnika wejściowego, ten wygląd karty jest prawdopodobnie czymś, co chcemy wykorzystać również w innych częściach
aplikacji.
Możemy mieć różne przedmioty, które chcemy zaprezentować na
takiej karcie, rozważ budowanie sklepu internetowego, w którym każdy produkt
ma taką kartę na ekranie przeglądu. Teraz, aby uniknąć powtarzania tej definicji stylu, możemy
zlecić ją osobnemu komponentowi, komponentowi, który tak naprawdę nie ma dużo logiki, ale który
kontroluje styl jego
zawartości, dlatego jest to czysty komponent prezentacyjny. Technicznie nadal jest to zwykły komponent React, dlatego utworzę nowy plik
tutaj w folderze komponentów i nadam mu nazwę karty. Nazwa zależy od ciebie, ale jest to typowy
wygląd karty,
więc brzmi dla mnie jak pasujące imię.
Teraz, jak zawsze, zaimportuj React z React, a następnie zaimportuj widok z React Native tutaj, a następnie utwórz
komponent karty, funkcjonalny komponent taki jak ten, który ostatecznie eksportujesz jako domyślny i oczywiście, ponieważ tutaj chodzi o prezentację, my
Potrzebuję arkusza
stylów, aby utworzyć obiekt stylu, ponieważ będzie to podstawowa cecha tego komponentu,
powinien tam być, aby owinąć
się wokół dowolnej zawartości i po prostu zastosować ogólną stylizację.
Teraz przejdę do ekranu startowego gry i wezmę wszystkie style z kontenera wejściowego,
skopiuję je stamtąd i dodam do karty. Tutaj dodam nową właściwość karty i użyję
moich
stylów tutaj i wewnątrz elementu karty, będę miał
bardzo prosty znacznik, że tak powiem, bardzo prosty kod jsx.
To tylko widok, który tu wrócę, który powinien być owinięty wokół rekwizytów dzieci, rekwizyty
dzieci to specjalny rekwizyt w React, który jest w zasadzie treścią przekazywaną między
otwierającymi i zamykającymi tagami niestandardowego komponentu. Może więc owijać się wokół dowolnej zawartości, ponieważ
jedynym celem tego elementu karty jest zastosowanie stylu do otaczającego pojemnika, a my robimy to, dodając tutaj kartę stylów.
Teraz jest tylko jedna rzecz, są tutaj pewne style, które prawdopodobnie nie powinny być ustawiane od
wewnątrz karty,
nie każda karta może mieć tę szerokość lub maksymalną szerokość i nie każda karta powinna wyśrodkować swoją zawartość.
Dlatego wytnę te trzy elementy z tego miejsca i ustawię tylko cień i wypełnienie,
a ja chcę, aby było to trochę bardziej elastyczne.
Oprócz stylów kart byłoby miło, gdybyśmy mogli przypisać własne style z zewnątrz,
a może nawet zastąpić niektóre style kart. Możemy to zrobić, przekazując nowy obiekt do podpory stylu i
dystrybuując wszystkie właściwości, wszystkie pary klucz-wartość naszego stylu karty tutaj do tego nowego obiektu.
Jest to operator rozprzestrzeniania, nowoczesna funkcja Javascript, która wyciąga wszystkie pary klucz-wartość obiektu z tego obiektu
i dodaje go do nowego otaczającego obiektu.
Kopiujemy więc wszystkie style zdefiniowane tam w dół do tego
nowego obiektu i robię to, aby dodać tutaj kolejną parę klucz-wartość lub inny zestaw par klucz-wartość,
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ę
wszystkie
zdefiniowane tam pary klucz-wartość i scalam je w ten obiekt, a ponieważ robię to drugi raz,
zastąpi to wszelkie pary klucz-wartość ustawione na karcie stylów, abyśmy mogli przesłonić dowolne style ustawione
tam z zewnątrz, gdy używamy naszego komponentu
i kiedy dodamy dodatkowe style poza komponentem, to również scali to i weźmie pod
uwagę, a tym samym możemy przypisać własne style z zewnątrz elementu karty, gdy używamy elementu karty,
a użycie elementu karty jest czymś, co miałoby sens jako kolejny krok.
Przejdźmy więc do ekranu startowego gry i zaimportuj kartę z folderu składników, a tam
z folderu karty i zamień nasz widok pojemnika wejściowego tutaj na kartę, podobnie jak ta, z otwierającymi
i zamykającymi znacznikami.
Teraz znowu chcę ustawić własne style, chcę ustawić własną szerokość, maksymalną szerokość i
wyrównać elementy, więc zachowam pojemnik wejściowy w arkuszu
stylów na dole, ale teraz pozbędę się wszystkich pozostałych stylów, wszystkie style, które są teraz ustawione na
karcie,
tak aby zachować tylko szerokość i wyrównanie tutaj, a następnie dodać to tutaj do karty na rekwizycie stylu, który jest
zaakceptowany lub który ma wpływ, ponieważ w składniku karty jest to rekwizyt stylu, który Scalam z
innymi stylami, więc dla tej propozycji stylu wskażę kontener wejściowy stylów. Teraz, gdy to zapiszemy, pojawia się błąd,
obiekt nie
jest funkcją w pobliżu arkusza stylów React Native.
Tak w karcie. plik js, jak tu wskazuje, coś jest nie tak, nawet podaje mi numer
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
źle, zamiast
tego musimy zadzwonić do arkusza stylów . Utwórz, aby zdefiniować własne style, więc jest
to właściwa składnia.
Jest to więc błąd składniowy, a nie technicznie błąd składniowy, ale niepoprawnie używam obiektu arkusza stylów.
To jest błąd z mojej strony, komunikat błędu pomógł nam w tym i teraz
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
chcemy mieć dokładnie taki wygląd z cieniami i wkrótce.