1 00:00:02,410 --> 00:00:05,440 Jakie są zatem nasze alternatywy dla zarządzanego przepływu pracy? 2 00:00:05,440 --> 00:00:08,450 Jedną z możliwości jest użycie interfejsu React Native CLI, 3 00:00:08,470 --> 00:00:10,950 możesz dowiedzieć się o tym na oficjalnej 4 00:00:10,960 --> 00:00:15,430 stronie React Native, jeśli ją odwiedzisz, możesz po prostu google znaleźć w React 5 00:00:15,880 --> 00:00:22,120 Native, a jeśli klikniesz przycisk Rozpocznij, zostaniesz przywitany dwa różne sposoby rozpoczęcia i wstępnie wybrane sposoby korzystania z interfejsu 6 00:00:22,130 --> 00:00:23,080 Expo CLI, 7 00:00:23,080 --> 00:00:24,960 to podejście, które zastosowaliśmy, prawda? 8 00:00:24,970 --> 00:00:30,220 Więc nie ma w tym nic szczególnego, daje to aplikację React Native używającą expo, tego właśnie 9 00:00:30,220 --> 00:00:31,720 użyliśmy w tym kursie. 10 00:00:31,750 --> 00:00:35,410 Możesz także kliknąć szybki start React 11 00:00:35,410 --> 00:00:41,170 Native CLI, a teraz najpierw musisz skonfigurować system w określony sposób, 12 00:00:41,170 --> 00:00:47,530 a następnie możesz zainstalować osobny pakiet, React Native CLI, którego teraz potrzebujesz, aby 13 00:00:47,530 --> 00:00:55,060 utworzyć projekt i uruchomić go i tak dalej. Teraz ważne, tutaj znajdziesz szczegółowe instrukcje instalacji dla różnych systemów operacyjnych 14 00:00:55,300 --> 00:00:57,070 i aplikacji, które chcesz zbudować. 15 00:00:57,100 --> 00:01:02,680 Teraz pamiętaj, że w systemie Windows, jak tu napisano, nie można budować aplikacji na system iOS, tak samo w systemie 16 00:01:02,680 --> 00:01:07,870 Linux, można tam budować tylko aplikacje na system Android, a instrukcje instalacji znajdziesz, jeśli wybierzesz określone opcje. 17 00:01:08,590 --> 00:01:09,730 W systemie macOS 18 00:01:09,760 --> 00:01:14,170 możesz zbudować system iOS i Android, a także postępować zgodnie z instrukcjami instalacji. 19 00:01:14,170 --> 00:01:19,030 Teraz nie zrobię tego tutaj szczegółowo, ponieważ znajdziesz je wszystkie tutaj napisane, jeśli 20 00:01:19,030 --> 00:01:20,110 chcesz je 21 00:01:20,110 --> 00:01:25,960 śledzić, w końcu będziesz musiał zainstalować kilka pakietów, nie pakietów npm, ale pakietów ogólnosystemowych i dokładny 22 00:01:25,960 --> 00:01:30,490 proces instalacji różni się w zależności od platformy, na której pracujesz. 23 00:01:30,580 --> 00:01:36,670 Będziesz musiał zainstalować Android Studio lub Xcode, więc Xcode dla aplikacji na iOS, Android Studio dla aplikacji na 24 00:01:36,670 --> 00:01:39,130 Androida i musisz to teraz zainstalować, wcześniej 25 00:01:39,160 --> 00:01:40,610 było to opcjonalne, 26 00:01:40,630 --> 00:01:42,840 właśnie zrobiłem to, aby uzyskać symulator, teraz 27 00:01:42,850 --> 00:01:47,020 potrzebujesz go, ponieważ teraz te narzędzia zostaną użyte do zbudowania Twojej aplikacji. 28 00:01:47,080 --> 00:01:52,750 Wcześniej nie było to wymagane, ponieważ opakowanie expo w zasadzie w pewnym sensie odczytuje nasz kod i hostuje 29 00:01:52,750 --> 00:01:56,780 go, a także można zbudować samodzielną aplikację z expo w zarządzanym przepływie 30 00:01:56,810 --> 00:01:59,030 pracy, który odbędzie się w chmurze. 31 00:01:59,320 --> 00:02:04,780 Teraz wszystko dzieje się lokalnie, więc musisz zainstalować Android Studio itd. I zainstalować 32 00:02:04,780 --> 00:02:07,540 go ze wszystkimi dostępnymi tutaj opcjami. 33 00:02:07,550 --> 00:02:14,130 Teraz, bez względu na to, na jakiej platformie pracujesz, musisz także zainstalować React Native CLI, możesz to 34 00:02:14,140 --> 00:02:22,420 zrobić w normalnym wierszu polecenia lub terminalu, na Macu lub Linuksie może być konieczne dodanie sudo przed tym do uzyskaj odpowiednie 35 00:02:22,420 --> 00:02:27,670 uprawnienia, a to teraz globalnie zainstaluje React Native CLI, ponieważ musisz także zainstalować NodeJS, 36 00:02:27,670 --> 00:02:32,860 ponieważ używa on npm, który jest menedżerem pakietów węzła, więc upewnij się, że 37 00:02:32,860 --> 00:02:34,450 go również masz. 38 00:02:35,540 --> 00:02:38,330 Teraz z zainstalowanym React Native 39 00:02:38,330 --> 00:02:44,990 CLI, możemy rozpocząć tworzenie projektu całkowicie bez expo i do tego stworzę nowy 40 00:02:44,990 --> 00:02:49,110 projekt i wybrałem do tego folder, uruchamiając init-native 41 00:02:49,130 --> 00:02:53,120 init i teraz dowolną wybraną przez ciebie nazwę, 42 00:02:56,120 --> 00:02:59,950 dla przykład RNWithoutExpo. W przypadku nazwy ważne jest, aby 43 00:02:59,990 --> 00:03:03,380 była napisana w ten sposób, bez myślników i podkreślników, ale tylko jedno słowo. 44 00:03:03,890 --> 00:03:08,780 Więc RNWithoutExpo to nazwa, którą wybiorę, dzięki czemu utworzysz zupełnie nowy projekt React Native przy 45 00:03:08,810 --> 00:03:14,450 użyciu interfejsu React Native CLI w tym miejscu, w którym uruchomiłeś to polecenie, i da ci nowy 46 00:03:14,450 --> 00:03:16,870 folder zawierający nowy projekt React Native. 47 00:03:16,970 --> 00:03:18,260 Teraz znów ważne, 48 00:03:18,260 --> 00:03:24,800 musisz mieć zainstalowany i skonfigurowany Android Studio i Xcode, jak wspomniano w oficjalnych dokumentach, w 49 00:03:24,800 --> 00:03:25,690 przeciwnym 50 00:03:25,700 --> 00:03:28,520 razie to, co zamierzam pokazać, nie 51 00:03:28,520 --> 00:03:34,100 będzie działać, musisz to zainstalować, ponieważ teraz te narzędzia będą obsługiwane przez React 52 00:03:34,100 --> 00:03:40,820 Native CLI, aby zbudować i uruchomić aplikację. Rozwiń także niektóre emulatory lub symulatory, mogą być tymi samymi, 53 00:03:40,820 --> 00:03:46,060 które były używane wcześniej w trakcie, ale musisz je uruchomić, abyśmy mogli zobaczyć naszą działającą aplikację React Native. 54 00:03:46,560 --> 00:03:52,830 Poczekajmy teraz, aż ta konfiguracja zakończy się tutaj, a kiedy to się zakończy i proces ten może chwilę potrwać, możesz 55 00:03:52,860 --> 00:03:59,900 postępować zgodnie z instrukcjami tutaj, aby w końcu uruchomić aplikację. Więc pozwól mi przejść do tego nowo utworzonego 56 00:03:59,900 --> 00:04:00,560 folderu 57 00:04:01,640 --> 00:04:04,670 tutaj i uruchomić na przykład reagujące 58 00:04:04,750 --> 00:04:12,260 run-ios, aby uruchomić go na symulatorze iOS, który dostałem. Teraz to za kulisami używa Xcode do zbudowania 59 00:04:12,260 --> 00:04:13,070 tej 60 00:04:13,070 --> 00:04:19,180 aplikacji, nie używa już expo, możesz tutaj odinstalować klienta expo, możesz odinstalować CLI 61 00:04:19,220 --> 00:04:20,390 expo z twojego 62 00:04:20,390 --> 00:04:26,510 systemu, to wcale nie wykorzystuje expo, po prostu używa Xcode za sceny tworzenia 63 00:04:26,540 --> 00:04:33,020 aplikacji, więc to natywne narzędzie programistyczne Apple. Poczekajmy więc na zakończenie tej kompilacji, a kiedy ją zbudujesz 64 00:04:33,020 --> 00:04:34,260 po raz pierwszy, 65 00:04:34,280 --> 00:04:38,960 potrwa to trochę dłużej, kolejne odbudowy będą szybsze. Poczekajmy więc na zakończenie. 66 00:04:39,870 --> 00:04:43,980 Teraz w trakcie całego procesu kompilacji zostanie otwarta nowa karta lub nowe 67 00:04:43,980 --> 00:04:47,430 okno w twoim terminalu, utrzymuj ten proces, a także oczywiście 68 00:04:47,430 --> 00:04:48,080 kontynuuj 69 00:04:48,090 --> 00:04:53,610 proces kompilacji, nie wychodź z tego, więc utrzymuj oba te procesy tutaj i teraz to instaluje 70 00:04:53,610 --> 00:04:58,650 aplikację na symulatorze, w tym przypadku, jeśli masz podłączone prawdziwe urządzenie, zainstaluje się tam i 71 00:04:58,650 --> 00:05:00,490 uruchomi aplikację, a zatem tutaj 72 00:05:00,580 --> 00:05:03,060 stworzyłem tutaj nowy symulator, prawda? ważne, teraz 73 00:05:03,090 --> 00:05:07,830 uruchamia aplikację tutaj w tym symulatorze. Ponownie przy pierwszym uruchomieniu, to 74 00:05:07,830 --> 00:05:14,030 pobiera teraz w zasadzie wbudowaną aplikację na to urządzenie i masz tam również kilka fajnych funkcji programistycznych, 75 00:05:14,030 --> 00:05:18,270 można włączyć zdalne debugowanie, więc masz tutaj te wszystkie fajne funkcje, 76 00:05:18,300 --> 00:05:22,750 to nie jest wyjątek a pierwsze uruchomienie potrwa nieco dłużej, jak wspomniano. 77 00:05:22,770 --> 00:05:30,220 Poczekajmy więc na zakończenie pobierania, aby aplikacja się uruchomiła i nadchodzi. Dokładny ekran startowy, który tutaj widzisz, może się 78 00:05:30,250 --> 00:05:32,410 z czasem różnić, 79 00:05:32,500 --> 00:05:37,450 ponieważ jest to tylko kod startowy, który otrzymasz w projekcie, który 80 00:05:37,450 --> 00:05:43,990 przyjrzymy się za chwilę, ale jest to teraz aplikacja, aplikacja natywna bez expo w 81 00:05:44,080 --> 00:05:50,740 przeciwnym razie to samo, działające na iOS. Możemy również uruchomić go na Androidzie i w tym celu ten zakończony proces 82 00:05:50,740 --> 00:05:52,330 można wyczyścić, drugi powinien być nadal 83 00:05:52,330 --> 00:05:57,360 uruchomiony, to Twój serwer programistyczny, który rozmawia z urządzeniem i obserwuje zmiany plików i przesyła nowy kod do urządzenia 84 00:05:57,360 --> 00:05:58,270 , więc 85 00:05:58,270 --> 00:06:03,250 to, co wiesz z wystawy, to również tutaj działa. Więc kontynuuj działanie innego procesu, ale 86 00:06:03,250 --> 00:06:10,300 teraz możemy również uruchomić natywny Run-Android, aby również zbudować aplikację na Androida i wykorzystać ten sam serwer, aby 87 00:06:10,300 --> 00:06:16,260 następnie zbudować i przesłać aplikację na Androida do emulatora Androida, a następnie zobaczyć to również. 88 00:06:16,270 --> 00:06:17,950 Poczekajmy więc, aż to 89 00:06:17,950 --> 00:06:22,850 się skończy, znowu ta pierwsza kompilacja potrwa dłużej, kolejne przeładowania będą znacznie szybsze. 90 00:06:22,930 --> 00:06:28,150 Ten proces kompilacji wykorzystuje teraz Android Studio, które musisz również zainstalować i 91 00:06:28,330 --> 00:06:34,130 skonfigurować zgodnie z opisem w oficjalnych dokumentach, dlatego też teraz działa to oczywiście całkowicie 92 00:06:34,140 --> 00:06:37,190 bez expo, po prostu używa Android Studio. 93 00:06:37,370 --> 00:06:44,030 Teraz to także uruchamia aplikację na Androida tutaj na moim emulatorze Androida, ale tak jak poprzednio, to początkowe uruchomienie może 94 00:06:44,030 --> 00:06:45,470 potrwać chwilę, teraz łączy 95 00:06:45,470 --> 00:06:48,600 się z tym serwerem programistycznym, który dlatego tutaj również 96 00:06:48,710 --> 00:06:53,900 powinieneś kontynuować, nie tylko podczas kompilacji ten pakiet, ale przez cały czas, aby na zmiany 97 00:06:53,900 --> 00:06:59,180 w plikach można było przebudować na żywo, a gdy to nastąpi, zobaczmy, że gotowa aplikacja 98 00:06:59,180 --> 00:07:00,530 działa na Androidzie. 99 00:07:00,530 --> 00:07:03,500 Spójrzmy teraz na kod, który jest za to 100 00:07:03,500 --> 00:07:07,420 odpowiedzialny, czy teraz wygląda to zupełnie inaczej niż do tej pory? 101 00:07:07,550 --> 00:07:12,620 W tym celu załadowałem ponownie projekt Visual Code Code, więc ta sama konfiguracja jak poprzednio i 102 00:07:12,620 --> 00:07:18,140 to, co widzisz, wygląda nieco inaczej, ale przede wszystkim mamy kilka różnych plików konfiguracyjnych, dość uczciwie, ale to 103 00:07:18,140 --> 00:07:22,040 tak naprawdę się nie zmienia sposób, w jaki piszemy nasz kod. 104 00:07:22,130 --> 00:07:24,960 Bardzo ważne, mamy folder na Androida i iOS, 105 00:07:24,980 --> 00:07:26,320 nie mieliśmy tego 106 00:07:26,360 --> 00:07:31,270 wcześniej, te foldery i na Windowsie przy okazji, Linux nie masz iOS, masz tylko 107 00:07:31,460 --> 00:07:36,740 Androida, ale te foldery zawierają prawdziwą natywną aplikację projekty, które są budowane za pomocą Androida Studio 108 00:07:36,740 --> 00:07:40,570 i Xcode, a Twój kod jest w pewien sposób wbudowany w 109 00:07:40,570 --> 00:07:45,710 to, co można powiedzieć: React Native robi to wszystko za Ciebie, proces React Native CLI, 110 00:07:45,710 --> 00:07:51,230 ale jeśli przyjrzymy się konkretnemu kodowi w app. plik js, cóż, właśnie 111 00:07:51,230 --> 00:07:58,430 tego użyliśmy w tym kursie, prawda? Tam mamy kilka importów i kilka dodatkowych linków, które pokazują niektóre 112 00:07:58,430 --> 00:08:00,180 ostrzeżenia tutaj dotyczące stylu kodu. 113 00:08:00,230 --> 00:08:04,160 To nie są rzeczywiste błędy, po prostu powinienem użyć podwójnych cudzysłowów 114 00:08:04,170 --> 00:08:08,570 zamiast pojedynczych cudzysłowów, tak, niektóre zalecenia, nie dbam o to tutaj, ale jeśli 115 00:08:08,630 --> 00:08:13,560 spojrzysz na to, co tu importujesz, zareaguj, zapisz widok obszaru, arkusz stylów, widok przewijania , 116 00:08:13,700 --> 00:08:18,520 zobacz, tekst - to są wszystkie rzeczy, z którymi już pracowaliśmy, więc mamy normalne 117 00:08:18,710 --> 00:08:26,690 komponenty, z którymi już pracowaliśmy i oczywiście robimy, ponieważ to, co powiedziałem w tym kursie, React Native to React Native, expo jest cienkim opakowaniem 118 00:08:26,690 --> 00:08:27,780 wokół niego . 119 00:08:27,860 --> 00:08:34,580 Piszemy ten sam kod, używamy tych samych komponentów, są one kompilowane do natywnych widżetów, które nie zmieniają 120 00:08:34,580 --> 00:08:36,920 się, gdy używamy expo, jedyną różnicą 121 00:08:36,920 --> 00:08:41,360 jest to, że z expo nie musimy konfigurować tyle, kompilacji jest 122 00:08:41,390 --> 00:08:48,220 nieco szybszy, a dodawanie modułów natywnych jest super łatwe, testowanie na prawdziwych urządzeniach jest super łatwe, po 123 00:08:48,230 --> 00:08:49,580 prostu łatwiejsze, 124 00:08:49,580 --> 00:08:54,110 budujemy aplikację w ten sam sposób i to też można zobaczyć tutaj. 125 00:08:54,110 --> 00:08:56,920 Style są konfigurowane w ten sam sposób z arkuszem stylów. tworzyć, to wszystko tak 126 00:08:56,990 --> 00:09:00,530 jak zrobiliśmy to podczas tego kursu i jest to 127 00:09:01,570 --> 00:09:02,960 ważne dla Ciebie. 128 00:09:03,020 --> 00:09:05,870 Teraz jedną dodatkową rzeczą, którą tu znajdziesz, jest indeks. Plik js, nie 129 00:09:05,870 --> 00:09:11,780 mieliśmy tego w expo, tego rodzaju jest podstawowy plik konfiguracyjny, który uruchamia twoją aplikację, możesz powiedzieć, że 130 00:09:11,780 --> 00:09:16,150 zapewnia, że ten komponent aplikacji zostanie wyrenderowany na ekranie, to coś, co 131 00:09:16,160 --> 00:09:22,160 expo zrobiło dla ciebie w React Natywna aplikacja expo, ale poza tym, tak naprawdę jest tak samo 132 00:09:22,160 --> 00:09:24,460 i zbudowałbyś aplikację w ten sam sposób.