Para evitar que a imagem seja removida, precisamos armazená-la
em um caminho mais permanente no sistema de arquivos do dispositivo local.
Obviamente, também podemos enviá-lo para um servidor, mas já falamos sobre serviço e assim por diante.
Aqui, quero me concentrar em todos os recursos nativos do dispositivo. Agora, para trabalhar com nosso sistema de arquivos
nativo, a expo
nos oferece cobertura, podemos usar o
pacote do sistema de arquivos aqui para fazer isso. Você o instala da mesma maneira que instala os outros
pacotes nativos, com
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
que você pode usar como alternativa, basta ter certeza de que está usando a versão certa para a sua versão expo
SDK que você está usando e, com isso, nós a instalamos,
agora podemos mover a imagem depois de tirá-la.
Agora, existem vários lugares no aplicativo em que
poderíamos fazer isso, no seletor de imagens logo após tirar a imagem, mas, neste
momento, ainda não sabemos se vamos realmente enviar o formulário, se nós realmente mantemos essa imagem.
E daí se tirássemos uma imagem aqui, mas depois descartamos isso e voltamos?
Eu não quero que a imagem seja movida para um local permanente, nesse caso, ela definitivamente deve ser
limpa e esse é o comportamento padrão. Portanto, ainda não quero movê-la neste
momento. Em vez
disso, quero movê-la uma vez que enviamos o formulário.
Portanto, poderíamos fazê-lo aqui na nova tela de local, no manipulador de salvar local,
mas adicionaríamos toda essa lógica do sistema de arquivos a este componente, o que é possível, mas que adiciona muita
lógica a esse componente, o que eu realmente não quero
tenho lá, quero manter esse componente relativamente magro.
Um ótimo lugar para isso, porém, é o criador da ação.
Nós já usamos isso no passado para ter efeitos colaterais, como enviar solicitações HTTP.
Agora, mover um arquivo é basicamente a mesma categoria que estamos fazendo, em vez de enviar uma solicitação para um
servidor,
estamos movendo um arquivo,
bem, não é tão diferente.
Portanto, neste arquivo aqui, na ação-lugares. js, importarei tudo como sistema de arquivos do sistema de
arquivos expo, portanto, deste novo pacote que instalamos e aqui no local, agora usarei esta sintaxe alternativa
de despacho ou de ter um criador de ação que utilize Redux Thunk, onde retorna uma função
interna aqui que recebe a função de despacho como argumento para que, nessa função interna, possamos
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 '
vamos fazer um trabalho assíncrono aqui. Aqui, agora eu quero mover
o arquivo, certo?
Então, para isso, quero usar este pacote de sistema de arquivos. Agora, mover o arquivo realmente envolve
algumas coisas.
Primeiro de tudo, precisamos derivar o novo caminho do arquivo e esse
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.
Você obteve o diretório de cache, que na verdade é o diretório em
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
aplicativo usa, mas também o diretório de
documentos. diretório principal para todos os arquivos que seu aplicativo precisa e com garantia de sobrevivência.
Agora, quando você desinstalar o aplicativo, essa pasta também será apagada;
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
pessoas não o
usaram, e aqui os arquivos sobreviverão.
Portanto, o diretório de documentos do sistema de arquivos é o caminho para o qual quero mover meu arquivo
e agora há uma coisa importante a saber: seu caminho também precisa incluir o nome do arquivo que você deseja usar no futuro.
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
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
para a qual você deseja mover o arquivo, mas
deve incluir o nome do arquivo.
Agora, estou feliz em manter o nome da imagem gerada
automaticamente, é claro que agora você também pode gerar seus próprios nomes de imagem aqui, mas, para isso, derivarei o nome
do arquivo da imagem que obtive
aqui, lembre-se essa imagem aqui é um caminho, o caminho temporário para a imagem.
Então, aqui, na verdade, usarei a imagem que é uma string e chamaremos split para separá-la por barras,
porque esse caminho envolve algumas barras no final e a split converte essa string em uma matriz de segmentos de
string, onde cada segmento é um segmento antes e depois de uma barra na cadeia e,
chamando pop,
recebo o último segmento.
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
nosso caminho completo por lá e exibindo o último elemento, bem, qual
é o último elemento? Esse é o
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
matriz com alguma pasta e com a minha imagem. jpg e chamando pop, obtemos minha
imagem. jpg,
é isso que chegamos aqui.
Portanto, isso nos retornará nosso
nome de arquivo, esse trecho de código aqui e agora podemos anexá-lo aqui ao nosso caminho, simplesmente adicionando-o assim.
Então agora isso gera um caminho que inclui uma pasta e o nome do arquivo.
É para onde eu quero mover esse arquivo e agora podemos movê-lo acessando o FileSystem. moveAsync.
Esse é um método que move um arquivo de a para
eb e também usa uma promessa porque a movimentação desse arquivo pode demorar um pouco mais e, portanto, nos
dirá quando terminar.
Agora, move async pega um objeto com duas informações - de e para o qual é bastante direto,
eu acho.
Então from is image porque image é o caminho para o diretório temporário, então é disso que é, é onde o
arquivo fica atualmente e, é claro, é o nosso novo caminho, assim. Agora, como eu disse, isso retorna uma promessa
para
que possamos esperar por isso e é isso.
Agora devemos agrupar isso em um bloco try catch, porque isso pode falhar, porque, por
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.
Definitivamente, devemos tentar capturar nossas ações do sistema de arquivos, porque as operações no sistema de arquivos sempre podem falhar e, em
seguida,
podemos querer fazer algo; aqui estou registrando o erro
e repetindo o processo, mas é claro que você pode fazer outras coisas como bem, você
pode armazenar isso em seu próprio servidor de análise, o que for necessário.
Agora, em última análise, você também pode querer lidar com isso em um componente para mostrar um
alerta. Não o farei, mas você o tratará da mesma maneira que, por exemplo, lida com erros
de HTTP, algo que
eu observei em o módulo HTTP.
Então, aqui, estamos assumindo que isso funcionará principalmente ou que sempre funcionará e estamos
movendo o arquivo. Agora que
foi movido, sabemos que ele estará no novo caminho,
então é claro que é o novo caminho que agora quero armazenar aqui em meus dados
de local ou na minha loja Redux. Tudo bem, isso deve armazenar
nossa imagem em um diretório permanente, mas o que
não estamos fazendo é que não estamos armazenando nossos dados em um local permanente.
É claro que estamos usando o Redux aqui e isso significa que ele é armazenado na memória, mas sempre
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
na memória que fica ativo desde que nosso aplicativo seja executado e, a partir daí, limpo.
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,
para armazenar mais do que apenas arquivos, mas também para armazenar nossos dados, como o título e o caminho
da imagem. em breve.