1
00:00:02,310 --> 00:00:08,400
Oczywiście od Ciebie zależy, jak chcesz stylizować ten potwierdzający tekst tutaj, a właściwie nie powinien

2
00:00:08,400 --> 00:00:15,630
to być tylko tekst, powinien to być widok z tekstem w nim, który wyświetla nasz numer, a następnie

3
00:00:15,630 --> 00:00:21,780
przycisk, aby rozpocząć grę i możesz zdecydowanie zatrzymać wideo w tym momencie i wymyśl własną stylizację,

4
00:00:21,780 --> 00:00:23,050
własny układ.

5
00:00:23,100 --> 00:00:27,510
Mam na myśli pewien układ, który z pewnością będzie się różnić od twojego, ale

6
00:00:27,510 --> 00:00:32,430
nie ma tutaj złej lub właściwej decyzji, więc zdecydowanie skorzystaj z tej okazji jako kolejnej

7
00:00:32,430 --> 00:00:36,990
okazji, aby wymyślić własny układ do tego i przycisk, który teraz nic nie robi

8
00:00:36,990 --> 00:00:42,520
ale to jest to, co pozwoli użytkownikowi uruchomić grę i po krótkiej przerwie, której możesz użyć do

9
00:00:42,520 --> 00:00:45,370
wstrzymania filmu, zaimplementuję moje rozwiązanie razem z tobą.

10
00:00:45,420 --> 00:00:49,020
Oto, jak myślę, że to ładnie by wyglądało.

11
00:00:49,050 --> 00:00:55,640
Chcę mieć widok, aby móc ustawić wokół niego ogólny kontener, a właściwie może nie widok, ale dlaczego

12
00:00:55,650 --> 00:00:57,720
nie użyjemy tutaj naszej karty, to

13
00:00:57,720 --> 00:00:59,680
brzmi jak dobry pomysł.

14
00:00:59,730 --> 00:01:04,980
Teraz, jeśli na to spojrzymy, nie ma marginesu i chcę mieć odstępy między tą

15
00:01:04,980 --> 00:01:07,950
kartą u góry a moją kartą podsumowania.

16
00:01:08,070 --> 00:01:15,540
Dlatego tutaj w tym arkuszu stylów nadam temu osobny styl. Na ekranie startowym nadam

17
00:01:15,540 --> 00:01:21,570
nazwę kontenerowi podsumowującemu, jak zawsze zależy od Ciebie i chcę mieć

18
00:01:21,570 --> 00:01:35,400
margines na górze powiedz 20, jakieś ładne odstępy tutaj i dodaj to za pomocą rekwizytu stylowego do karty tu i tam, chcę powiedzieć, że wybrałeś, a

19
00:01:35,400 --> 00:01:44,710
następnie w nowej linii wypisz liczbę w ładnie przedstawiony sposób, być może liczbę w rodzaju pole z

20
00:01:44,710 --> 00:01:51,160
oddzielną ramką z zaokrąglonymi narożnikami, aby było wyraźnie widoczne lub większe niż

21
00:01:51,310 --> 00:01:56,740
inny tekst, dlatego tutaj dodam widok z tekstem w

22
00:01:56,740 --> 00:02:04,070
środku, w tym tekście będę mieć wybraną liczbę, ale teraz to widok, a tekst

23
00:02:04,620 --> 00:02:11,030
powinien mieć specjalną stylizację, a ponieważ zamierzam go ponownie użyć, właściwie go

24
00:02:11,030 --> 00:02:12,690
złapię i

25
00:02:12,800 --> 00:02:24,080
poddam do nowego komponentu i nadam mu nazwę kontenera numerów. W tym komponencie zaimportuję React z React i zaimportuję widok i tekst z

26
00:02:25,300 --> 00:02:33,850
React Native, a następnie będę miał tutaj element kontenera liczb, wyeksportuję domyślny kontener numerów i oczywiście potrzebujemy tutaj arkusza stylów,

