1 00:00:02,230 --> 00:00:08,830 Teraz oprócz utworzenia nowego projektu od zera za pomocą React Native CLI lub z expo 2 00:00:08,860 --> 00:00:10,820 CLI, a następnie wybrania 3 00:00:11,020 --> 00:00:19,710 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, 4 00:00:19,900 --> 00:00:24,480 że możesz uzyskać wszystko wygoda funkcji zarządzanego przepływu pracy podczas 5 00:00:24,490 --> 00:00:32,170 programowania i gdy na przykład skończysz lub potrzebujesz określonego pakietu innej firmy, który integruje niektóre funkcje, których nie 6 00:00:32,230 --> 00:00:38,110 masz w expo i których absolutnie potrzebujesz, w takim przypadku możesz nadal się 7 00:00:38,110 --> 00:00:43,180 przełączasz i nie musisz odbudowywać aplikacji od zera, tworzyć zupełnie nowy projekt 8 00:00:43,180 --> 00:00:44,890 i kopiować kod. 9 00:00:45,010 --> 00:00:51,380 W jaki sposób? Dobrze w twoim projekcie, a jest to natywna 10 00:00:51,380 --> 00:00:57,520 funkcja urządzenia, świetny projekt miejsc, który budujemy wcześniej w trakcie, w którym możemy dodawać miejsca, w których 11 00:00:57,520 --> 00:01:05,230 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, 12 00:01:05,230 --> 00:01:10,390 co przekształci Twój projekt w projekt zarządzanego przepływu pracy, który nie jest zarządzany. 13 00:01:10,390 --> 00:01:13,110 Ważne jednak, nie ma powrotu, oczywiście możesz 14 00:01:13,110 --> 00:01:18,550 skopiować folder i wykonać kopię zapasową i zapisać to lub jeśli używasz git, możesz oczywiście 15 00:01:18,550 --> 00:01:23,860 wrócić do wcześniejszego zatwierdzenia, ale jeśli nie zapisałeś projektu, gdy go wysuniesz, nie możesz 16 00:01:23,860 --> 00:01:25,360 go ponownie przekształcić, 17 00:01:25,360 --> 00:01:26,900 więc bądź tego świadomy. 18 00:01:27,160 --> 00:01:32,680 Będziesz musiał stworzyć zupełnie nowy projekt zarządzany przez expo i skopiować cały kod, 19 00:01:32,680 --> 00:01:33,970 jeśli chcesz wrócić. 20 00:01:33,970 --> 00:01:40,720 Więc tutaj, jeśli uruchomisz wysuwanie expo, powinieneś zapytać, jakiego rodzaju projekt chcesz wysunąć, a tutaj 21 00:01:40,750 --> 00:01:46,180 mam dwie opcje na końcu. Teraz opcje, które tutaj widzisz, mogą się z czasem 22 00:01:46,210 --> 00:01:52,360 różnić, ale tutaj dwie opcje, które mam, są nagie i zestaw expo. Zestaw Expo jest przestarzały, to jest 23 00:01:52,360 --> 00:01:58,780 w zasadzie to, co mieliśmy przed nagim obiegiem pracy, więc nie powinieneś naprawdę przełączać się na 24 00:01:58,780 --> 00:02:02,520 to, zamiast tego możesz przejść tutaj na pustą, co 25 00:02:02,530 --> 00:02:08,710 oznacza po prostu, że teraz zostanie to przekształcone w projekt React Native, tak jakby został 26 00:02:08,710 --> 00:02:13,010 utworzony z React Native CLI bez opakowania expo, ale zostanie 27 00:02:13,030 --> 00:02:18,640 wstępnie skonfigurowany, jak wspomniano tutaj na stronie reaguj-natywny-unimodules, który jest rodzajem tego pakietu, który 28 00:02:18,670 --> 00:02:26,200 musi wystawiać wszystkie interfejsy API expo na aplikacja non-expo. Będzie więc wstępnie konfigurować wszystkie te rzeczy podczas 29 00:02:26,200 --> 00:02:29,140 każdej akcji, abyś nie musiał tego 30 00:02:29,350 --> 00:02:36,120 robić, więc otrzymasz aplikację React Native plus. Więc jeśli kliknę Enter, a teraz 31 00:02:36,120 --> 00:02:42,310 ważne, nie możesz wrócić po zakończeniu, możesz wybrać nazwę ekranu głównego, a ja wybiorę 32 00:02:42,910 --> 00:02:50,490 tutaj świetne miejsca, na przykład naciśnij Enter, teraz nazwij moje Android Studio i Xcode projekty rn-guide, ale 33 00:02:50,530 --> 00:02:54,670 to zależy od ciebie, a teraz spełni swoje zadanie. 34 00:02:54,880 --> 00:02:56,280 Przekształca projekt, dodaje folder 35 00:02:56,290 --> 00:03:02,380 Androida, a ponieważ korzystam z systemu macOS, dodaje także folder iOS. Oczywiście w systemach Windows i Linux nie 36 00:03:02,380 --> 00:03:06,970 zrobi tego, ponieważ ponieważ musisz teraz zbudować to lokalnie, nie 37 00:03:06,970 --> 00:03:08,660 można tworzyć aplikacji 38 00:03:09,640 --> 00:03:16,450 na iOS i wstępnie konfiguruje wszystko i instaluje kilka zależności, aby można było użyć istniejącego 39 00:03:16,450 --> 00:03:22,150 kodu i wszystkie pakiety expo, które już zainstalowałeś w tej czystej instalacji, więc 40 00:03:22,150 --> 00:03:25,130 nie tylko konfiguruje tutaj wszystkie niezmodulowane rzeczy, 41 00:03:25,240 --> 00:03:32,710 ale także upewnia się, że wszystkie pakiety, których już używasz, takie jak lokalizacja expo lub expo SQLite, 42 00:03:33,130 --> 00:03:37,980 że te pakiety również praca. Teraz może to chwilę potrwać, 43 00:03:38,010 --> 00:03:46,260 więc poczekajmy, aż to się skończy, a tutaj jest zrobione i widać, że faktycznie powiedział mi, że ogólnie wykonał 44 00:03:46,260 --> 00:03:50,430 swoją pracę, ale były dwa pakiety, które wymagają ręcznej konfiguracji. 45 00:03:50,430 --> 00:03:54,750 Możesz po prostu kliknąć te linki, aby uzyskać instrukcje na temat tego, co 46 00:03:54,780 --> 00:04:00,810 musisz tam zrobić, jest to selektor obrazu expo i pakiet map React Native, w którym musisz wykonać ręczną instalację, 47 00:04:00,810 --> 00:04:01,980 aby go zakończyć. 48 00:04:02,820 --> 00:04:05,010 Więc tutaj, na 49 00:04:05,010 --> 00:04:11,810 stronie wyboru obrazu expo, ostatecznie musimy uruchomić port install w folderze iOS, więc 50 00:04:11,820 --> 00:04:18,660 musimy zrobić wszystko po zainstalowaniu pakietu. Więc w folderze projektu przejdę do iOS 51 00:04:18,660 --> 00:04:24,930 i uruchomię instalację portu, port jest jak npm dla iOS, instaluje pewne zależności, które iOS musi 52 00:04:25,050 --> 00:04:32,040 działać poprawnie, więc to się teraz dzieje, a kiedy to się stanie, my również musisz dodać ten 53 00:04:32,040 --> 00:04:36,030 wpis tutaj do manifestu Androida, więc to też musimy zrobić. 54 00:04:36,270 --> 00:04:42,030 Musimy więc przejść do folderu Android, folderu aplikacji tam i w folderze źródłowym, Android 55 00:04:42,360 --> 00:04:47,070 Manifest, a następnie, jak opisano tutaj, dodać to wewnątrz znaczników aplikacji. 56 00:04:47,070 --> 00:04:57,060 Więc tutaj jest aplikacja i tam powinniśmy dodać ten wpis aktywności tutaj, tak jak to, jest to wymagane. 57 00:04:57,300 --> 00:05:02,280 Teraz, gdy już tu jestem, zobaczysz również, że ten plik manifestu został również 58 00:05:02,280 --> 00:05:02,950 skonfigurowany 59 00:05:03,090 --> 00:05:08,940 w określony sposób, zawiera wszystkie uprawnienia i oczywiście nie chcesz tego robić, chcesz tylko poprosić 60 00:05:08,940 --> 00:05:10,390 o uprawnienia naprawdę potrzebujesz. 61 00:05:10,410 --> 00:05:18,480 Tak więc, jak tu napisano, usuń wszelkie uprawnienia, których Twoja aplikacja nie potrzebuje, i na przykład moja 62 00:05:18,480 --> 00:05:24,300 aplikacja demonstracyjna powinna potrzebować tylko uprawnienia dostępu do wyszukiwania lokalizacji, które 63 00:05:27,440 --> 00:05:36,890 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ż 64 00:05:41,790 --> 00:05:43,520 powinno być wymagane. 65 00:05:43,530 --> 00:05:48,900 Powinny to być w rzeczywistości wszystkie uprawnienia i możesz sprawdzić wszystkie pakiety innych firm lub 66 00:05:48,900 --> 00:05:54,110 wszystkie pakiety API expo, których używasz, aby upewnić się, że nie brakuje żadnych uprawnień. 67 00:05:54,300 --> 00:06:00,840 Dzięki temu skomentuję tutaj wszystkie te uprawnienia, a także wszystkie te uprawnienia i przetestujemy je, 68 00:06:00,840 --> 00:06:09,170 aby zobaczyć, czy to działa. Dzięki temu konfiguracja pakietu wyboru obrazu jest zakończona. Teraz React Native mapy również 69 00:06:09,190 --> 00:06:14,880 muszą zostać skonfigurowane i tam możemy zagłębić się w instrukcje instalacji. 70 00:06:14,880 --> 00:06:18,260 Teraz to polecenie instalacji npm, które już się wydarzyło, ale 71 00:06:18,390 --> 00:06:24,960 teraz musimy uruchomić React Native link React Native mapy. Wróćmy więc o jeden poziom 72 00:06:25,020 --> 00:06:32,380 z powrotem do głównego folderu projektu i uruchommy React Native link React Native 73 00:06:32,380 --> 00:06:34,590 mapy, a teraz 74 00:06:34,600 --> 00:06:40,870 wszystko połączy, upewnij się, że wszystko działa poprawnie, wszystko jest poprawnie 75 00:06:40,870 --> 00:06:49,120 skonfigurowane i nadal będziesz musiał zrobić trochę instrukcji rzeczy, wszystkie te rzeczy tutaj nie powinny 76 00:06:49,270 --> 00:07:00,230 być wymagane, wszystko powinno być zrobione z łączeniem na szczęście, ale na Androidzie, musisz upewnić się, że dodałeś ten wpis 77 00:07:00,230 --> 00:07:05,520 tutaj, ten wpis metadanych do klucza aplikacji w AndroidManifest. 78 00:07:05,630 --> 00:07:11,990 Więc tutaj w aplikacji możemy dodać ten wpis i tam musisz umieścić swój klucz API Map 79 00:07:11,990 --> 00:07:12,740 Google. 80 00:07:12,840 --> 00:07:14,680 Teraz mam to w folderze 81 00:07:14,690 --> 00:07:21,230 env, jeśli pamiętasz, więc po prostu wezmę ten klucz i dodam go tutaj, zastąpię go kluczem API Map 82 00:07:21,230 --> 00:07:23,490 Google tutaj, a także ważne, jeśli 83 00:07:23,660 --> 00:07:31,040 wejdziesz na stronę interfejsu API Map Google, potrzebujesz aby włączyć ten zestaw SDK map dla Androida w swoim projekcie, to 84 00:07:31,040 --> 00:07:31,790 ważne, 85 00:07:31,790 --> 00:07:36,500 w przeciwnym razie to nie zadziała. W przypadku iOS nie musisz robić nic 86 00:07:36,500 --> 00:07:41,690 specjalnego, chyba że chcesz tam użyć Map Google. W takim przypadku musisz postępować zgodnie z instrukcjami podanymi w instrukcjach 87 00:07:41,870 --> 00:07:44,920 React Native Maps tutaj, aby korzystać z Map Google na iOS, 88 00:07:45,800 --> 00:07:52,930 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 89 00:07:52,940 --> 00:07:58,760 Cloud Platform tutaj dla projektu, nad którym pracowałeś wcześniej, kiedy konfigurowałeś ten klucz API i 90 00:07:59,000 --> 00:08:05,240 tak dalej, a następnie tutaj, w API i usługach, możesz przejść do biblioteki, która zabierze Cię 91 00:08:05,240 --> 00:08:09,710 do biblioteki wszystkich interfejsów API Google, a tam SDK map dla Androida, 92 00:08:09,710 --> 00:08:11,120 musisz to włączyć. 93 00:08:11,120 --> 00:08:15,980 Konieczne będzie także skonfigurowanie zestawu SDK do map na iOS, jeśli chcesz korzystać z Map Google na iOS, których jednak 94 00:08:15,980 --> 00:08:17,150 tutaj nie będę używać. 95 00:08:17,350 --> 00:08:18,760 Teraz powinno już być włączone tutaj, ale 96 00:08:18,770 --> 00:08:21,500 upewnij się, że tak jest. Więc jeśli nie zostało włączone, 97 00:08:21,590 --> 00:08:22,710 zdecydowanie to zrób. 98 00:08:24,370 --> 00:08:27,240 Dzięki temu należy to również ustawić tak, aby 99 00:08:27,250 --> 00:08:34,450 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 100 00:08:34,450 --> 00:08:41,260 nadal działać, teraz bez przepływu pracy zarządzanego przez expo bez klient expo jest używany na symulatorze lub na 101 00:08:41,260 --> 00:08:47,770 prawdziwym urządzeniu, ale zamiast tego buduje się lokalnie w Android Studio lub oczywiście również w systemie iOS, 102 00:08:47,770 --> 00:08:54,000 jeśli chcesz go użyć, a zatem w taki sam sposób, jak w projekcie React Native CLI, ale 103 00:08:54,010 --> 00:08:55,510 teraz po wysunięciu 104 00:08:55,510 --> 00:09:01,000 z zarządzanego przepływu pracy, co oczywiście oznacza, że cały ten kod został napisany w 105 00:09:01,000 --> 00:09:07,180 zarządzanym przepływie pracy, a jednak teraz uruchamiam go w niezarządzanym przepływie pracy, co jest całkiem miłe. 106 00:09:07,180 --> 00:09:10,830 Poczekajmy więc na zakończenie i zobaczmy, czy ta aplikacja działa tak, jak powinna. 107 00:09:11,590 --> 00:09:16,780 Pojawia się tutaj na emulatorze Androida, który jest emulatorem, którego chcę używać do testowania, 108 00:09:16,780 --> 00:09:23,020 ponieważ tam mogę używać kamery emulatora do testowania i ponownie, aby to podkreślić, nie jest to teraz 109 00:09:23,020 --> 00:09:24,400 aplikacja kliencka expo, 110 00:09:24,400 --> 00:09:28,930 nie mogliśmy też Tu zeskanuj kod kreskowy, ponieważ nie ma kodu kreskowego 111 00:09:28,940 --> 00:09:34,570 do skanowania, jest to teraz aplikacja zbudowana w Android Studio i przekazana do naszej aplikacji. 112 00:09:34,720 --> 00:09:38,710 Oto nasza aplikacja, a teraz spróbujmy dodać tutaj nowe miejsce, 113 00:09:38,710 --> 00:09:44,470 przetestuj, zrób zdjęcie, oczywiście pozwól na dostęp do kamery, a następnie zrób to zdjęcie, 114 00:09:49,370 --> 00:09:50,630 przytnij go, może 115 00:09:53,960 --> 00:09:55,190 wybierz lokalizację 116 00:09:56,060 --> 00:09:58,010 na mapie, może oto 117 00:10:00,760 --> 00:10:04,050 mapa się zbliża, ta lokalizacja wygląda dla mnie 118 00:10:04,070 --> 00:10:06,760 dobrze, zapisz to, zapisz miejsce, oto 119 00:10:06,760 --> 00:10:07,540 jesteśmy 120 00:10:07,540 --> 00:10:09,940 i pozwól mi zamknąć tę aplikację. 121 00:10:10,060 --> 00:10:13,210 Tam też widzisz, że to naprawdę jest samodzielna 122 00:10:13,210 --> 00:10:19,210 aplikacja zainstalowana, jeśli otworzę szufladę aplikacji tutaj na urządzeniu, tutaj na symulatorze, jest to świetna 123 00:10:19,380 --> 00:10:22,040 aplikacja do miejsc, którą widzisz tutaj. 124 00:10:22,040 --> 00:10:28,920 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 125 00:10:29,190 --> 00:10:30,330 przechowywane w 126 00:10:30,330 --> 00:10:34,540 lokalnej pamięci, obraz oczywiście był przechowywany w systemie plików, inaczej 127 00:10:34,710 --> 00:10:41,370 nie widzielibyśmy go i działa jak poprzednio, ale teraz nie w kliencie expo, ale jako samodzielna aplikacja 128 00:10:41,370 --> 00:10:41,970 bez 129 00:10:41,970 --> 00:10:48,300 opakowania expo, wciąż korzystająca z niektórych interfejsów API expo i pakietów expo za pomocą tego pakietu 130 00:10:48,300 --> 00:10:53,640 unimodules, który jest automatycznie dodawany i konfigurowany do samego przepływu pracy, który my 131 00:10:53,700 --> 00:10:55,080 otrzymaliśmy za pomocą wysuwania. 132 00:10:55,080 --> 00:10:57,000 Tam dzieje się wiele fajnych rzeczy.