1
00:00:02,090 --> 00:00:05,970
Aby uniknąć tego, że obraz zostanie ostatecznie usunięty, musimy

2
00:00:06,140 --> 00:00:11,180
przechowywać go w bardziej stałej ścieżce w naszym systemie plików urządzenia lokalnego.

3
00:00:11,180 --> 00:00:15,350
Oczywiście możemy również przesłać go na serwer, ale już rozmawialiśmy o serwisie i tak

4
00:00:15,410 --> 00:00:21,970
dalej, tutaj chcę skupić się na wszystkich możliwościach natywnych urządzeń. Teraz, aby współpracować z naszym

5
00:00:22,100 --> 00:00:23,660
rodzimym systemem

6
00:00:23,690 --> 00:00:26,180
plików, expo nas obejmuje,

7
00:00:26,270 --> 00:00:32,900
możemy tutaj użyć pakietu systemu plików. Instalujesz go tak, jak instalujesz inne natywne

8
00:00:32,900 --> 00:00:34,320
pakiety, z

9
00:00:34,320 --> 00:00:41,470
expo install expo-file-system, więc zróbmy to tutaj, expo install, ponownie tylko wrapper wokół npm install,

10
00:00:41,510 --> 00:00:48,950
którego możesz alternatywnie użyć, po prostu upewnij się, że używam odpowiedniej wersji dla używanej wersji zestawu

11
00:00:48,950 --> 00:00:52,980
SDK expo, a dzięki temu mamy ją zainstalowaną, teraz

12
00:00:53,010 --> 00:00:56,000
możemy przenieść obraz po jego zrobieniu.

13
00:00:56,010 --> 00:00:59,080
Teraz w aplikacji są różne miejsca, w których

14
00:00:59,160 --> 00:01:04,080
moglibyśmy to zrobić, moglibyśmy to zrobić w selektorze obrazów zaraz po zrobieniu zdjęcia,

15
00:01:04,080 --> 00:01:09,720
ale w tym momencie nie wiemy jeszcze, czy rzeczywiście prześlemy formularz, jeśli faktycznie zachowujemy ten obraz.

16
00:01:09,720 --> 00:01:15,330
A co jeśli zrobimy tutaj zdjęcie, ale odrzucimy to i wrócimy?

17
00:01:15,330 --> 00:01:20,460
W tym przypadku nie chcę, aby obraz został przeniesiony na stałe, zdecydowanie powinien zostać wyczyszczony i

18
00:01:20,460 --> 00:01:24,300
to jest domyślne zachowanie, więc nie chcę go jeszcze przenosić w

19
00:01:24,300 --> 00:01:25,390
tym momencie,

20
00:01:25,740 --> 00:01:28,330
zamiast tego chcę go przenieść po przesłaniu formularza.

21
00:01:28,560 --> 00:01:32,610
Dlatego moglibyśmy to zrobić tutaj na nowym ekranie miejsca, w module obsługi miejsca

22
00:01:32,610 --> 00:01:38,280
zapisu, ale wtedy dodalibyśmy całą logikę systemu plików do tego komponentu, co jest możliwe, ale które dodaje dużo

23
00:01:38,280 --> 00:01:41,190
logiki do tego komponentu, czego tak naprawdę nie chcę

24
00:01:41,190 --> 00:01:43,930
mam tam, chcę utrzymać ten komponent stosunkowo szczupły.

25
00:01:44,280 --> 00:01:47,640
Świetnym miejscem do tego jest jednak twórca akcji.

26
00:01:47,730 --> 00:01:53,220
W przeszłości używaliśmy tego do wywoływania skutków ubocznych, takich jak wysyłanie żądań HTTP.

27
00:01:53,220 --> 00:01:58,680
Teraz przenoszenie pliku jest w zasadzie tą samą kategorią, co robimy, zamiast wysyłać żądanie do

28
00:01:58,680 --> 00:02:00,200
serwera, przenosimy plik, cóż,

29
00:02:00,200 --> 00:02:01,620
nie jest inaczej.

30
00:02:03,390 --> 00:02:12,210
Dlatego w tym pliku tutaj, w akcji miejsc. js, zaimportuję wszystko jako system plików z systemu plików

31
00:02:12,210 --> 00:02:19,500
expo, więc z tego nowego pakietu, który zainstalowaliśmy i tutaj dodajmy miejsce, teraz użyję tej

32
00:02:19,500 --> 00:02:26,970
alternatywnej składni wysyłania lub posiadania kreatora akcji, który wykorzystuje Redux Thunk, gdzie zwraca tutaj funkcję wewnętrzną,

33
00:02:26,970 --> 00:02:34,230
która odbiera funkcję argumentu jako argument, aby w tej funkcji wewnętrznej można było wywołać

