Teraz wyłączyłem linkowanie tutaj, aby nie mieć wszystkich ostrzeżeń i błędów dotyczących stylu kodu.
Oczywiście możesz dostosować swój kod do tego stylu,
co ostatecznie jest osobistą preferencją.
Teraz chcę pokazać, jak możesz oczywiście zmienić kod, ale także jak możemy
dodać natywną funkcjonalność w takiej waniliowej aplikacji React Native.
Dlatego przede wszystkim znacznie uproszczę tę aplikację startową,
po prostu pozbędę się tej zawartości tutaj i po prostu dodam podstawowy styl ustawiony tutaj za pomocą Flex
One, uzasadnię centrum treści i wyrównam centrum przedmiotów, aby wyśrodkować moją zawartość ekran.
Pozbądź się tego tutaj
i z wszystkich tych importów tutaj, chcę użyć arkusza stylów, chcę użyć widoku i
chcę użyć przycisku, ponieważ chcę dodać funkcję wyboru obrazu.
Więc tutaj zwracam mój
widok i przycisk, a na przycisku mówię zrób zdjęcie, a następnie w
onPress chcę otworzyć selektor zdjęć.
Jak możemy to dodać?
Ponieważ jest to projekt React Native bez expo w jakikolwiek sposób, nie możemy łatwo użyć tutaj interfejsów API expo.
Istnieje sposób na ich użycie i powrócę do tego w dalszej części tego modułu,
ale trzeba będzie skonfigurować kilka rzeczy. Dlatego możemy zamiast tego zrobić coś,
co dużo zrobisz, jeśli pracujesz z waniliową aplikacją React Native, szukamy
na przykład narzędzia wyboru obrazu React Native, aby znaleźć pakiet, który nam w tym
pomoże, na przykład ten, pakiet wyboru obrazu React Native,
a teraz możemy go zainstalować, ponieważ teraz możemy przynieść dowolny pakiet innej firmy, bez względu na to,
czy dodaje on natywne funkcje do Twojej aplikacji. Wcześniej z expo nie było to tak naprawdę możliwe,
można było przynieść tylko pakiety innych firm, które nie korzystały z natywnych funkcji urządzenia,
teraz nie ma żadnych ograniczeń.
Teraz możemy
to dodać i tutaj możemy to zainstalować, postępując zgodnie z instrukcjami instalacji tutaj,
więc wracając do naszego projektu i tam, uruchamiając npm install --save, a następnie tutaj jest React Native selektor
obrazów, taki jak ten. Nawiasem mówiąc, możesz utrzymać ten
proces tutaj i powinieneś, aby zmiany kodu po zapisaniu plików były pobierane i przesyłane na twoje urządzenia.
Poczekajmy więc na zakończenie tej instalacji.
Teraz to się
skończyło,
zajęło to sporo czasu i teraz musimy to
zainstalować, a dobrą rzeczą jest to, że ten pakiet
jest bardzo łatwy do zainstalowania, wystarczy uruchomić to polecenie tutaj
- React Native link, React Native selektor obrazów.
Więc uruchom to w
swoim projekcie, tak jak to i powinieneś być dobry.
Teraz powiem, że istnieją pakiety innych firm, które wymagają więcej wysiłku, tak naprawdę
to zależy od pakietu. Jeśli chodzi o expo,
to oczywiście było bardzo łatwe, właśnie uruchomiłeś instalację expo, to było bardzo szybkie, nie
trwało to długo i nie musiałeś robić nic więcej.
Tutaj musisz uruchomić jedną dodatkową komendę,
ale to oczywiście
nie jest tak źle, ale powiem jeszcze, że nie wszystkie pakiety
obsługują tę komendę, niektóre pakiety wymagają znacznie więcej ręcznej pracy z okablowaniem, pracy ręcznej, w której musisz
zanurzyć się w Foldery z Androidem i iOS, aby rozpocząć pracę z niektórymi plikami konfiguracyjnymi.
To właśnie zrobiło dla ciebie polecenie React Native link, na przykład na Androidzie, jeśli zanurzysz się
w folderze aplikacji i tam, źródle, a następnie w folderze źródłowym do stopnia kompilacji, zobaczysz, że tam,
ta linia została dodana.
Nie było tego od
samego początku, zostało to dodane przez polecenie React
Native link, a dla niektórych pakietów musisz dodać te
wpisy ręcznie, wiele pakietów obsługuje polecenie link, aw nowszych wersjach React Native, niektóre
nawet pakiety obsługują automatyczne łączenie, gdzie to połączenie zostanie wykonane automatycznie po zakończeniu instalacji, ale
nie wszystkie pakiety mają taką obsługę, więc należy o tym pamiętać.
Za kulisami zmieniono wiele konfiguracji. Dzięki temu możemy teraz użyć
tego pakietu, ponownie zgodnie z instrukcjami w ich dokumentach, abyśmy mogli dodać ten
import tutaj, tutaj, a następnie także dodać funkcję wyboru obrazu tutaj i połączyć to z naszym przyciskiem, a teraz tutaj selektor obrazów
działa nieco inaczej niż na expo.
Tutaj nazywamy próbnik obrazu pokazuj próbnik obrazu z opcjami, które możemy skonfigurować, opcje
są skonfigurowane zgodnie z opisem tutaj lub ogólnie w dokumentacji, a tutaj po prostu wezmę cały kod tutaj,
tak jak ten, skopiuj go do obrazu wyboru pozbyć się tego wywołania stanu ustawionego, nie jesteśmy
w komponencie klasowym, więc nie jest
to coś, co możemy
zrobić, zamiast tego w bloku else po prostu
konsolę zarejestruję identyfikator URI odpowiedzi, który
powinien być ścieżką obrazu które zostało zrobione, a następnie
mamy tutaj
kilka procedur obsługi różnych scenariuszy i dzięki temu zobaczmy, czy to działa.
Jeśli to
zapiszemy, normalnie powinno
się tutaj odbudować, ale z powodu zainstalowanego naszego nowego pakietu, zakończę ten proces i ponownie uruchomię teraz
natywny run-android tutaj w moim terminalu zintegrowanym z Visual Studio Code, a
zatem w tym folderze projektu i teraz spowoduje to ponowne uruchomienie tego serwera programistycznego i, co ważniejsze, uruchomi także aplikację na
emulatorze, aby, jak mam nadzieję, go tam zobaczyć i przetestować próbnik obrazów tutaj.
Poczekajmy więc na zakończenie, na zakończenie procesu budowania.
Teraz nadchodzi aplikacja i jeśli ją wcisnę, dostanę tę nakładkę, mogę kliknąć zdjęcie i nic
się nie dzieje.
Powodem tego jest brak uprawnień i to była praca ręczna, o której mówiłem. Musimy przejść do
folderu Androida, tam do źródła, głównego, AndroidManifest, który konfiguruje aplikację na Androida i
tam musisz dodać nowe pozwolenie. Możesz skopiować to uprawnienie internetowe, którego zawsze
będziesz potrzebować, aby aplikacja na Androida komunikowała się z serwerem programistycznym i tam możesz teraz dodać uprawnienie
do kamery, które musisz dodać, aby ta aplikacja mogła uzyskać dostęp do kamery urządzenia, w przeciwnym razie to nie jest wspierany.
Teraz możemy ponownie uruchomić ten proces, odbudować aplikację i upewnić się, że weźmiemy pod uwagę to nowe ustawienie
i dzięki temu powinniśmy być w stanie to otworzyć.
To znowu dodatkowa konfiguracja, której oczywiście nie musieliśmy robić w świecie expo.
Nawiasem mówiąc, na iOS musisz również zrobić coś podobnego podczas odbudowy. Tam, jeśli przejdziesz
do pliku RNWithoutExpo, znajdziesz informacje. plik plist, aw tym pliku musisz
również dodać wpis, aby poprosić o to uprawnienie.
Musisz dodać nowy klucz tutaj po istniejącej parze klucz-wartość, dokładna pozycja nie ma znaczenia, a znajdziesz
szczegółowe instrukcje na oficjalnych dokumentach tego pakietu, tam pod zainstalowanym dokumentem, jeśli
tam klikniesz, możesz znajdę instrukcje dotyczące tego, które uprawnienia należy ustawić dla Androida,
ja też
zapomniałem, musimy również ustawić to zezwolenie na pamięć zewnętrzną, więc wrócę
do AndroidManifest, dodaj to tutaj i teraz uruchom ponownie to na Androida i iOS
, tutaj musisz ustawić te klucze. Więc skopiujesz to wszystko,
a następnie wrócisz do informacji. plik listy pokazałem ci tutaj i teraz możesz dodać te pary klucz-wartość tutaj.
Dzięki
temu sprawdźmy aplikację na Androida i jeśli teraz kliknę
na zrób zdjęcie, teraz jestem proszony o pozwolenie tutaj, dzieje się
to automatycznie, pakiet robi to za nas, a
teraz kamera się otwiera. Więc to działa teraz,
ale jak zauważyłeś z odrobiną dodatkowej konfiguracji i postępując zgodnie z instrukcjami na oficjalnych dokumentach,
a każda paczka będzie miała swoje własne instrukcje. Niektóre pakiety nawet nie obsługują polecenia link,
tam
musisz zrobić jeszcze
więcej, inne pakiety wymagają mniej pracy. Masz większą elastyczność, ale także więcej obowiązków.
Jednak w ten sposób możesz przenieść pakiety innych firm, które korzystają z funkcji natywnych urządzeń do aplikacji React Native tylko
dla kodu komponentu, który piszesz, to jest ten sam kod, który napisaliśmy
przez cały kurs - te same komponenty, ta
sama logika, w ten sam sposób jak tworzysz swoją aplikację. Możesz utworzyć te same foldery, dodać nawigację
React, która nie zmienia się.