Teraz ta aplikacja React Native została zbudowana za pomocą expo, jak wiesz. Teraz, jak wspomniałem na początku
kursu, nadal jest to zwykła aplikacja React Native, dlatego jest dostępna jako
dodatkowe opakowanie, które zapewnia wiele wygodnych funkcji po wyjęciu z pudełka, co ułatwia budowanie
tej aplikacji i
jest jak powłoka, aplikacja, w której działa nasza aplikacja, dzięki czemu korzystanie z wielu natywnych
funkcji urządzenia jest łatwiejsze, a zwłaszcza łatwiejsze w konfiguracji.
Teraz, jak już wspomniałem na początku tego modułu, w osobnym module pokażę, jak można dodawać
funkcje urządzeń natywnych do aplikacji innych niż expo, ale
tak naprawdę, jeśli nie masz powodu, aby nie używać expo zdecydowanie zalecamy korzystanie z
niego, ponieważ expo, jeśli sprawdzisz ich dokumenty, ma wiele wbudowanych funkcji i wiele wbudowanych natywnych modułów, których możesz użyć, więc
funkcje natywnych
urządzeń możesz łatwo dodać i
zobaczysz pełną listę tutaj, przechodząc do dokumentacji, a tam do referencji API.
Tutaj widzisz wiele rzeczy, które możesz dodać do swojej aplikacji, a są to głównie
natywne funkcje urządzeń, które są dostarczane przez
expo po wyjęciu z pudełka, więc nadal musisz coś zainstalować, ale nie
musisz wykonywać instrukcji konfiguracja i jak zobaczysz w budowaniu aplikacji bez modułu expo, istnieje pewna konfiguracja,
którą możesz potrzebować, jeśli dodajesz natywne moduły, natywne pakiety funkcji urządzenia do aplikacji non-expo, więc
jest to naprawdę słodkie tutaj.
Teraz chcę użyć aparatu i rzeczywiście istnieje pakiet aparatu, który można dodać.
Możemy faktycznie użyć tego, aby uzyskać dostęp do
kamery urządzenia,
jest to idealne, jeśli potrzebujesz zbudować aplikację, która naprawdę musi wiele zrobić z aparatem,
jeśli budujesz jak Instagram, jak aplikacja, w której naprawdę chcesz kontrolować cały ekran
kamery i cały ruch kamery, tak naprawdę nie chcę tego tutaj robić.
Chcę używać zwykłej kamery urządzenia, nie
potrzebuję tam nic specjalnego,
zależy mi tylko na zrobieniu zdjęcia, które użytkownik może
zrobić, i za to dostajemy próbnik obrazu. Pozwala nam to również korzystać z kamery urządzenia,
ale nie pozwala nam to tak bardzo dostosowywać
kamery, ale właśnie tego tu potrzebuję.
Teraz, aby uzyskać do niego dostęp, wystarczy uruchomić tę komendę expo install, która, nawiasem mówiąc, jest
jak npm install, tylko upewnia się, że instaluje wersję pakietu, która gwarantuje pracę z
naszą konkretną wersją expo używamy w tej aplikacji. Więc po prostu skopiuję to polecenie, a następnie
w tym projekcie możemy uruchomić expo install selektor obrazu expo. Wciśnij Enter, a to teraz zainstaluje ten pakiet z
instalacją npm za kulisami, właśnie to robi tutaj, tylko w
wersji, która pasuje do naszego zestawu expo SDK, którego używamy w tym projekcie, i to teraz
go zainstaluje i to wszystko, nie
jest wymagana dodatkowa konfiguracja.
Nie musimy dotykać żadnego pliku konfiguracyjnego,
nie musimy robić nic więcej,
dzięki temu możemy korzystać z tej funkcji i to
oczywiście bardzo łatwe.
Dzięki temu możemy zacząć go używać i chcę zacząć używać go tutaj na nowym ekranie miejsca,
gdzie mamy prawo do wprowadzania
tekstu, tam też chcę teraz dodać przycisk, który użytkownik może nacisnąć, aby otworzyć kamerę.
Teraz oczywiście dla wszystkich tych natywnych funkcji urządzenia, a także wielu funkcji, których oczywiście nie możemy
omówić w tym kursie, zawsze nauczyłeś się, jak możesz ich używać tutaj w swoich oficjalnych
dokumentach expo, tam dowiedziałeś się, do których metod i właściwości masz dostęp tam znajdziesz kilka krótkich przykładów dla
wielu pakietów, więc zdecydowanie powinieneś to sprawdzić. W przypadku aparatu możesz oczywiście
śledzić, ponieważ użyjemy go tutaj, aby zrobić zdjęcie.
Stworzę nowy komponent, ImageSelector. js, możesz nazwać to, co chcesz,
w którym importuję React z React i gdzie importuję widok i przycisk, a także tekst z React Native, a
także arkusz stylów, ponieważ chcę stylizować mój próbnik obrazu.
Nazwijmy to właściwie próbnik obrazów, podoba mi się to, mój komponent wyboru obrazów.
Więc tutaj selektor obrazów jest wtedy normalnym składnikiem, w którym chcę skonfigurować
niektóre style za pomocą Arkusza stylów. Metoda tworzenia i gdzie w końcu eksportuję komponent wyboru obrazu.
Co się teraz stanie w komponencie wyboru obrazu? Na koniec zwrócę tutaj
widok, który powinien zawierać inny widok, w którym mogę wyświetlić podgląd obrazu.
Więc tam chcę mieć komponent tekstowy, w którym mówię, że nie wybrano jeszcze obrazu, co jest
moją rezerwową treścią, jeśli nie został
jeszcze wybrany, w przeciwnym razie
wyświetlę obraz, więc będziemy musieli również zaimportować komponent z React Native i poniżej tego
widoku dodam przycisk z tytułem zdjęcia, w którym chcę ustawić kolor na Kolory. podstawowe, więc w tym celu
upewnij się, że importujesz te kolory na stałe, a po naciśnięciu
chcę otworzyć kamerę i wyświetlić ją użytkownikowi. Dodam też tutaj stałą, wezmę procedurę obsługi obrazu i jest to funkcja,
która powinna otworzyć kamerę
i to jest funkcja, którą powiążę z tym przyciskiem.
Teraz fajna byłaby stylizacja. W tym widoku zewnętrznym dodam styl selektora obrazu,
w tym widoku wewnętrznym, który
wyświetla podgląd mojego obrazu, dodam styl podglądu obrazu. Następnie ten tekst może być również stylizowany, ale tak naprawdę nie
potrzebuję specjalnego stylu i oczywiście chcę również wydrukować tutaj obraz, a wkrótce dodam warunek if / else, aby wyświetlić
tylko tekst lub obraz, a
to powinien również uzyskać styl może po prostu obraz.
Więc teraz mamy trzy identyfikatory stylu, które musimy dodać do
arkusza stylów, otrzymujemy selektor obrazu dla
całego komponentu, uzyskamy podgląd obrazu, a następnie mamy sam obraz.
Sam obraz jest prosty, tam po prostu chcę ustawić szerokość 100% i wysokość 100%,
aby zajmował pełną szerokość i wysokość otaczającego pojemnika podglądu.
Kontener ten można oczywiście skonfigurować bez względu na to, jak chcesz go
skonfigurować, dam mu szerokość 100% i wysokość 200 pikseli, ale oczywiście możesz to zmienić
lub obliczyć dynamicznie za pomocą interfejsu API wymiarów. Dodaj margines na dole
10 i upewnij się, że mój tekst zastępczy zostanie wyśrodkowany,
dodając justify content center i wyrównaj
tutaj elementy, a ponadto dodam tutaj obramowanie z kolorem jasnoszarym i szerokością obramowania
jeden.
Teraz, ogólnie dla komponentu wyboru obrazu, po prostu ustawię to, aby wyrównać elementy do środka, aby
upewnić się, że wszystkie elementy są wyśrodkowane w poziomie,
ale teraz wszyscy jesteśmy tutaj, aby naprawdę otworzyć kamerę urządzenia, prawda?
Zanim więc zrobimy cokolwiek innego w związku z podglądem i tak dalej,
upewnijmy się, że tutaj w module obsługi zdjęć pobierzmy faktycznie kamerę i w tym celu zaimportujmy wszystko jako próbnik obrazu z próbnika obrazu z wystawy,
więc z tego właśnie zainstalowany pakiet. Teraz, gdy użyłem selektora obrazów tutaj i
również dla komponentu, będziemy mieli starcie nazwy, więc nazwiję ten próbnik imgów tutaj,
aby uniknąć tego starcia nazwy, które w innym przypadku spowodowałoby problemy,
zmień go również w eksporcie kierunek.
Więc teraz z importowanym tutaj selektorem obrazów, możemy go użyć
tutaj, selektora
obrazu i tam możemy wywołać asynchronizację uruchamiania kamery.
Możesz również otworzyć galerię,
jeśli chcesz, ale tutaj nazywam asynchronizację uruchamiania aparatu.
Teraz otworzy się kamera urządzenia, a część asynchroniczna tutaj sugeruje, że jest to operacja
asynchroniczna.
Rzeczywiście, to zwraca obietnicę, co ma sens, ponieważ otwiera kamerę i nie
wiemy, kiedy użytkownik skończy
robić zdjęcie, więc po prostu zarejestruje funkcję, którą powinien wykonać, gdy użytkownik skończy i
rozwiąże obietnica wykonania tej funkcji, gdy to się stanie, kiedy użytkownik
skończy lub oczywiście, gdy użytkownik anuluje. Możemy poradzić sobie z tym wszystkim i rezultatem itd.
Później, na razie zobaczmy, czy to działa, i do tego załóżmy element wyboru obrazu na nowym ekranie miejsca.
Możemy więc zaimportować próbnik obrazów i tutaj oczywiście możemy użyć tej nazwy,
ponieważ nie używamy tutaj pakietu próbnika obrazów, importujemy go z komponentów, z komponentu próbnika obrazu
i dodajemy ten próbnik obrazów tutaj poniżej naszego tekstu jako taki samozamykający się element.
Teraz, jeśli to uratujemy, rzućmy okiem. Tutaj, ten tekst i
tak dalej, który nie jest właściwie ustawiony, nie musimy się tym teraz
martwić, zamiast tego naciśnijmy zrób zdjęcie, a zobaczysz, że nic się nie dzieje, ale pojawia się ostrzeżenie -
brak kamery lub zezwolenie na przechylenie kamery. Na Androidzie, jeśli spróbuję, tam zapytam, czy chcę przyznać uprawnienia. Muszę tu nacisnąć przycisk Zezwól,
a kamera się otwiera. To dobrze, ogólnie działa, mogę z niego
korzystać, dlatego
mogę nacisnąć ten przycisk, a następnie potwierdzić zdjęcie, które zrobiłem,
ale na iOS nie działa i dlaczego tak jest? No cóż, na iOS mamy tutaj błąd uprawnień i dzieje
się
tak po prostu, ponieważ uprawnienia są ważne, ale działają inaczej na iOS i Androidzie.
Na
Androidzie również skonfigurujesz uprawnienia z wyprzedzeniem, a ponieważ korzystamy z tej aplikacji expo, w której expo zapewnia to
opakowanie, expo faktycznie wykonuje wszystkie te uprawnienia i prosi o nas. W przypadku systemu iOS system uprawnień działa
nieco inaczej.
Tak naprawdę nie konfigurujesz go tak, abyś miał plik konfiguracyjny, w którym z góry definiujesz wszystkie uprawnienia i
to
wszystko, zamiast tego musisz poprosić o pozwolenie w czasie wykonywania.
Przy okazji, w niektórych wersjach Androida, powinieneś teraz to zrobić.
Nadal istnieje expo, jak widzisz, robi to za Ciebie, więc w przypadku Androida działa to w ten sposób,
w systemie iOS tak nie jest, musisz poprosić użytkownika o pozwolenie na dostęp do kamery, a to po
prostu coś, co musimy zrobić tutaj i możemy to zrobić za
pomocą innego pakietu expo, czyli pakietu uprawnień.
Musisz również zainstalować to za pomocą tego polecenia tutaj w swoim projekcie, abyś mógł poprosić
użytkownika o uprawnienia.
Zróbmy to tutaj w projekcie,
uruchommy expo zainstaluj uprawnienia expo, które znowu to tylko opakowanie wokół instalacji npm, aby zainstalować uprawnienia dla tego
projektu lub zainstalować ten pakiet dla tego projektu, a następnie w selektorze obrazów, zanim spróbujemy uruchomić
aparat i otwarcie aparatu, będziemy musieli poprosić o uprawnienia. W tym celu dodam tutaj
nową stałą, uzyskam lub zweryfikuję uprawnienia, a jest to funkcja, która zawiera
funkcję, która będzie korzystała z tego nowo dodanego pakietu uprawnień.
Więc tutaj importuję wszystko jako uprawnienia z uprawnień expo, więc
ten sam rodzaj importu, jaki mamy
dla selektora obrazu, a następnie możemy użyć uprawnień i zapytać asynchronicznie.
Ponownie, jest to zadanie asynchroniczne, które zwraca obietnicę, ponieważ otworzy to monit i zanim
użytkownik wybierze odpowiedź, nic się nie
wydarzy, dlatego mamy obietnicę, która rozwiązuje się lub zostaje odrzucona, gdy użytkownik potwierdzi lub odrzuci.
Musimy więc sprecyzować, jakiego uprawnienia potrzebujemy, więc przekazujemy
coś, aby poprosić o asynchronię, i to jest stała, którą otrzymujemy z obiektu uprawnień, który tutaj importujemy.
Tak więc dzięki notacji kropkowej możemy uzyskać dostęp do różnego rodzaju uprawnień, a tutaj wszystkie te
wielkie litery to różne uprawnienia, o które
możesz poprosić i tutaj potrzebujemy pozwolenia na kamerę, ponieważ chcemy uzyskać dostęp do kamery.
Nawiasem mówiąc, jeśli chcesz uzyskać dostęp do galerii, byłoby to pozwoleniem na rolowanie kamery.
Teraz pójdę tutaj do kamery
i jak powiedziałem, to zwraca obietnicę, chcę użyć asynchronii
czekaj tutaj, dlatego mogę dodać asynchronię tutaj przed funkcją, a następnie czekać na to i
uzyskać wynik
i przechowywać go w stałej , alternatywą dla tego byłoby użycie wtedy i
złapanie tego i tam teraz możemy sprawdzić, czy wynik. status nie jest równy przyznany, co oznacza, że użytkownik
odmówił, użytkownik nie udzielił uprawnień,
w takim przypadku nie możemy kontynuować.
Więc tutaj właściwie rzucę alert, więc zaimportuj alert
z React Native i rzuć alert tam, gdzie mówię alert. alert, niewystarczające uprawnienia, musisz przyznać aplikacji aparatu uprawnienia do korzystania z tej aplikacji lub dowolnego wyjścia,
które chcesz pokazać, a następnie
dodam jeden przycisk tutaj, gdzie mówię OK. Teraz użytkownik będzie musiał zmienić uprawnienia w
ustawieniach systemu po ich odrzuceniu, więc nie możemy prosić o uprawnienia ponownie,
gdy zostaną one odrzucone.
Tak więc tutaj chcę zwrócić wartość false, ponieważ jest to funkcja weryfikacji uprawnień i chcę
zwrócić wartość false, jeśli użytkownik nie udzielił nam uprawnień, zwracam
wartość true, ponieważ teraz wiemy, że mamy
uprawnienia Nawiasem mówiąc, jeśli nazwiemy to funkcja wielokrotnie, a użytkownik już dawał
uprawnienia w przeszłości, użytkownik nie zostanie ponownie wyświetlony z tym monitem, tak samo,
jeśli użytkownik odmówi, w obu przypadkach wynik jest automatycznie zapisywany przez iOS, a ta funkcja po prostu zwracają wartość prawda
lub fałsz, w zależności od tego, czy użytkownik odmówił lub przyznał dostęp w przeszłości.
Więc weryfikacja uprawnień jest teraz po prostu funkcją, którą musimy wywołać
w procedurze wykonywania zdjęć przed próbą użycia aparatu.
Więc tutaj też chcę użyć asynchronicznego oczekiwania, ponieważ weryfikacja uprawnień jest oczywiście funkcją, która zwraca
obietnicę, więc
będę czekać na to i zapisać wynik, który zapiszę w stałej o nazwie ma uprawnienie, ponieważ jest to prawda
lub fałsz w zależności od tego, czy użytkownik udzielił uprawnień, czy nie.
Jeśli to nieprawda, więc jeśli to nieprawda, po prostu wrócę tutaj, nie będę kontynuować,
nie otworzę kamery, bo i tak nie będę mógł tego robić, więc po prostu nie możemy kontynuuj,
o
to chodzi.
W przeciwnym razie możemy kontynuować i teraz powinniśmy być w stanie uruchomić kamerę również na iOS.
Spróbujmy
więc, zapiszmy to,
a teraz po tym, co się zmieniło, właściwie odinstaluję tutaj expo, aby upewnić się, że w
odniesieniu do uprawnień, które tam nadałem, powraca do stanu początkowego.
Prawdopodobnie nie musisz tego robić, jeśli nigdy nie przyznałeś żadnych uprawnień w
aplikacji expo, ale jeśli wcześniej bawiłeś się uprawnieniami i pakietami natywnymi, powinieneś odinstalować, a następnie ponownie zainstalować
aplikację expo, ponownie uruchamiając aplikację na iOS, naciskając i w konsoli tam, aby upewnić
się, że wszystkie te uprawnienia zostały zresetowane.
Więc teraz, jeśli przejdziemy do nowego ekranu odtwarzania i klikniemy zrób zdjęcie, zostaniesz zapytany,
czy chcę przyznać dostęp do kamery i tutaj mogę kliknąć OK, a teraz nadal pojawia się ten błąd.
Teraz jedynym powodem jest to, że chociaż próbujemy uzyskać dostęp do kamery tutaj, tak naprawdę to
tylko coś, co wiem o tym pakiecie, wymaga uprawnień do pełnego przechylenia kamery.
Więc zmieńmy to, aby poprosić o uprawnienia do rolki
aparatu tutaj, a następnie wróć i kliknij zrób
zdjęcie, teraz pytam, czy chcę zezwolić na dostęp do zdjęć, a teraz, jeśli kliknę tak, dostanę aparat niedostępny
symulator, który jest teraz innym błędem i jest całkiem jasny, co do problemu, symulator
iOS po prostu nie ma kamery. Odtąd będę kontynuował na Androidzie,
ale oczywiście możesz to przetestować na prawdziwym iPhonie,
aby zobaczyć, że tam też działa. Jeśli zeskanujesz tam swój kod kreskowy expo za pomocą aplikacji expo
i uruchomisz aplikację tak, jak
widziałeś ją na początku kursu, możesz robić zdjęcia za pomocą prawdziwego telefonu, a także pokażę gotową aplikację na końcu
tego modułu na urządzeniach z iOS i Androidem, na prawdziwych urządzeniach.
W tej chwili skupię się na Androidzie i oczywiście byliśmy już w stanie to otworzyć.
Ponownie mnie tu pyta, ale teraz mogę to otworzyć i zrobić zdjęcie. To oczywiście miłe, ale robienie takiego zdjęcia nie jest wszystkim,
co chcę robić, chcę
też skonfigurować sposób, w jaki go biorę i chcę go używać.