1
00:00:02,090 --> 00:00:05,970
Para evitar que a imagem seja removida, precisamos armazená-la

2
00:00:06,140 --> 00:00:11,180
em um caminho mais permanente no sistema de arquivos do dispositivo local.

3
00:00:11,180 --> 00:00:15,350
Obviamente, também podemos enviá-lo para um servidor, mas já falamos sobre serviço e assim por diante.

4
00:00:15,410 --> 00:00:21,970
Aqui, quero me concentrar em todos os recursos nativos do dispositivo. Agora, para trabalhar com nosso sistema de arquivos

5
00:00:22,100 --> 00:00:23,660
nativo, a expo

6
00:00:23,690 --> 00:00:26,180
nos oferece cobertura, podemos usar o

7
00:00:26,270 --> 00:00:32,900
pacote do sistema de arquivos aqui para fazer isso. Você o instala da mesma maneira que instala os outros

8
00:00:32,900 --> 00:00:34,320
pacotes nativos, com

9
00:00:34,320 --> 00:00:41,470
o expo install expo-file-system, então vamos fazer isso aqui, expo install, novamente apenas um invólucro em torno da instalação do npm

10
00:00:41,510 --> 00:00:48,950
que você pode usar como alternativa, basta ter certeza de que está usando a versão certa para a sua versão expo

11
00:00:48,950 --> 00:00:52,980
SDK que você está usando e, com isso, nós a instalamos,

12
00:00:53,010 --> 00:00:56,000
agora podemos mover a imagem depois de tirá-la.

13
00:00:56,010 --> 00:00:59,080
Agora, existem vários lugares no aplicativo em que

14
00:00:59,160 --> 00:01:04,080
poderíamos fazer isso, no seletor de imagens logo após tirar a imagem, mas, neste

15
00:01:04,080 --> 00:01:09,720
momento, ainda não sabemos se vamos realmente enviar o formulário, se nós realmente mantemos essa imagem.

16
00:01:09,720 --> 00:01:15,330
E daí se tirássemos uma imagem aqui, mas depois descartamos isso e voltamos?

17
00:01:15,330 --> 00:01:20,460
Eu não quero que a imagem seja movida para um local permanente, nesse caso, ela definitivamente deve ser

18
00:01:20,460 --> 00:01:24,300
limpa e esse é o comportamento padrão. Portanto, ainda não quero movê-la neste

19
00:01:24,300 --> 00:01:25,390
momento. Em vez

20
00:01:25,740 --> 00:01:28,330
disso, quero movê-la uma vez que enviamos o formulário.

21
00:01:28,560 --> 00:01:32,610
Portanto, poderíamos fazê-lo aqui na nova tela de local, no manipulador de salvar local,

22
00:01:32,610 --> 00:01:38,280
mas adicionaríamos toda essa lógica do sistema de arquivos a este componente, o que é possível, mas que adiciona muita

23
00:01:38,280 --> 00:01:41,190
lógica a esse componente, o que eu realmente não quero

24
00:01:41,190 --> 00:01:43,930
tenho lá, quero manter esse componente relativamente magro.

25
00:01:44,280 --> 00:01:47,640
Um ótimo lugar para isso, porém, é o criador da ação.

26
00:01:47,730 --> 00:01:53,220
Nós já usamos isso no passado para ter efeitos colaterais, como enviar solicitações HTTP.

27
00:01:53,220 --> 00:01:58,680
Agora, mover um arquivo é basicamente a mesma categoria que estamos fazendo, em vez de enviar uma solicitação para um

28
00:01:58,680 --> 00:01:59,180
servidor,

29
00:01:59,190 --> 00:02:00,200
estamos movendo um arquivo,

30
00:02:00,200 --> 00:02:01,620
bem, não é tão diferente.

31
00:02:03,390 --> 00:02:12,210
Portanto, neste arquivo aqui, na ação-lugares. js, importarei tudo como sistema de arquivos do sistema de

32
00:02:12,210 --> 00:02:19,500
arquivos expo, portanto, deste novo pacote que instalamos e aqui no local, agora usarei esta sintaxe alternativa

33
00:02:19,500 --> 00:02:26,970
de despacho ou de ter um criador de ação que utilize Redux Thunk, onde retorna uma função

34
00:02:26,970 --> 00:02:34,230
interna aqui que recebe a função de despacho como argumento para que, nessa função interna, possamos

35
00:02:34,230 --> 00:02:44,970
despachar essa ação chamando despacho aqui e passando nosso objeto de ação, e adicionarei assíncrono aqui para que possamos usar o async aguardar porque '

36
00:02:44,970 --> 00:02:50,670
vamos fazer um trabalho assíncrono aqui. Aqui, agora eu quero mover

