Aby uniknąć tego, że obraz zostanie ostatecznie usunięty, musimy
przechowywać go w bardziej stałej ścieżce w naszym systemie plików urządzenia lokalnego.
Oczywiście możemy również przesłać go na serwer, ale już rozmawialiśmy o serwisie i tak
dalej, tutaj chcę skupić się na wszystkich możliwościach natywnych urządzeń. Teraz, aby współpracować z naszym
rodzimym systemem
plików, expo nas obejmuje,
możemy tutaj użyć pakietu systemu plików. Instalujesz go tak, jak instalujesz inne natywne
pakiety, z
expo install expo-file-system, więc zróbmy to tutaj, expo install, ponownie tylko wrapper wokół npm install,
którego możesz alternatywnie użyć, po prostu upewnij się, że używam odpowiedniej wersji dla używanej wersji zestawu
SDK expo, a dzięki temu mamy ją zainstalowaną, teraz
możemy przenieść obraz po jego zrobieniu.
Teraz w aplikacji są różne miejsca, w których
moglibyśmy to zrobić, moglibyśmy to zrobić w selektorze obrazów zaraz po zrobieniu zdjęcia,
ale w tym momencie nie wiemy jeszcze, czy rzeczywiście prześlemy formularz, jeśli faktycznie zachowujemy ten obraz.
A co jeśli zrobimy tutaj zdjęcie, ale odrzucimy to i wrócimy?
W tym przypadku nie chcę, aby obraz został przeniesiony na stałe, zdecydowanie powinien zostać wyczyszczony i
to jest domyślne zachowanie, więc nie chcę go jeszcze przenosić w
tym momencie,
zamiast tego chcę go przenieść po przesłaniu formularza.
Dlatego moglibyśmy to zrobić tutaj na nowym ekranie miejsca, w module obsługi miejsca
zapisu, ale wtedy dodalibyśmy całą logikę systemu plików do tego komponentu, co jest możliwe, ale które dodaje dużo
logiki do tego komponentu, czego tak naprawdę nie chcę
mam tam, chcę utrzymać ten komponent stosunkowo szczupły.
Świetnym miejscem do tego jest jednak twórca akcji.
W przeszłości używaliśmy tego do wywoływania skutków ubocznych, takich jak wysyłanie żądań HTTP.
Teraz przenoszenie pliku jest w zasadzie tą samą kategorią, co robimy, zamiast wysyłać żądanie do
serwera, przenosimy plik, cóż,
nie jest inaczej.
Dlatego w tym pliku tutaj, w akcji miejsc. js, zaimportuję wszystko jako system plików z systemu plików
expo, więc z tego nowego pakietu, który zainstalowaliśmy i tutaj dodajmy miejsce, teraz użyję tej
alternatywnej składni wysyłania lub posiadania kreatora akcji, który wykorzystuje Redux Thunk, gdzie zwraca tutaj funkcję wewnętrzną,
która odbiera funkcję argumentu jako argument, aby w tej funkcji wewnętrznej można było wywołać
tę akcję, wywołując tutaj polecenie dispatch i przekazując nasz obiekt akcji, a tutaj dodam asynchronię, abyśmy mogli użyć asynchronicznego oczekiwania, ponieważ „
ponownie wykonam tutaj pracę asynchroniczną. Tutaj chcę teraz przenieść
plik, prawda?
W tym celu chcę użyć tego pakietu systemu plików. Teraz przeniesienie pliku obejmuje kilka
rzeczy.
Przede wszystkim musimy uzyskać nową ścieżkę do pliku i powinien
to oczywiście być bardziej trwały katalog. W tym celu możemy użyć systemu plików i tam masz kilka katalogów, do których masz dostęp.
Masz katalog pamięci podręcznej, który jest w rzeczywistości katalogiem, w którym plik
jest już przechowywany po wyjęciu z pudełka, katalog pakietu, który nie jest tak naprawdę dobrym katalogiem do przechowywania plików używanych przez
aplikację, ale masz również katalog dokumentów,
to jest katalog główny katalog dla wszystkich plików, których potrzebuje Twoja aplikacja, które gwarantują przetrwanie.
Teraz, gdy odinstalujesz aplikację, ten folder również zostanie usunięty, więc
pliki zostaną utracone, ale do tego czasu będą się utrzymywać podczas restartów aplikacji, przez długie przerwy, gdy ludzie nie
korzystali z Twojej
aplikacji, więc tutaj pliki przetrwają.
Tak więc katalog dokumentów systemu plików jest ścieżką, do której chcę przenieść mój plik, a teraz
jest jedna ważna rzecz, którą należy wiedzieć, twoja ścieżka musi również zawierać nazwę pliku, którego chcesz użyć w przyszłości.
Oczywiście, kiedy robisz zdjęcie, dostajesz także tymczasową nazwę pliku, ale kiedy przenosisz plik, nazwa ta nie jest faktycznie wyjęta z
pudełka, zamiast tego przyjmie tę ścieżkę tutaj jako nazwę, że tak powiem. Dlatego nie powinien to być tylko wskaźnik w
folderze, do którego chcesz przenieść plik, powinien
on także zawierać nazwę pliku.
Teraz jestem zadowolony z zachowywania automatycznie generowanej nazwy
obrazu, oczywiście możesz również wygenerować tutaj swoje własne unikalne nazwy obrazów, ale w tym celu uzyskam nazwę
pliku z obrazu, który tu
otrzymałem, pamiętaj ten obraz tutaj jest ścieżką, tymczasową ścieżką do obrazu.
Tak więc tutaj użyję obrazu, który jest ciągiem, i wywołam split na tym, aby podzielić go
na ukośniki, ponieważ ta ścieżka oczywiście obejmuje kilka ukośników na końcu i split przekształca ten ciąg w tablicę segmentów
ciągów, gdzie każdy segment jest segmentem przed i po takim cięciu w łańcuchu i tam
przez wywołanie
pop, dostaję ostatni segment.
Więc ten kod tutaj robi to, że patrzy na naszą ścieżkę obrazu, dzieli go na ukośniki, które tworzą naszą
pełną ścieżkę tam i popping ostatni element, cóż to
jest ostatni element? To jest
nasza nazwa pliku, prawda, więc jeśli masz ścieżkę jak somefolder / myimage. jpg, to co robimy ze splitem, to
tablica z jakimś folderem i myimage. jpg i dzwoniąc do tego pop, otrzymujemy
myimage. jpg,
więc to właśnie tu dostajemy.
To zwróci nam naszą nazwę pliku,
ten fragment kodu tutaj, a teraz możemy dołączyć to tutaj do naszej ścieżki, po prostu dodając go w ten sposób.
Tak więc teraz generuje ścieżkę, która zawiera folder, a następnie nazwę pliku.
W tym miejscu chcę przenieść ten plik i teraz możemy go przenieść, uzyskując dostęp do systemu plików. moveAsync.
Jest to metoda, która przenosi plik z a do b,
a także wykorzystuje obietnicę, ponieważ przeniesienie tego pliku może potrwać nieco dłużej i dlatego powie nam,
kiedy to zrobione.
Teraz ruch asynchroniczny pobiera obiekt z dwoma częściami informacji - i przypuszczam, że jest całkiem
prosty.
Tak więc from is image, ponieważ image jest ścieżką do katalogu tymczasowego, więc to jest od rzeczy, tam właśnie znajduje się
plik i oczywiście jest to nasza nowa ścieżka, taka jak ta. Teraz, jak powiedziałem, zwraca to obietnicę,
dzięki czemu możemy na to poczekać i to wszystko.
Teraz powinniśmy zawinąć to w blok try catch, ponieważ może się to nie udać, ponieważ
na przykład na urządzeniu nie ma wystarczającej ilości miejsca lub w jakiś sposób mamy błąd uprawnień lub coś innego jest nie tak.
Dlatego zdecydowanie powinniśmy spróbować złapać nasze działania w systemie plików, ponieważ operacje na systemie plików zawsze mogą się nie powieść,
a
tam możemy chcieć coś zrobić, tutaj rejestruję
błąd i ponownie go piszę, ale oczywiście możesz zrobić tam inne rzeczy, takie jak
cóż, możesz przechowywać to na swoim własnym serwerze analitycznym, cokolwiek musisz zrobić.
Teraz ostatecznie możesz chcieć poradzić sobie z tym również w komponencie, aby wyświetlić tam
alert, nie zrobię tego, ale zrobiłbyś to w taki sam sposób, jak robisz na
przykład błędy HTTP,
na które spojrzałem moduł HTTP.
Więc tutaj zakładamy, że to w większości będzie działać lub że to zawsze będzie działać
i przenosimy plik. Teraz, gdy
zostanie przeniesiony, wiemy, że będzie na nowej ścieżce,
więc oczywiście jest to nowa ścieżka, którą chcę teraz przechowywać tutaj w moich danych
o miejscu lub w sklepie Redux. To wszystko miłe, powinno
to przechowywać nasz obraz w trwałym katalogu,
ale nie robimy tego, że nie przechowujemy samych danych w stałym miejscu.
Oczywiście używamy tutaj Redux, co oznacza, że jest on przechowywany w pamięci, ale za każdym razem, gdy zamykamy
i restartujemy naszą aplikację, wszystkie nasze dane zostaną utracone, ponieważ nie są przechowywane na urządzeniu, na serwerze lub w bazie danych, tylko
w pamięci który jest aktywny tak długo, jak działa nasza aplikacja, a następnie jest czyszczony.
W kolejnym kroku chcę pokazać, jak korzystać z SQLite, która jest bazą danych na urządzeniu, dostępną zarówno na iOS, jak
i na Androidzie, do przechowywania nie tylko plików, ale także naszych danych, takich jak tytuł i
ścieżka obrazu oraz wkrótce.