34
00:02:34,230 --> 00:02:44,970
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ż „

35
00:02:44,970 --> 00:02:50,670
ponownie wykonam tutaj pracę asynchroniczną. Tutaj chcę teraz przenieść

36
00:02:50,670 --> 00:02:53,030
plik, prawda?

37
00:02:53,220 --> 00:02:58,980
W tym celu chcę użyć tego pakietu systemu plików. Teraz przeniesienie pliku obejmuje kilka

38
00:02:58,980 --> 00:03:00,060
rzeczy.

39
00:03:00,060 --> 00:03:05,160
Przede wszystkim musimy uzyskać nową ścieżkę do pliku i powinien

40
00:03:05,160 --> 00:03:12,270
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.

41
00:03:12,270 --> 00:03:16,980
Masz katalog pamięci podręcznej, który jest w rzeczywistości katalogiem, w którym plik

42
00:03:16,980 --> 00:03:25,200
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

43
00:03:25,200 --> 00:03:28,080
aplikację, ale masz również katalog dokumentów,

44
00:03:28,080 --> 00:03:34,140
to jest katalog główny katalog dla wszystkich plików, których potrzebuje Twoja aplikacja, które gwarantują przetrwanie.

45
00:03:34,140 --> 00:03:38,000
Teraz, gdy odinstalujesz aplikację, ten folder również zostanie usunięty, więc

46
00:03:38,010 --> 00:03:45,540
pliki zostaną utracone, ale do tego czasu będą się utrzymywać podczas restartów aplikacji, przez długie przerwy, gdy ludzie nie

47
00:03:45,540 --> 00:03:47,070
korzystali z Twojej

48
00:03:47,400 --> 00:03:49,470
aplikacji, więc tutaj pliki przetrwają.

49
00:03:50,220 --> 00:03:55,620
Tak więc katalog dokumentów systemu plików jest ścieżką, do której chcę przenieść mój plik, a teraz

50
00:03:55,620 --> 00:04:01,570
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.

51
00:04:01,710 --> 00:04:07,410
Oczywiście, kiedy robisz zdjęcie, dostajesz także tymczasową nazwę pliku, ale kiedy przenosisz plik, nazwa ta nie jest faktycznie wyjęta z

52
00:04:07,410 --> 00:04:14,570
pudełka, zamiast tego przyjmie tę ścieżkę tutaj jako nazwę, że tak powiem. Dlatego nie powinien to być tylko wskaźnik w

53
00:04:14,570 --> 00:04:18,050
folderze, do którego chcesz przenieść plik, powinien

54
00:04:18,150 --> 00:04:20,990
on także zawierać nazwę pliku.

55
00:04:21,060 --> 00:04:24,530
Teraz jestem zadowolony z zachowywania automatycznie generowanej nazwy

56
00:04:24,540 --> 00:04:31,220
obrazu, oczywiście możesz również wygenerować tutaj swoje własne unikalne nazwy obrazów, ale w tym celu uzyskam nazwę

57
00:04:31,290 --> 00:04:33,560
pliku z obrazu, który tu

58
00:04:33,570 --> 00:04:38,120
otrzymałem, pamiętaj ten obraz tutaj jest ścieżką, tymczasową ścieżką do obrazu.

59
00:04:38,160 --> 00:04:44,880
Tak więc tutaj użyję obrazu, który jest ciągiem, i wywołam split na tym, aby podzielić go

60
00:04:44,880 --> 00:04:52,440
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

61
00:04:52,440 --> 00:04:58,620
ciągów, gdzie każdy segment jest segmentem przed i po takim cięciu w łańcuchu i tam

62
00:04:59,040 --> 00:05:00,420
przez wywołanie

63
00:05:00,420 --> 00:05:01,850
pop, dostaję ostatni segment.

64
00:05:01,860 --> 00:05:09,090
Więc ten kod tutaj robi to, że patrzy na naszą ścieżkę obrazu, dzieli go na ukośniki, które tworzą naszą

65
00:05:09,300 --> 00:05:13,140
pełną ścieżkę tam i popping ostatni element, cóż to

66
00:05:13,140 --> 00:05:15,830
jest ostatni element? To jest

67
00:05:15,870 --> 00:05:26,060
nasza nazwa pliku, prawda, więc jeśli masz ścieżkę jak somefolder / myimage. jpg, to co robimy ze splitem, to

68
00:05:26,060 --> 00:05:34,880
tablica z jakimś folderem i myimage. jpg i dzwoniąc do tego pop, otrzymujemy

69
00:05:35,180 --> 00:05:36,920
myimage. jpg,

70
00:05:36,950 --> 00:05:39,250
więc to właśnie tu dostajemy.

