1
00:00:02,310 --> 00:00:08,520
Stwórzmy więc te komponenty i chcemy zastosować styl do komponentów tekstowych.

2
00:00:09,120 --> 00:00:12,780
Komponent tekstowy rzeczywiście obsługuje właściwość stylu, co można zweryfikować

3
00:00:12,780 --> 00:00:19,680
w oficjalnych dokumentach, ale komponent tekstowy faktycznie obsługuje mniej funkcji stylizacji niż widok, dlatego też zawijam to w

4
00:00:19,710 --> 00:00:20,610
inny komponent

5
00:00:20,970 --> 00:00:26,030
widoku, a to tylko komponent widoku, który my importujemy z React Native, to

6
00:00:26,040 --> 00:00:31,560
jest również część, którą miałem na myśli, że masz tylko kilka podstawowych składników, ale

7
00:00:31,560 --> 00:00:36,960
zabiorą cię one bardzo daleko, ponieważ cały czas pracujesz z widokami, przyciskami i tekstami.

8
00:00:37,530 --> 00:00:44,730
Więc tutaj zawiń ten tekst komponentem widoku otwierającego i zamykającego tu i teraz tutaj, mamy więcej

9
00:00:44,730 --> 00:00:46,090
opcji stylizacji.

10
00:00:46,290 --> 00:00:50,730
Znowu nie będę tutaj wybierać stylów wbudowanych, ale dodam

11
00:00:50,730 --> 00:00:54,000
style do arkusza stylów, na

12
00:00:54,210 --> 00:01:03,810
przykład moglibyśmy nazwać ten element listy, ale nazwa należy do ciebie i powiedzmy, że chcemy mieć dopełnienie o wartości

13
00:01:03,810 --> 00:01:17,750
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

14
00:01:17,880 --> 00:01:25,720
do tego widoku, odwołując się do stylów. listOpisz tutaj, a jeśli to

15
00:01:25,770 --> 00:01:34,380
zapiszemy, teraz nasz element listy powinien wyglądać nieco lepiej, naucz się React Native,

16
00:01:34,610 --> 00:01:39,620
tak to wygląda. Teraz pewne odstępy byłyby prawdopodobnie również przyjemne,

17
00:01:39,620 --> 00:01:46,850
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ą,

18
00:01:46,850 --> 00:01:49,270
więc inne elementy wokół niego

19
00:01:49,280 --> 00:01:55,130
i tam, moglibyśmy dodać margines 10, aby dodać margines we wszystkich kierunkach, możemy również po prostu

20
00:01:55,460 --> 00:01:59,600
dodać margines na górze lub tylko na dole lub to coś, czego

21
00:01:59,720 --> 00:02:06,050
nie ma w CSS, możesz dodać margines w pionie 10, aby mieć margines na górze i dolny, ale

22
00:02:06,050 --> 00:02:08,560
nie lewy i prawy, a przy okazji

23
00:02:08,720 --> 00:02:15,770
jest to przykład tego, jak to jest oparte na CSS, ale to nie to samo, ponieważ margines pionowy nie byłby

24
00:02:15,860 --> 00:02:23,210
własnością, którą masz w CSS, masz go w React Native. Więc jeśli teraz to

25
00:02:23,210 --> 00:02:29,840
zapiszemy i dodamy tutaj naucz się React Native, teraz zobaczysz

26
00:02:30,030 --> 00:02:38,430
pewne odstępy między tymi elementami i oczywiście także na iOS, jeśli to zrobimy.

27
00:02:38,550 --> 00:02:46,440
To teraz dodaje nasze przedmioty i chociaż prawdopodobnie nadal nie zdobywamy nagrody za piękno, to przynajmniej dobry początek i zagłębimy

28
00:02:46,440 --> 00:02:51,050
się w stylizację, a wszystko, co możesz zrobić w dalszej części tego

29
00:02:51,060 --> 00:02:54,090
kursu, musimy zdobyć oczywiście krok po kroku.

30
00:02:54,090 --> 00:03:00,750
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

31
00:03:00,750 --> 00:03:01,460
element,

32
00:03:01,500 --> 00:03:05,730
który powtarzacie, a my nie tylko powtarzamy tekst, zamiast tego jesteśmy teraz powtarzając

33
00:03:05,730 --> 00:03:07,020
cały widok, więc klucz

34
00:03:07,320 --> 00:03:14,430
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,

35
00:03:14,430 --> 00:03:15,520
teraz z

36
00:03:15,600 --> 00:03:19,230
kluczem przeniesionym do widoku zamiast tekstu, to powinno zniknąć.