27
00:02:34,090 --> 00:02:41,880
więc skonfigurujmy arkusz stylów również z arkuszem stylów. utwórz tam, a potem w tym komponencie,

28
00:02:42,360 --> 00:02:49,320
zwrócę ten widok tutaj z wybranym numerem, który teraz jednak trzeba przekazać i oczekuję,

29
00:02:49,530 --> 00:02:55,140
że dostanie go między otwierającymi i zamykającymi tagami mojego własnego komponentu

30
00:02:55,320 --> 00:02:57,800
za pomocą podpiera dzieci.

31
00:02:57,870 --> 00:03:02,270
Teraz ten kontener jest oczywiście czymś, co

32
00:03:02,370 --> 00:03:11,590
możesz dowolnie konfigurować, dodam tylko styl kontenera, nazwę kontenera tutaj, gdzie myślę, że szerokość dwóch krawędzi

33
00:03:11,650 --> 00:03:20,650
może wyglądać dobrze, więc trochę szersza, szersza ramka. Kolor obramowania, w którym rzeczywiście chcę użyć mojego koloru podstawowego lub koloru

34
00:03:20,680 --> 00:03:23,670
akcentu, zobaczymy, który z nich wygląda lepiej.

35
00:03:23,770 --> 00:03:33,400
Zaimportujmy więc kolory ze stałych / kolorów i dla koloru obramowania, a następnie na razie użyj akcentu kolorów

36
00:03:33,400 --> 00:03:39,670
i zobaczmy, jak to wygląda. Trochę dopełnienia, aby liczba nie znajdowała

37
00:03:39,670 --> 00:03:42,070
się bezpośrednio na krawędziach tego

38
00:03:42,080 --> 00:03:49,630
otaczającego pola, nie znajduje się bezpośrednio obok granicy, promień granicy 10, aby mieć zaokrąglone granice,

39
00:03:49,630 --> 00:03:50,440
niektóre

40
00:03:50,440 --> 00:03:56,940
zaokrąglone rogi przepraszam, nawiasem mówiąc, jeśli chcesz kierować na poszczególne rogi, możesz to

41
00:03:57,120 --> 00:04:06,780
zrobić za pomocą obramowania lewego górnego promienia, prawego górnego promienia, górnego końca i górnego początku bierze również ustawienia użytkownika dotyczące

42
00:04:06,780 --> 00:04:13,980
tego, czy jest to język od lewej do prawej, czy od prawej do lewej,

43
00:04:13,980 --> 00:04:22,820
aby można było kierować na wszystkie pojedyncze rogi, a także ustaw promień dla wszystkich narożników o promieniu granicy,

44
00:04:23,340 --> 00:04:32,120
a także dodaj mały margines tutaj, margines pionowy wynoszący 10 może być tutaj, aby mieć trochę odstępu od

45
00:04:32,300 --> 00:04:40,340
góry i dołu wokół tego pojemnika, a także ważne, wyśrodkuj tam tekst z wyrównaniem środka elementu

46
00:04:40,340 --> 00:04:48,740
i justifyCentrum treści, wykorzystując zachowanie tego elastycznego pudełka. I z tym chcę również nadać samemu numerowi, więc tekst ma

47
00:04:48,740 --> 00:04:57,230
określony styl i ten styl polega na tym, że nadaję tekstowi również ten akcentujący kolor i chcę użyć czcionki o rozmiarze 22, aby naprawdę

48
00:04:57,230 --> 00:05:04,280
się wyróżniać, a później , użyjemy również niestandardowej czcionki. A potem ten widok tutaj otrzymuje

49
00:05:04,280 --> 00:05:13,830
styl kontenera, a tekst tutaj oczywiście otrzymuje styl liczbowy. Przy takiej konfiguracji możemy użyć kontenera liczb na ekranie

50
00:05:13,830 --> 00:05:19,740
startowym gry, więc po prostu dodajemy ten import, a to, co tutaj robimy,

51
00:05:19,740 --> 00:05:25,000
jest całkiem normalne, że masz wiele składników, z których tworzysz aplikację.