71
00:05:40,590 --> 00:05:42,630
To zwróci nam naszą nazwę pliku,

72
00:05:42,630 --> 00:05:49,300
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.

73
00:05:49,320 --> 00:05:53,730
Tak więc teraz generuje ścieżkę, która zawiera folder, a następnie nazwę pliku.

74
00:05:53,730 --> 00:06:00,900
W tym miejscu chcę przenieść ten plik i teraz możemy go przenieść, uzyskując dostęp do systemu plików. moveAsync.

75
00:06:00,990 --> 00:06:04,130
Jest to metoda, która przenosi plik z a do b,

76
00:06:04,260 --> 00:06:09,540
a także wykorzystuje obietnicę, ponieważ przeniesienie tego pliku może potrwać nieco dłużej i dlatego powie nam,

77
00:06:09,540 --> 00:06:10,730
kiedy to zrobione.

78
00:06:11,750 --> 00:06:18,100
Teraz ruch asynchroniczny pobiera obiekt z dwoma częściami informacji - i przypuszczam, że jest całkiem

79
00:06:18,140 --> 00:06:19,010
prosty.

80
00:06:19,010 --> 00:06:25,070
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ę

81
00:06:25,070 --> 00:06:32,290
plik i oczywiście jest to nasza nowa ścieżka, taka jak ta. Teraz, jak powiedziałem, zwraca to obietnicę,

82
00:06:32,290 --> 00:06:36,420
dzięki czemu możemy na to poczekać i to wszystko.

83
00:06:36,430 --> 00:06:41,200
Teraz powinniśmy zawinąć to w blok try catch, ponieważ może się to nie udać, ponieważ

84
00:06:41,200 --> 00:06:48,090
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.

85
00:06:48,160 --> 00:06:55,690
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ść,

86
00:06:55,690 --> 00:06:56,400
a

87
00:06:56,620 --> 00:06:59,520
tam możemy chcieć coś zrobić, tutaj rejestruję

88
00:06:59,530 --> 00:07:04,680
błąd i ponownie go piszę, ale oczywiście możesz zrobić tam inne rzeczy, takie jak

89
00:07:04,690 --> 00:07:09,310
cóż, możesz przechowywać to na swoim własnym serwerze analitycznym, cokolwiek musisz zrobić.

90
00:07:09,610 --> 00:07:15,100
Teraz ostatecznie możesz chcieć poradzić sobie z tym również w komponencie, aby wyświetlić tam

91
00:07:15,100 --> 00:07:20,650
alert, nie zrobię tego, ale zrobiłbyś to w taki sam sposób, jak robisz na

92
00:07:20,650 --> 00:07:22,160
przykład błędy HTTP,

93
00:07:22,200 --> 00:07:24,040
na które spojrzałem moduł HTTP.

94
00:07:24,040 --> 00:07:28,980
Więc tutaj zakładamy, że to w większości będzie działać lub że to zawsze będzie działać

95
00:07:29,050 --> 00:07:31,350
i przenosimy plik. Teraz, gdy

96
00:07:31,420 --> 00:07:34,870
zostanie przeniesiony, wiemy, że będzie na nowej ścieżce,

97
00:07:34,900 --> 00:07:41,140
więc oczywiście jest to nowa ścieżka, którą chcę teraz przechowywać tutaj w moich danych

98
00:07:41,140 --> 00:07:46,320
o miejscu lub w sklepie Redux. To wszystko miłe, powinno

99
00:07:46,330 --> 00:07:50,040
to przechowywać nasz obraz w trwałym katalogu,

100
00:07:50,140 --> 00:07:56,110
ale nie robimy tego, że nie przechowujemy samych danych w stałym miejscu.

101
00:07:56,110 --> 00:08:01,510
Oczywiście używamy tutaj Redux, co oznacza, że jest on przechowywany w pamięci, ale za każdym razem, gdy zamykamy

102
00:08:01,510 --> 00:08:08,010
i restartujemy naszą aplikację, wszystkie nasze dane zostaną utracone, ponieważ nie są przechowywane na urządzeniu, na serwerze lub w bazie danych, tylko

103
00:08:08,010 --> 00:08:12,730
w pamięci który jest aktywny tak długo, jak działa nasza aplikacja, a następnie jest czyszczony.

104
00:08:12,730 --> 00:08:19,630
W kolejnym kroku chcę pokazać, jak korzystać z SQLite, która jest bazą danych na urządzeniu, dostępną zarówno na iOS, jak

105
00:08:19,630 --> 00:08:25,360
i na Androidzie, do przechowywania nie tylko plików, ale także naszych danych, takich jak tytuł i

106
00:08:25,360 --> 00:08:26,800
ścieżka obrazu oraz wkrótce.