Teraz oprócz utworzenia nowego projektu od zera za pomocą React Native CLI lub z expo
CLI, a następnie wybrania
samego procesu roboczego, możesz nawet przekształcić projekt zarządzany w projekt React Native goły i to całkiem fajne, ponieważ oznacza to,
że możesz uzyskać wszystko wygoda funkcji zarządzanego przepływu pracy podczas
programowania i gdy na przykład skończysz lub potrzebujesz określonego pakietu innej firmy, który integruje niektóre funkcje, których nie
masz w expo i których absolutnie potrzebujesz, w takim przypadku możesz nadal się
przełączasz i nie musisz odbudowywać aplikacji od zera, tworzyć zupełnie nowy projekt
i kopiować kod.
W jaki sposób? Dobrze w twoim projekcie, a jest to natywna
funkcja urządzenia, świetny projekt miejsc, który budujemy wcześniej w trakcie, w którym możemy dodawać miejsca, w których
oczywiście używamy lokalizacji, map, kamery, SQLite, gdzie używamy tych wszystkich rzeczy, tam w tym projekcie, możesz po prostu uruchomić wysuwanie expo,
co przekształci Twój projekt w projekt zarządzanego przepływu pracy, który nie jest zarządzany.
Ważne jednak, nie ma powrotu, oczywiście możesz
skopiować folder i wykonać kopię zapasową i zapisać to lub jeśli używasz git, możesz oczywiście
wrócić do wcześniejszego zatwierdzenia, ale jeśli nie zapisałeś projektu, gdy go wysuniesz, nie możesz
go ponownie przekształcić,
więc bądź tego świadomy.
Będziesz musiał stworzyć zupełnie nowy projekt zarządzany przez expo i skopiować cały kod,
jeśli chcesz wrócić.
Więc tutaj, jeśli uruchomisz wysuwanie expo, powinieneś zapytać, jakiego rodzaju projekt chcesz wysunąć, a tutaj
mam dwie opcje na końcu. Teraz opcje, które tutaj widzisz, mogą się z czasem
różnić, ale tutaj dwie opcje, które mam, są nagie i zestaw expo. Zestaw Expo jest przestarzały, to jest
w zasadzie to, co mieliśmy przed nagim obiegiem pracy, więc nie powinieneś naprawdę przełączać się na
to, zamiast tego możesz przejść tutaj na pustą, co
oznacza po prostu, że teraz zostanie to przekształcone w projekt React Native, tak jakby został
utworzony z React Native CLI bez opakowania expo, ale zostanie
wstępnie skonfigurowany, jak wspomniano tutaj na stronie reaguj-natywny-unimodules, który jest rodzajem tego pakietu, który
musi wystawiać wszystkie interfejsy API expo na aplikacja non-expo. Będzie więc wstępnie konfigurować wszystkie te rzeczy podczas
każdej akcji, abyś nie musiał tego
robić, więc otrzymasz aplikację React Native plus. Więc jeśli kliknę Enter, a teraz
ważne, nie możesz wrócić po zakończeniu, możesz wybrać nazwę ekranu głównego, a ja wybiorę
tutaj świetne miejsca, na przykład naciśnij Enter, teraz nazwij moje Android Studio i Xcode projekty rn-guide, ale
to zależy od ciebie, a teraz spełni swoje zadanie.
Przekształca projekt, dodaje folder
Androida, a ponieważ korzystam z systemu macOS, dodaje także folder iOS. Oczywiście w systemach Windows i Linux nie
zrobi tego, ponieważ ponieważ musisz teraz zbudować to lokalnie, nie
można tworzyć aplikacji
na iOS i wstępnie konfiguruje wszystko i instaluje kilka zależności, aby można było użyć istniejącego
kodu i wszystkie pakiety expo, które już zainstalowałeś w tej czystej instalacji, więc
nie tylko konfiguruje tutaj wszystkie niezmodulowane rzeczy,
ale także upewnia się, że wszystkie pakiety, których już używasz, takie jak lokalizacja expo lub expo SQLite,
że te pakiety również praca. Teraz może to chwilę potrwać,
więc poczekajmy, aż to się skończy, a tutaj jest zrobione i widać, że faktycznie powiedział mi, że ogólnie wykonał
swoją pracę, ale były dwa pakiety, które wymagają ręcznej konfiguracji.
Możesz po prostu kliknąć te linki, aby uzyskać instrukcje na temat tego, co
musisz tam zrobić, jest to selektor obrazu expo i pakiet map React Native, w którym musisz wykonać ręczną instalację,
aby go zakończyć.
Więc tutaj, na
stronie wyboru obrazu expo, ostatecznie musimy uruchomić port install w folderze iOS, więc
musimy zrobić wszystko po zainstalowaniu pakietu. Więc w folderze projektu przejdę do iOS
i uruchomię instalację portu, port jest jak npm dla iOS, instaluje pewne zależności, które iOS musi
działać poprawnie, więc to się teraz dzieje, a kiedy to się stanie, my również musisz dodać ten
wpis tutaj do manifestu Androida, więc to też musimy zrobić.
Musimy więc przejść do folderu Android, folderu aplikacji tam i w folderze źródłowym, Android
Manifest, a następnie, jak opisano tutaj, dodać to wewnątrz znaczników aplikacji.
Więc tutaj jest aplikacja i tam powinniśmy dodać ten wpis aktywności tutaj, tak jak to, jest to wymagane.
Teraz, gdy już tu jestem, zobaczysz również, że ten plik manifestu został również
skonfigurowany
w określony sposób, zawiera wszystkie uprawnienia i oczywiście nie chcesz tego robić, chcesz tylko poprosić
o uprawnienia naprawdę potrzebujesz.
Tak więc, jak tu napisano, usuń wszelkie uprawnienia, których Twoja aplikacja nie potrzebuje, i na przykład moja
aplikacja demonstracyjna powinna potrzebować tylko uprawnienia dostępu do wyszukiwania lokalizacji, które
tam przeniesie, i oczywiście uprawnienia kamery, które tam przeniesie a także zezwolenie na zapis do pamięci zewnętrznej, które również
powinno być wymagane.
Powinny to być w rzeczywistości wszystkie uprawnienia i możesz sprawdzić wszystkie pakiety innych firm lub
wszystkie pakiety API expo, których używasz, aby upewnić się, że nie brakuje żadnych uprawnień.
Dzięki temu skomentuję tutaj wszystkie te uprawnienia, a także wszystkie te uprawnienia i przetestujemy je,
aby zobaczyć, czy to działa. Dzięki temu konfiguracja pakietu wyboru obrazu jest zakończona. Teraz React Native mapy również
muszą zostać skonfigurowane i tam możemy zagłębić się w instrukcje instalacji.
Teraz to polecenie instalacji npm, które już się wydarzyło, ale
teraz musimy uruchomić React Native link React Native mapy. Wróćmy więc o jeden poziom
z powrotem do głównego folderu projektu i uruchommy React Native link React Native
mapy, a teraz
wszystko połączy, upewnij się, że wszystko działa poprawnie, wszystko jest poprawnie
skonfigurowane i nadal będziesz musiał zrobić trochę instrukcji rzeczy, wszystkie te rzeczy tutaj nie powinny
być wymagane, wszystko powinno być zrobione z łączeniem na szczęście, ale na Androidzie, musisz upewnić się, że dodałeś ten wpis
tutaj, ten wpis metadanych do klucza aplikacji w AndroidManifest.
Więc tutaj w aplikacji możemy dodać ten wpis i tam musisz umieścić swój klucz API Map
Google.
Teraz mam to w folderze
env, jeśli pamiętasz, więc po prostu wezmę ten klucz i dodam go tutaj, zastąpię go kluczem API Map
Google tutaj, a także ważne, jeśli
wejdziesz na stronę interfejsu API Map Google, potrzebujesz aby włączyć ten zestaw SDK map dla Androida w swoim projekcie, to
ważne,
w przeciwnym razie to nie zadziała. W przypadku iOS nie musisz robić nic
specjalnego, chyba że chcesz tam użyć Map Google. W takim przypadku musisz postępować zgodnie z instrukcjami podanymi w instrukcjach
React Native Maps tutaj, aby korzystać z Map Google na iOS,
ale na Androida zdecydowanie musisz włączyć tutaj Google Maps SDK dla Androida API. Aby włączyć ten interfejs API, możesz przejść do Google
Cloud Platform tutaj dla projektu, nad którym pracowałeś wcześniej, kiedy konfigurowałeś ten klucz API i
tak dalej, a następnie tutaj, w API i usługach, możesz przejść do biblioteki, która zabierze Cię
do biblioteki wszystkich interfejsów API Google, a tam SDK map dla Androida,
musisz to włączyć.
Konieczne będzie także skonfigurowanie zestawu SDK do map na iOS, jeśli chcesz korzystać z Map Google na iOS, których jednak
tutaj nie będę używać.
Teraz powinno już być włączone tutaj, ale
upewnij się, że tak jest. Więc jeśli nie zostało włączone,
zdecydowanie to zrób.
Dzięki temu należy to również ustawić tak, aby
działało, a teraz, jeśli uruchomimy natywny Run-Android, aplikacja, którą zbudowaliśmy we wcześniejszym module z przepływem pracy zarządzanym przez expo, powinna
nadal działać, teraz bez przepływu pracy zarządzanego przez expo bez klient expo jest używany na symulatorze lub na
prawdziwym urządzeniu, ale zamiast tego buduje się lokalnie w Android Studio lub oczywiście również w systemie iOS,
jeśli chcesz go użyć, a zatem w taki sam sposób, jak w projekcie React Native CLI, ale
teraz po wysunięciu
z zarządzanego przepływu pracy, co oczywiście oznacza, że cały ten kod został napisany w
zarządzanym przepływie pracy, a jednak teraz uruchamiam go w niezarządzanym przepływie pracy, co jest całkiem miłe.
Poczekajmy więc na zakończenie i zobaczmy, czy ta aplikacja działa tak, jak powinna.
Pojawia się tutaj na emulatorze Androida, który jest emulatorem, którego chcę używać do testowania,
ponieważ tam mogę używać kamery emulatora do testowania i ponownie, aby to podkreślić, nie jest to teraz
aplikacja kliencka expo,
nie mogliśmy też Tu zeskanuj kod kreskowy, ponieważ nie ma kodu kreskowego
do skanowania, jest to teraz aplikacja zbudowana w Android Studio i przekazana do naszej aplikacji.
Oto nasza aplikacja, a teraz spróbujmy dodać tutaj nowe miejsce,
przetestuj, zrób zdjęcie, oczywiście pozwól na dostęp do kamery, a następnie zrób to zdjęcie,
przytnij go, może
wybierz lokalizację
na mapie, może oto
mapa się zbliża, ta lokalizacja wygląda dla mnie
dobrze, zapisz to, zapisz miejsce, oto
jesteśmy
i pozwól mi zamknąć tę aplikację.
Tam też widzisz, że to naprawdę jest samodzielna
aplikacja zainstalowana, jeśli otworzę szufladę aplikacji tutaj na urządzeniu, tutaj na symulatorze, jest to świetna
aplikacja do miejsc, którą widzisz tutaj.
Więc jeśli uruchomię to, to ponownie uruchomi aplikację, w której właśnie pracowaliśmy i jest nasze miejsce, ponieważ było
przechowywane w
lokalnej pamięci, obraz oczywiście był przechowywany w systemie plików, inaczej
nie widzielibyśmy go i działa jak poprzednio, ale teraz nie w kliencie expo, ale jako samodzielna aplikacja
bez
opakowania expo, wciąż korzystająca z niektórych interfejsów API expo i pakietów expo za pomocą tego pakietu
unimodules, który jest automatycznie dodawany i konfigurowany do samego przepływu pracy, który my
otrzymaliśmy za pomocą wysuwania.
Tam dzieje się wiele fajnych rzeczy.