52
00:05:25,160 --> 00:05:31,560
Teraz możemy użyć kontenera liczb w elemencie ekranu startowego gry, dodać go tutaj pod tym tekstem, a

53
00:05:32,010 --> 00:05:38,160
w kontenerze liczb otrzymamy zawartość z podrzędnymi elementami potomnymi, wyprowadzamy ją z podrzędnymi elementami podrzędnymi, co

54
00:05:38,220 --> 00:05:41,190
oznacza, że musimy ją przekazać pomiędzy tagami

55
00:05:41,250 --> 00:05:44,370
otwierającymi i zamykającymi, więc tutaj przekazujemy wybrany numer.

56
00:05:44,580 --> 00:05:48,710
To tylko moja sugestia, jak możemy to stylizować, ale podoba

57
00:05:48,900 --> 00:05:54,630
mi się styl, a na razie dodam tutaj przycisk, który jest samozamykającym się tagiem, wbudowany

58
00:05:55,080 --> 00:06:02,890
przycisk z tytułem gry początkowej, wszystko czapki, aby naprawdę się wyróżniały i zapisały to, a teraz, jeśli wybierzemy tutaj liczbę, otrzymamy

59
00:06:02,940 --> 00:06:08,820
to i nie wygląda to zbyt brzydko. Są jednak dwie rzeczy, które

60
00:06:08,820 --> 00:06:15,060
chcę zmienić: ten tekst powinien być wyśrodkowany, a to pole z liczbą nie

61
00:06:15,330 --> 00:06:22,120
powinno być tak szerokie jak pole otaczające, ale być tak szerokie, jak to konieczne.

62
00:06:22,860 --> 00:06:30,260
Teraz, aby oba działały, pójdę do mojej karty, która zawiera całą zawartość tutaj, a dzięki temu

63
00:06:30,260 --> 00:06:33,900
mam na myśli styl na ekranie startowym gry,

64
00:06:34,040 --> 00:06:35,480
którego również

65
00:06:35,750 --> 00:06:45,400
używam na tej karcie, to jest mój zbiorczy zestaw i oto my może wyrównać elementy, które mają być wyśrodkowane, zamiast używać

66
00:06:45,400 --> 00:06:52,280
domyślnego, który byłby rozciągliwy, a teraz jest to automatycznie wyśrodkowane, a pole jest tylko tak

67
00:06:52,280 --> 00:06:54,610
szerokie, jak wymaga tego liczba.

68
00:06:54,700 --> 00:06:57,360
Teraz to nie wygląda na obskurne, ostatnią

69
00:06:57,370 --> 00:07:03,160
rzeczą, którą właśnie zauważyłem, jest to, że kiedy potwierdzamy dane wejściowe, chcę również użyć interfejsu

70
00:07:03,190 --> 00:07:09,940
API klawiatury, aby zwolnić klawiaturę, więc gdy tylko naciśniemy przycisk potwierdzenia tutaj, również zamykamy klawiaturę, a teraz

71
00:07:10,180 --> 00:07:12,220
mamy tutaj niezły wynik.

72
00:07:12,220 --> 00:07:16,180
Teraz mamy solidny wygląd podstawowy, powiedziałbym, że możemy wybrać

73
00:07:16,180 --> 00:07:22,210
liczbę, przeprowadzamy przybliżoną weryfikację, aby upewnić się, że mamy prawidłową liczbę, a następnym krokiem jest

74
00:07:22,210 --> 00:07:28,540
uruchomienie przycisku uruchamiania gry i zamieniamy to, co widzimy na ekranie, ponieważ nasza gra działa na

75
00:07:28,540 --> 00:07:34,540
ekranie, w którym komputer zgaduje, a następnie upewniamy się, że dajemy użytkownikowi możliwość stwierdzenia, czy

76
00:07:34,540 --> 00:07:37,850
liczby powinny być większe, czy niższe, a

77
00:07:37,990 --> 00:07:41,770
następnie punkt jest zakończony i pokazuje grę na ekranie.