Jakie są zatem nasze alternatywy dla zarządzanego przepływu pracy?
Jedną z możliwości jest użycie interfejsu React Native CLI,
możesz dowiedzieć się o tym na oficjalnej
stronie React Native, jeśli ją odwiedzisz, możesz po prostu google znaleźć w React
Native, a jeśli klikniesz przycisk Rozpocznij, zostaniesz przywitany dwa różne sposoby rozpoczęcia i wstępnie wybrane sposoby korzystania z interfejsu
Expo CLI,
to podejście, które zastosowaliśmy, prawda?
Więc nie ma w tym nic szczególnego, daje to aplikację React Native używającą expo, tego właśnie
użyliśmy w tym kursie.
Możesz także kliknąć szybki start React
Native CLI, a teraz najpierw musisz skonfigurować system w określony sposób,
a następnie możesz zainstalować osobny pakiet, React Native CLI, którego teraz potrzebujesz, aby
utworzyć projekt i uruchomić go i tak dalej. Teraz ważne, tutaj znajdziesz szczegółowe instrukcje instalacji dla różnych systemów operacyjnych
i aplikacji, które chcesz zbudować.
Teraz pamiętaj, że w systemie Windows, jak tu napisano, nie można budować aplikacji na system iOS, tak samo w systemie
Linux, można tam budować tylko aplikacje na system Android, a instrukcje instalacji znajdziesz, jeśli wybierzesz określone opcje.
W systemie macOS
możesz zbudować system iOS i Android, a także postępować zgodnie z instrukcjami instalacji.
Teraz nie zrobię tego tutaj szczegółowo, ponieważ znajdziesz je wszystkie tutaj napisane, jeśli
chcesz je
śledzić, w końcu będziesz musiał zainstalować kilka pakietów, nie pakietów npm, ale pakietów ogólnosystemowych i dokładny
proces instalacji różni się w zależności od platformy, na której pracujesz.
Będziesz musiał zainstalować Android Studio lub Xcode, więc Xcode dla aplikacji na iOS, Android Studio dla aplikacji na
Androida i musisz to teraz zainstalować, wcześniej
było to opcjonalne,
właśnie zrobiłem to, aby uzyskać symulator, teraz
potrzebujesz go, ponieważ teraz te narzędzia zostaną użyte do zbudowania Twojej aplikacji.
Wcześniej nie było to wymagane, ponieważ opakowanie expo w zasadzie w pewnym sensie odczytuje nasz kod i hostuje
go, a także można zbudować samodzielną aplikację z expo w zarządzanym przepływie
pracy, który odbędzie się w chmurze.
Teraz wszystko dzieje się lokalnie, więc musisz zainstalować Android Studio itd. I zainstalować
go ze wszystkimi dostępnymi tutaj opcjami.
Teraz, bez względu na to, na jakiej platformie pracujesz, musisz także zainstalować React Native CLI, możesz to
zrobić w normalnym wierszu polecenia lub terminalu, na Macu lub Linuksie może być konieczne dodanie sudo przed tym do uzyskaj odpowiednie
uprawnienia, a to teraz globalnie zainstaluje React Native CLI, ponieważ musisz także zainstalować NodeJS,
ponieważ używa on npm, który jest menedżerem pakietów węzła, więc upewnij się, że
go również masz.
Teraz z zainstalowanym React Native
CLI, możemy rozpocząć tworzenie projektu całkowicie bez expo i do tego stworzę nowy
projekt i wybrałem do tego folder, uruchamiając init-native
init i teraz dowolną wybraną przez ciebie nazwę,
dla przykład RNWithoutExpo. W przypadku nazwy ważne jest, aby
była napisana w ten sposób, bez myślników i podkreślników, ale tylko jedno słowo.
Więc RNWithoutExpo to nazwa, którą wybiorę, dzięki czemu utworzysz zupełnie nowy projekt React Native przy
użyciu interfejsu React Native CLI w tym miejscu, w którym uruchomiłeś to polecenie, i da ci nowy
folder zawierający nowy projekt React Native.
Teraz znów ważne,
musisz mieć zainstalowany i skonfigurowany Android Studio i Xcode, jak wspomniano w oficjalnych dokumentach, w
przeciwnym
razie to, co zamierzam pokazać, nie
będzie działać, musisz to zainstalować, ponieważ teraz te narzędzia będą obsługiwane przez React
Native CLI, aby zbudować i uruchomić aplikację. Rozwiń także niektóre emulatory lub symulatory, mogą być tymi samymi,
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.
Poczekajmy teraz, aż ta konfiguracja zakończy się tutaj, a kiedy to się zakończy i proces ten może chwilę potrwać, możesz
postępować zgodnie z instrukcjami tutaj, aby w końcu uruchomić aplikację. Więc pozwól mi przejść do tego nowo utworzonego
folderu
tutaj i uruchomić na przykład reagujące
run-ios, aby uruchomić go na symulatorze iOS, który dostałem. Teraz to za kulisami używa Xcode do zbudowania
tej
aplikacji, nie używa już expo, możesz tutaj odinstalować klienta expo, możesz odinstalować CLI
expo z twojego
systemu, to wcale nie wykorzystuje expo, po prostu używa Xcode za sceny tworzenia
aplikacji, więc to natywne narzędzie programistyczne Apple. Poczekajmy więc na zakończenie tej kompilacji, a kiedy ją zbudujesz
po raz pierwszy,
potrwa to trochę dłużej, kolejne odbudowy będą szybsze. Poczekajmy więc na zakończenie.
Teraz w trakcie całego procesu kompilacji zostanie otwarta nowa karta lub nowe
okno w twoim terminalu, utrzymuj ten proces, a także oczywiście
kontynuuj
proces kompilacji, nie wychodź z tego, więc utrzymuj oba te procesy tutaj i teraz to instaluje
aplikację na symulatorze, w tym przypadku, jeśli masz podłączone prawdziwe urządzenie, zainstaluje się tam i
uruchomi aplikację, a zatem tutaj
stworzyłem tutaj nowy symulator, prawda? ważne, teraz
uruchamia aplikację tutaj w tym symulatorze. Ponownie przy pierwszym uruchomieniu, to
pobiera teraz w zasadzie wbudowaną aplikację na to urządzenie i masz tam również kilka fajnych funkcji programistycznych,
można włączyć zdalne debugowanie, więc masz tutaj te wszystkie fajne funkcje,
to nie jest wyjątek a pierwsze uruchomienie potrwa nieco dłużej, jak wspomniano.
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ę
z czasem różnić,
ponieważ jest to tylko kod startowy, który otrzymasz w projekcie, który
przyjrzymy się za chwilę, ale jest to teraz aplikacja, aplikacja natywna bez expo w
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
można wyczyścić, drugi powinien być nadal
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
, więc
to, co wiesz z wystawy, to również tutaj działa. Więc kontynuuj działanie innego procesu, ale
teraz możemy również uruchomić natywny Run-Android, aby również zbudować aplikację na Androida i wykorzystać ten sam serwer, aby
następnie zbudować i przesłać aplikację na Androida do emulatora Androida, a następnie zobaczyć to również.
Poczekajmy więc, aż to
się skończy, znowu ta pierwsza kompilacja potrwa dłużej, kolejne przeładowania będą znacznie szybsze.
Ten proces kompilacji wykorzystuje teraz Android Studio, które musisz również zainstalować i
skonfigurować zgodnie z opisem w oficjalnych dokumentach, dlatego też teraz działa to oczywiście całkowicie
bez expo, po prostu używa Android Studio.
Teraz to także uruchamia aplikację na Androida tutaj na moim emulatorze Androida, ale tak jak poprzednio, to początkowe uruchomienie może
potrwać chwilę, teraz łączy
się z tym serwerem programistycznym, który dlatego tutaj również
powinieneś kontynuować, nie tylko podczas kompilacji ten pakiet, ale przez cały czas, aby na zmiany
w plikach można było przebudować na żywo, a gdy to nastąpi, zobaczmy, że gotowa aplikacja
działa na Androidzie.
Spójrzmy teraz na kod, który jest za to
odpowiedzialny, czy teraz wygląda to zupełnie inaczej niż do tej pory?
W tym celu załadowałem ponownie projekt Visual Code Code, więc ta sama konfiguracja jak poprzednio i
to, co widzisz, wygląda nieco inaczej, ale przede wszystkim mamy kilka różnych plików konfiguracyjnych, dość uczciwie, ale to
tak naprawdę się nie zmienia sposób, w jaki piszemy nasz kod.
Bardzo ważne, mamy folder na Androida i iOS,
nie mieliśmy tego
wcześniej, te foldery i na Windowsie przy okazji, Linux nie masz iOS, masz tylko
Androida, ale te foldery zawierają prawdziwą natywną aplikację projekty, które są budowane za pomocą Androida Studio
i Xcode, a Twój kod jest w pewien sposób wbudowany w
to, co można powiedzieć: React Native robi to wszystko za Ciebie, proces React Native CLI,
ale jeśli przyjrzymy się konkretnemu kodowi w app. plik js, cóż, właśnie
tego użyliśmy w tym kursie, prawda? Tam mamy kilka importów i kilka dodatkowych linków, które pokazują niektóre
ostrzeżenia tutaj dotyczące stylu kodu.
To nie są rzeczywiste błędy, po prostu powinienem użyć podwójnych cudzysłowów
zamiast pojedynczych cudzysłowów, tak, niektóre zalecenia, nie dbam o to tutaj, ale jeśli
spojrzysz na to, co tu importujesz, zareaguj, zapisz widok obszaru, arkusz stylów, widok przewijania ,
zobacz, tekst - to są wszystkie rzeczy, z którymi już pracowaliśmy, więc mamy normalne
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
wokół niego .
Piszemy ten sam kod, używamy tych samych komponentów, są one kompilowane do natywnych widżetów, które nie zmieniają
się, gdy używamy expo, jedyną różnicą
jest to, że z expo nie musimy konfigurować tyle, kompilacji jest
nieco szybszy, a dodawanie modułów natywnych jest super łatwe, testowanie na prawdziwych urządzeniach jest super łatwe, po
prostu łatwiejsze,
budujemy aplikację w ten sam sposób i to też można zobaczyć tutaj.
Style są konfigurowane w ten sam sposób z arkuszem stylów. tworzyć, to wszystko tak
jak zrobiliśmy to podczas tego kursu i jest to
ważne dla Ciebie.
Teraz jedną dodatkową rzeczą, którą tu znajdziesz, jest indeks. Plik js, nie
mieliśmy tego w expo, tego rodzaju jest podstawowy plik konfiguracyjny, który uruchamia twoją aplikację, możesz powiedzieć, że
zapewnia, że ten komponent aplikacji zostanie wyrenderowany na ekranie, to coś, co
expo zrobiło dla ciebie w React Natywna aplikacja expo, ale poza tym, tak naprawdę jest tak samo
i zbudowałbyś aplikację w ten sam sposób.