37
00:02:50,670 --> 00:02:53,030
o arquivo, certo?

38
00:02:53,220 --> 00:02:58,980
Então, para isso, quero usar este pacote de sistema de arquivos. Agora, mover o arquivo realmente envolve

39
00:02:58,980 --> 00:03:00,060
algumas coisas.

40
00:03:00,060 --> 00:03:05,160
Primeiro de tudo, precisamos derivar o novo caminho do arquivo e esse

41
00:03:05,160 --> 00:03:12,270
deve, obviamente, ser um diretório mais permanente. Para isso, podemos usar o sistema de arquivos e, lá, você tem alguns diretórios que pode acessar.

42
00:03:12,270 --> 00:03:16,980
Você obteve o diretório de cache, que na verdade é o diretório em

43
00:03:16,980 --> 00:03:25,200
que o arquivo já está armazenado, o diretório do pacote configurável que não é realmente um bom diretório para armazenar arquivos que seu

44
00:03:25,200 --> 00:03:28,080
aplicativo usa, mas também o diretório de

45
00:03:28,080 --> 00:03:34,140
documentos. diretório principal para todos os arquivos que seu aplicativo precisa e com garantia de sobrevivência.

46
00:03:34,140 --> 00:03:38,000
Agora, quando você desinstalar o aplicativo, essa pasta também será apagada;

47
00:03:38,010 --> 00:03:45,540
portanto, esses arquivos serão perdidos, mas até então, eles persistirão durante a reinicialização do aplicativo, em longas pausas nas quais as

48
00:03:45,540 --> 00:03:47,070
pessoas não o

49
00:03:47,400 --> 00:03:49,470
usaram, e aqui os arquivos sobreviverão.

50
00:03:50,220 --> 00:03:55,620
Portanto, o diretório de documentos do sistema de arquivos é o caminho para o qual quero mover meu arquivo

51
00:03:55,620 --> 00:04:01,570
e agora há uma coisa importante a saber: seu caminho também precisa incluir o nome do arquivo que você deseja usar no futuro.

52
00:04:01,710 --> 00:04:07,410
Obviamente, você também recebe um nome de arquivo temporário quando tira a imagem, mas quando move um arquivo, esse nome não é mantido fora da

53
00:04:07,410 --> 00:04:14,570
caixa; em vez disso, ele assume esse caminho aqui como um nome, por assim dizer. Portanto, isso não deve ser apenas um ponteiro na pasta

54
00:04:14,570 --> 00:04:18,050
para a qual você deseja mover o arquivo, mas

55
00:04:18,150 --> 00:04:20,990
deve incluir o nome do arquivo.

56
00:04:21,060 --> 00:04:24,530
Agora, estou feliz em manter o nome da imagem gerada

57
00:04:24,540 --> 00:04:31,220
automaticamente, é claro que agora você também pode gerar seus próprios nomes de imagem aqui, mas, para isso, derivarei o nome

58
00:04:31,290 --> 00:04:33,560
do arquivo da imagem que obtive

59
00:04:33,570 --> 00:04:38,120
aqui, lembre-se essa imagem aqui é um caminho, o caminho temporário para a imagem.

60
00:04:38,160 --> 00:04:44,880
Então, aqui, na verdade, usarei a imagem que é uma string e chamaremos split para separá-la por barras,

61
00:04:44,880 --> 00:04:52,440
porque esse caminho envolve algumas barras no final e a split converte essa string em uma matriz de segmentos de

62
00:04:52,440 --> 00:04:58,620
string, onde cada segmento é um segmento antes e depois de uma barra na cadeia e,

63
00:04:59,040 --> 00:05:00,420
chamando pop,

64
00:05:00,420 --> 00:05:01,850
recebo o último segmento.

65
00:05:01,860 --> 00:05:09,090
Então, o que esse código faz aqui é dar uma olhada no caminho da nossa imagem, dividi-lo por barras que meio que compõem o

66
00:05:09,300 --> 00:05:13,140
nosso caminho completo por lá e exibindo o último elemento, bem, qual

67
00:05:13,140 --> 00:05:15,830
é o último elemento? Esse é o

68
00:05:15,870 --> 00:05:26,060
nosso nome de arquivo, certo, então se você tiver um caminho como somefolder / myimage. jpg, então o que fazemos com a divisão é obter uma

69
00:05:26,060 --> 00:05:34,880
matriz com alguma pasta e com a minha imagem. jpg e chamando pop, obtemos minha

70
00:05:35,180 --> 00:05:36,920
imagem. jpg,

71
00:05:36,950 --> 00:05:39,250
é isso que chegamos aqui.

72
00:05:40,590 --> 00:05:42,630
Portanto, isso nos retornará nosso

