To było dużo wstępu do React Native i expo, ale uważam, że ważne jest, aby
zrozumieć, z czym pracujesz, zanim zaczniesz.
Teraz jednak czas zacząć, a po to, odwiedź expo. io. Tam możesz kliknąć
przycisk Rozpocznij, a znajdziesz kroki startowe tutaj.
Teraz tak naprawdę nie potrzebujesz tego pierwszego
kroku, możemy przejść od razu do kroku drugiego, czyli że potrzebujesz NodeJS. Teraz potrzebujesz NodeJS, który jest środowiskiem wykonawczym JavaScript, który pozwala na
przykład tworzyć aplikacje po stronie serwera za pomocą Javascript. Nie potrzebujesz tego, ponieważ mamy zamiar napisać
dowolny kod NodeJS w tym kursie, to nie
jest kurs
Node, nie martw
się, nie musisz znać NodeJS, ale jest to pakiet, który pozwala nam uruchomić Javascript na naszej maszynie i na przykład
klient expo za kulisami działa również w JavaScript, nie jest
to całkowicie związane z React Native, tylko
po to, aby to narzędzie działało poprawnie.
Również dla tego polecenia, aby zainstalować narzędzie, npm, jest to Menedżer pakietów
węzłów, który jest również udostępniony przez NodeJS.
Pierwszym krokiem jest odwiedzenie nodejs. org i tam pobierz
najnowszą wersję, w moim przypadku 12. 6 stamtąd, aby rozpocząć i bez względu na to, jaka
jest najnowsza wersja, gdy ją przeglądasz, po prostu
pobierz tę wersję, zainstaluj ją, daje to normalny instalator, do którego możesz przejść, klikając wszystkie te
kroki, nic nadzwyczajnego.
Jest dostępny dla systemów MacOS oraz Windows i Linux.
Więc po prostu pobierz go tutaj, przejdź przez instalator, a po zainstalowaniu możesz przejść do tego
trzeciego kroku tutaj.
Więc po zainstalowaniu NodeJS, skopiujmy to polecenie tutaj, a następnie otwórzmy normalny terminal lub w systemie
Windows, wiersz polecenia i wklejmy to polecenie tutaj.
Teraz na Macu i Linuksie może być konieczne dodanie sudo przed tym, w systemie
Windows nie będzie to wymagane, aby uzyskać odpowiednie uprawnienia.
Więc tutaj go
wprowadzę, wtedy możesz zostać poproszony o podanie hasła, po prostu wpisz je, jeśli
tak, a teraz zainstaluje CLI expo, które jest tym narzędziem, które pomaga nam tworzyć projekty React
Native i zarządzać nimi za pomocą expo globalnie na komputerze, dzięki czemu można go używać z dowolnego
miejsca na
komputerze, a więc z dowolnego miejsca w terminalu.
Poczekajmy więc na zakończenie tej instalacji,
możesz zignorować wszelkie ostrzeżenia, które mogą się pojawiać pomiędzy, a ja wrócę
po zakończeniu instalacji.
Nawiasem mówiąc, możesz tutaj również zignorować takie błędy pośrednie, dopóki ogólnie nie zawiedzie się z
błędem, ale zakończy się komunikatem takim jak
ten, w końcu się udało.
Dzięki temu mamy zainstalowany Expo CLI, następnym krokiem jest stworzenie naszego projektu, więc krok czwarty
tutaj.
Robimy to, uruchamiając expo init,
a następnie dowolną nazwę wybranego projektu, a przede wszystkim upewnij się, że używasz polecenia cd, aby przejść do
folderu tutaj na komputerze, na którym chcesz utworzyć ten projekt. Zrobiłem to tutaj, jestem w tym folderze i
teraz mogę uruchomić program expo i nadam nazwę aplikacji rn-first-app, ponieważ jest to w
końcu nasza pierwsza aplikacja React Native. Po prostu wciśnij Enter, ta nazwa oczywiście zależy od
ciebie, co masz
tutaj, a to utworzy nowy folder w miejscu, w którym uruchomiłeś to polecenie i skonfigurujesz tam
aplikację React Native za pomocą expo.
Teraz prawdopodobnie zapytano Cię, którego szablonu chcesz użyć, i
na razie możesz przejść do pustego szablonu.
Upewnij się, że nie wybierasz absolutnego minimum, ponieważ byłaby to konfiguracja bez środowiska expo ze
wszystkimi funkcjami
wygody, więc zdecydowanie wybierz puste.
Teraz prawdopodobnie zostaniesz poproszony o podanie nazwy swojej aplikacji, a ja po prostu wpiszę tutaj rn-first-app,
to w końcu nazwa wyświetlana w przełączniku zadań aplikacji na ekranie głównym i
wkrótce.
Możesz zostawić ślimaka takim, jakim jest i po prostu ponownie nacisnąć
Enter, teraz ja też używam przędzy na mojej maszynie, która jest alternatywą dla npm, możesz nie zostać zapytany, czy chcesz
użyć przędzy, która jest całkowicie w
porządku, zrobię to także tutaj wybierz opcję
nie, aby użyć npm, a zatem teraz to zrobimy, utwórz ten folder projektu, zainstaluj tam wszystkie
wymagane zależności, takie jak React i React Native, i daj nam projekt React Native, którego możemy użyć do zbudowania aplikacji
natywnej.
Poczekajmy więc na zakończenie.
Teraz, gdy zakończy się, zobaczysz tutaj kolejne instrukcje. Możesz przejść do nowo utworzonego folderu za
pomocą polecenia cd, a następnie tam, po prostu uruchom npm start. Start Npm uruchomi teraz narzędzie do
tworzenia expo, narzędzia do tworzenia expo i nowa karta powinny otworzyć się w przeglądarce.
Oto ta karta, która się otworzyła. Jeśli masz jakieś problemy, możesz zignorować to
na razie, tutaj jest narzędzie do tworzenia expo lub narzędzia do tworzenia expo, jak się nazywa.
Jest to okno, które pozwala uruchamiać aplikację na różnych podłączonych urządzeniach lub dodawać symulatory i pozwala ogólnie
zarządzać częściami aplikacji, widzisz tutaj dane wyjściowe z aplikacji, niektóre ostrzeżenia, które możesz
otrzymywać, a to jest
bardzo wygodne okno do zarządzania aplikacją i uruchamiania aplikacji. Teraz upewnij się również, że
tutaj, w terminalu, w którym uruchomiłeś npm start, pozostawisz ten proces uruchomiony.
Możesz zobaczyć, że się nie skończył, nie widzisz ponownie tego wiersza wprowadzania, w którym możesz wpisywać
polecenia, zamiast tego tutaj nie możesz pisać lub możesz nacisnąć niektóre skróty, które tu widzisz, ale nie możesz pisać
nowe polecenia.
Zawsze możesz wyjść z tego procesu, naciskając jednocześnie klawisze C i C, ale powinieneś pozostawić
ten proces działający tak długo, jak pracujesz nad projektem,
a jeśli zakończysz ten dzień, możesz go zakończyć i uruchomić ponownie następnego dnia,
ponieważ proces ten obejrzy również Twój kod i za każdym razem, gdy zmienisz coś w
kodzie i zapiszesz tę zmianę, automatycznie zapisze to i opublikuje na podłączonym urządzeniu.
Ale mówiąc o tym, podłączmy urządzenie i do tego najłatwiejszym sposobem na rozpoczęcie jest
użycie posiadanego iPhone'a lub telefonu z Androidem.
Więc w moim przypadku jest to iPhone, a tu jest mój prawdziwy telefon i jestem w App Store, teraz jest po niemiecku, ponieważ mam
niemiecki telefon, ale to jest normalny App Store. Teraz możesz przejść
do obszaru wyszukiwania i wyszukać expo. Teraz, gdy to zrobisz, powinieneś znaleźć tego klienta expo tutaj i
możesz po prostu pobrać go na swoje urządzenie, jest darmowy. Po prostu zainstaluj go na swoim urządzeniu i oczywiście poczekaj,
aż ta instalacja się
zakończy, a po zakończeniu możesz go otworzyć,
a teraz z zainstalowaną aplikacją expo, nie musisz się tutaj rejestrować, zamiast tego na Androidzie powinieneś być w stanie
aby zeskanować ten kod kreskowy bezpośrednio z aplikacji expo. W systemie iOS wystarczy otworzyć aplikację
aparatu, a następnie możesz przejść do narzędzi programistycznych tutaj, a zobaczysz ten kod kreskowy tutaj,
po prostu przytrzymaj aparat na tym systemie iOS lub skaner aplikacji expo tutaj na Androidzie i powinieneś otrzymać monit czy
chcesz otworzyć aplikację na targach. Po prostu naciśnij i otwórz, a
teraz powinno to otworzyć twoją aplikację tutaj w zainstalowanym kliencie
expo, ponownie bez rejestracji, po prostu trzymając kamerę iPhone'a nad tym kodem kreskowym lub na Androidzie, robiąc to
bezpośrednio z aplikacji expo, w której będziesz mieć ta opcja to zrobić.
Więc teraz zbuduje pakiet JavaScript, jak widać tutaj na dole lub innymi słowy,
to zabierze twoją aplikację i skompiluje ją w zasadzie i przygotuje, a następnie załaduje tutaj na serwery expo
do twojej aplikacji i możesz po prostu nacisnąć mam go tutaj na pierwszym ekranie, a potem jest to twoja początkowa
aplikacja React Native.
A teraz zobaczmy kod tego i zobaczmy, jak możemy coś zmienić w kodzie, aby zobaczyć
coś innego na tym ekranie.