1 00:00:02,220 --> 00:00:04,630 Teraz, gdy otrzymaliśmy nagłówek, możemy 2 00:00:04,650 --> 00:00:10,950 kontynuować i kontynuować część, w której użytkownicy mogą wprowadzić liczbę, którą komputer powinien 3 00:00:10,950 --> 00:00:15,920 odgadnąć później. I do tego tutaj w aplikacji. Plik js, pod 4 00:00:15,920 --> 00:00:22,790 nagłówkiem, oczywiście chcę mieć obszar wejściowy użytkownika. Teraz, tak jak poprzednio, zajmę się tym 5 00:00:22,790 --> 00:00:29,780 w osobnym komponencie, a nie tutaj w aplikacji. js, aby wszystkie komponenty były względnie ubogie i 6 00:00:29,780 --> 00:00:34,850 moglibyśmy utworzyć ten komponent tutaj w folderze komponentów, co nie byłoby złe, 7 00:00:34,850 --> 00:00:42,110 ale ponieważ teraz będę pracować nad komponentem, który zasadniczo odpowiada za wszystko, co widzimy na ekranie oprócz nagłówka, 8 00:00:42,140 --> 00:00:47,600 traktuję ten komponent jako rodzaj specjalnego, nadam mu nazwę ekranu i zapiszę go 9 00:00:47,600 --> 00:00:53,000 w folderze ekranów, ponieważ ukończona gra będzie miała zasadniczo trzy różne ekrany - 10 00:00:53,000 --> 00:00:58,040 jeden do konfigurowania i uruchamiania gry, drugi, gdy gra jest gdy gra 11 00:00:58,100 --> 00:01:04,520 się skończy i chcę mieć te specjalne komponenty, które technicznie są całkowicie normalnymi komponentami, ale które 12 00:01:04,730 --> 00:01:10,790 spełniają specjalny cel, chcę je przechowywać w osobnym folderze, a to tylko moja osobista decyzja 13 00:01:10,790 --> 00:01:16,790 projektowa tutaj, nie trzeba je przechowywać. Z technicznego punktu widzenia nie ma powodu, aby to robić lub nie robić 14 00:01:16,790 --> 00:01:18,750 tego, React Native po prostu nie obchodzi. 15 00:01:18,770 --> 00:01:24,200 Więc tutaj go zapiszę i nadam nazwę StartGameScreen. js, aby wyjaśnić w imieniu, 16 00:01:24,200 --> 00:01:30,740 że jest to specjalny komponent, ale jak powiedziałem, technicznie jest to normalny komponent, dlatego importujemy 17 00:01:30,770 --> 00:01:37,580 React z React i oczywiście importujemy również niektóre rzeczy z React Native, a my widać już, 18 00:01:37,880 --> 00:01:44,210 że z pewnością będziemy potrzebować widoku, ponieważ prawdopodobnie nie możesz zbudować żadnego komponentu, ale 19 00:01:44,210 --> 00:01:49,060 możesz, ale nie tak wiele komponentów, które możesz zbudować bez widoków. 20 00:01:49,160 --> 00:01:54,620 Więc zaimportujemy widok tutaj i na pewno będziemy potrzebować arkusza stylów do niektórych stylów i zobaczymy, czego jeszcze 21 00:01:54,620 --> 00:02:02,870 potrzebujemy, z pewnością potrzebujemy również tekstu, tak myślę, abyśmy mogli go już dodać. Teraz z tym utworzę tutaj nową 22 00:02:03,500 --> 00:02:10,130 stałą, uruchomię ekran gry, który jest funkcjonalnym składnikiem wyglądającym tak, w 23 00:02:10,130 --> 00:02:19,330 którym będziemy mieli obiekt stylów z arkuszem stylów. Utwórz, w ten sposób, a następnie wyeksportuję taki ekran startowy gry 24 00:02:19,450 --> 00:02:27,430 i możesz zapisać go jako szablon dla każdego nowego dodawanego komponentu, ponieważ 90% niestandardowych komponentów, które budujesz w React 25 00:02:27,430 --> 00:02:32,890 Native, wygląda tak: importujesz React, importujesz niektóre rzeczy z React Native, definiujesz swój 26 00:02:32,890 --> 00:02:39,280 komponent, nazwa jest oczywiście inna, masz obiekt stylów i eksportujesz go, to prawie zawsze to 27 00:02:39,310 --> 00:02:40,740 samo, więc 28 00:02:40,780 --> 00:02:46,740 możesz zapisać to jako szablon, jeśli chcesz. Nie chcę tutaj jednak, więc po 29 00:02:46,740 --> 00:02:52,800 prostu będę kontynuować pracę nad samym komponentem, a teraz pytanie brzmi: co renderujemy 30 00:02:52,800 --> 00:02:59,760 na ekranie początkowym gry? Jak to powinno wyglądać? Na koniec będę 31 00:02:59,760 --> 00:03:06,960 miał widok otaczający cały mój ekran, ponieważ myślę, że ten rodzaj ma 32 00:03:06,960 --> 00:03:14,040 sens, pozwala nam ustawić ogólną stylizację. Ponownie dodam tutaj właściwość screen do tego obiektu arkusza stylów, który mogę zrobić, 33 00:03:14,040 --> 00:03:18,420 nie będzie kolidował z tym w aplikacji. js, moglibyśmy również wybrać 34 00:03:18,420 --> 00:03:23,760 inne nazwy, te dwa nie są ze sobą powiązane, ponieważ są to ostatecznie 35 00:03:23,760 --> 00:03:29,790 niezależne obiekty Javascript zarządzane w niezależnych plikach. Abyśmy mogli powtarzać tutaj nazwy lub wybierać inne, wybiorę tutaj podobną 36 00:03:29,790 --> 00:03:36,390 nazwę, nazwij ten ekran i skonfiguruję tutaj ogólny styl dla tego widoku otoczenia. Ogólna stylizacja jest taka, że powiedziałem to, aby 37 00:03:36,390 --> 00:03:42,810 wygiąć jeden, aby zabrał całą przestrzeń, jaką może uzyskać, co oznacza, że ponieważ dodam go poniżej nagłówka, 38 00:03:42,810 --> 00:03:47,760 zajmie on całą przestrzeń pod nagłówkiem, zarówno pionowo, jak i poziomo, a poza 39 00:03:48,780 --> 00:03:55,350 tym , Chcę również dodać tutaj dopełnienie o wartości 10, aby zawartość nie znajdowała się bezpośrednio na 40 00:03:55,350 --> 00:04:01,470 krawędziach tego ekranu, ale było trochę odstępów po lewej, prawej, górze i na dole i 41 00:04:01,470 --> 00:04:03,860 dodam wyrównywanie elementów do środka. 42 00:04:03,930 --> 00:04:09,900 Pamiętaj, że każdy widok domyślnie używa flexboksa i domyślnie używa kolumny kierunku wygięcia, wyrównuje elementy, 43 00:04:09,930 --> 00:04:13,960 które ustawiają elementy wzdłuż osi poprzecznej, więc ponieważ domyślnym kierunkiem 44 00:04:13,980 --> 00:04:18,240 jest kolumna, oś poprzeczna jest od lewej do prawej, więc 45 00:04:18,240 --> 00:04:20,000 jest to oś 46 00:04:20,070 --> 00:04:25,380 pozioma, spowoduje to wyrównanie elementów na środku w poziomie, ale nie w pionie. 47 00:04:25,380 --> 00:04:31,200 Tam używamy domyślnego justifyContent flex start, ale ponieważ używam 48 00:04:31,200 --> 00:04:39,210 domyślnego, nie muszę go ustawiać. Więc zostawimy go takim, jaki jest tutaj, a teraz przypiszemy ten styl do tego widoku, a automatyczne 49 00:04:39,210 --> 00:04:41,600 formatowanie zamknęło mój tag tutaj, czego oczywiście nie chcę, więc pozwól 50 00:04:41,760 --> 00:04:42,830 mi to cofnąć, a 51 00:04:43,140 --> 00:04:47,070 teraz mamy ten widok dla naszego ekran gry. Teraz, aby zobaczyć, czy to 52 00:04:47,070 --> 00:04:49,220 działa, po prostu wyślę tutaj tekst, 53 00:04:49,320 --> 00:04:56,110 ekran gry, tylko jakiś zastępczy symbol zastępczy. Sformatuj to i teraz w aplikacji. js, użyjmy 54 00:04:56,530 --> 00:05:05,880 tego ekranu, importując ekran startowy gier z folderu ekranów i tam, uruchom 55 00:05:05,880 --> 00:05:09,820 ekran gry, a następnie po 56 00:05:09,890 --> 00:05:19,580 prostu dodaj go tutaj, w ten sposób. Jeśli to zapiszemy, zobaczymy ekran gry tutaj, a także na Androidzie, więc to 57 00:05:19,650 --> 00:05:20,250 działa. 58 00:05:20,250 --> 00:05:27,270 Używamy tego drugiego osobnego komponentu, którego teraz będziemy używać jako komponentu pełnoekranowego w zasadzie lub prawie 59 00:05:27,360 --> 00:05:28,420 pełnego ekranu, 60 00:05:28,430 --> 00:05:30,420 na końcu pod nagłówkiem.