Stwórzmy więc te komponenty i chcemy zastosować styl do komponentów tekstowych.
Komponent tekstowy rzeczywiście obsługuje właściwość stylu, co można zweryfikować
w oficjalnych dokumentach, ale komponent tekstowy faktycznie obsługuje mniej funkcji stylizacji niż widok, dlatego też zawijam to w
inny komponent
widoku, a to tylko komponent widoku, który my importujemy z React Native, to
jest również część, którą miałem na myśli, że masz tylko kilka podstawowych składników, ale
zabiorą cię one bardzo daleko, ponieważ cały czas pracujesz z widokami, przyciskami i tekstami.
Więc tutaj zawiń ten tekst komponentem widoku otwierającego i zamykającego tu i teraz tutaj, mamy więcej
opcji stylizacji.
Znowu nie będę tutaj wybierać stylów wbudowanych, ale dodam
style do arkusza stylów, na
przykład moglibyśmy nazwać ten element listy, ale nazwa należy do ciebie i powiedzmy, że chcemy mieć dopełnienie o wartości
10, może dajmy jest to kolor tła tego szarego kodu szesnastkowego, nadaj mu czarny kolor obramowania, a także szerokość jednego, a teraz przypisz element listy jako styl
do tego widoku, odwołując się do stylów. listOpisz tutaj, a jeśli to
zapiszemy, teraz nasz element listy powinien wyglądać nieco lepiej, naucz się React Native,
tak to wygląda. Teraz pewne odstępy byłyby prawdopodobnie również przyjemne,
możemy to osiągnąć za pomocą marginesu, wypełnienie to odstęp między ramką a zawartością, margines to odstęp między ramką a otaczającą zawartością,
więc inne elementy wokół niego
i tam, moglibyśmy dodać margines 10, aby dodać margines we wszystkich kierunkach, możemy również po prostu
dodać margines na górze lub tylko na dole lub to coś, czego
nie ma w CSS, możesz dodać margines w pionie 10, aby mieć margines na górze i dolny, ale
nie lewy i prawy, a przy okazji
jest to przykład tego, jak to jest oparte na CSS, ale to nie to samo, ponieważ margines pionowy nie byłby
własnością, którą masz w CSS, masz go w React Native. Więc jeśli teraz to
zapiszemy i dodamy tutaj naucz się React Native, teraz zobaczysz
pewne odstępy między tymi elementami i oczywiście także na iOS, jeśli to zrobimy.
To teraz dodaje nasze przedmioty i chociaż prawdopodobnie nadal nie zdobywamy nagrody za piękno, to przynajmniej dobry początek i zagłębimy
się w stylizację, a wszystko, co możesz zrobić w dalszej części tego
kursu, musimy zdobyć oczywiście krok po kroku.
Nawiasem mówiąc, jedną z rzeczy, które musimy teraz dostosować, klucz zawsze musi znajdować się w elemencie głównym na liście, więc
element,
który powtarzacie, a my nie tylko powtarzamy tekst, zamiast tego jesteśmy teraz powtarzając
cały widok, więc klucz
należy dodać do widoku tutaj, a nie do tekstu w widoku. Właśnie dlatego dostałem to ostrzeżenie, ten błąd ponownie,
teraz z
kluczem przeniesionym do widoku zamiast tekstu, to powinno zniknąć.