73
00:05:42,630 --> 00:05:49,300
nome de arquivo, esse trecho de código aqui e agora podemos anexá-lo aqui ao nosso caminho, simplesmente adicionando-o assim.

74
00:05:49,320 --> 00:05:53,730
Então agora isso gera um caminho que inclui uma pasta e o nome do arquivo.

75
00:05:53,730 --> 00:06:00,900
É para onde eu quero mover esse arquivo e agora podemos movê-lo acessando o FileSystem. moveAsync.

76
00:06:00,990 --> 00:06:04,130
Esse é um método que move um arquivo de a para

77
00:06:04,260 --> 00:06:09,540
eb e também usa uma promessa porque a movimentação desse arquivo pode demorar um pouco mais e, portanto, nos

78
00:06:09,540 --> 00:06:10,730
dirá quando terminar.

79
00:06:11,750 --> 00:06:18,100
Agora, move async pega um objeto com duas informações - de e para o qual é bastante direto,

80
00:06:18,140 --> 00:06:19,010
eu acho.

81
00:06:19,010 --> 00:06:25,070
Então from is image porque image é o caminho para o diretório temporário, então é disso que é, é onde o

82
00:06:25,070 --> 00:06:32,290
arquivo fica atualmente e, é claro, é o nosso novo caminho, assim. Agora, como eu disse, isso retorna uma promessa

83
00:06:32,290 --> 00:06:32,770
para

84
00:06:32,800 --> 00:06:36,420
que possamos esperar por isso e é isso.

85
00:06:36,430 --> 00:06:41,200
Agora devemos agrupar isso em um bloco try catch, porque isso pode falhar, porque, por

86
00:06:41,200 --> 00:06:48,090
exemplo, não há espaço suficiente no dispositivo ou, de alguma forma, temos um erro de permissão ou qualquer outra coisa está errada.

87
00:06:48,160 --> 00:06:55,690
Definitivamente, devemos tentar capturar nossas ações do sistema de arquivos, porque as operações no sistema de arquivos sempre podem falhar e, em

88
00:06:55,690 --> 00:06:56,400
seguida,

89
00:06:56,620 --> 00:06:59,520
podemos querer fazer algo; aqui estou registrando o erro

90
00:06:59,530 --> 00:07:04,680
e repetindo o processo, mas é claro que você pode fazer outras coisas como bem, você

91
00:07:04,690 --> 00:07:09,310
pode armazenar isso em seu próprio servidor de análise, o que for necessário.

92
00:07:09,610 --> 00:07:15,100
Agora, em última análise, você também pode querer lidar com isso em um componente para mostrar um

93
00:07:15,100 --> 00:07:20,650
alerta. Não o farei, mas você o tratará da mesma maneira que, por exemplo, lida com erros

94
00:07:20,650 --> 00:07:22,160
de HTTP, algo que

95
00:07:22,200 --> 00:07:24,040
eu observei em o módulo HTTP.

96
00:07:24,040 --> 00:07:28,980
Então, aqui, estamos assumindo que isso funcionará principalmente ou que sempre funcionará e estamos

97
00:07:29,050 --> 00:07:31,350
movendo o arquivo. Agora que

98
00:07:31,420 --> 00:07:34,870
foi movido, sabemos que ele estará no novo caminho,

99
00:07:34,900 --> 00:07:41,140
então é claro que é o novo caminho que agora quero armazenar aqui em meus dados

100
00:07:41,140 --> 00:07:46,320
de local ou na minha loja Redux. Tudo bem, isso deve armazenar

101
00:07:46,330 --> 00:07:50,040
nossa imagem em um diretório permanente, mas o que

102
00:07:50,140 --> 00:07:56,110
não estamos fazendo é que não estamos armazenando nossos dados em um local permanente.

103
00:07:56,110 --> 00:08:01,510
É claro que estamos usando o Redux aqui e isso significa que ele é armazenado na memória, mas sempre

104
00:08:01,510 --> 00:08:08,010
que fecharmos e reiniciarmos o aplicativo, todos os nossos dados serão perdidos porque não estão armazenados no dispositivo, servidor ou banco de dados, apenas

105
00:08:08,010 --> 00:08:12,730
na memória que fica ativo desde que nosso aplicativo seja executado e, a partir daí, limpo.

106
00:08:12,730 --> 00:08:19,630
Então, como próximo passo, quero mostrar como usar o SQLite, que é um banco de dados no dispositivo, disponível no iOS e Android,

107
00:08:19,630 --> 00:08:25,360
para armazenar mais do que apenas arquivos, mas também para armazenar nossos dados, como o título e o caminho

108
00:08:25,360 --> 00:08:26,800
da imagem. em breve.