React Native Mdulo 6 Download de arquivos em

React Native Módulo 6 - Download de arquivos em PDF

Get. PDF • Nesta seção, um projeto básico com uma tela e um botão será criado e suas principais partes serão descritas. • Inicie um novo projeto, digite: react-native init get. PDF • Entre no Visual Studio Code • Escolha File/Open Folder. . . • Escolha a pasta “primeiro” criada para esse projeto

Configuração • Através do cmd ou terminal, acesse a pasta do projeto. • Para o app é necessário instalar algumas bibliotecas: • npm install --save rn-fetch-blob • yarn add react-navigation • yarn add react-native-gesture-handler • Para criar a tela crie um arquivo Activity. js e edite-o, todo o backend do app será feito neste arquivo.

import React, {Component} from 'react'; import {View, Button, Platform, Permissions. Android} from 'react-native'; import RNFetch. Blob from 'rn-fetch-blob'; export default class Activity extends Component { async component. Will. Mount() { await request. Storage. Permission() } download. File(url){ let dirs = Platform. OS === 'ios' ? RNFetch. Blob. fs. dirs. Document. Dir : RNFetch. Blob. fs. dirs. Download. Dir; return RNFetch. Blob. config({ path: dirs + '/fatura. pdf', file. Cache : true, add. Android. Downloads : { notification : true, title : 'Download concluido', description : 'Download PDF', mime : 'application/PDF', media. Scannable : true, } }). fetch('GET', url). then((res) => { // the temp file path res. data if (Platform. OS === 'ios') RNFetch. Blob. ios. open. Document(res. data); else RNFetch. Blob. android. action. View. Intent(res. data, 'application/pdf'); }) Importações Pedirá permissão de acesso ao armazenamento Função que fará o download e exibição do arquivo PDF.

. catch(err => { console. log(err); } render(){ return( <View> <View style={{margin: 20}}> <Button title = 'Download PDF' on. Press = {() => this. download. File('http: //samples. leanpub. com/thereactnativebooksample. pdf')} /> </View> ); } } Fim da função de download. Botão para download do PDF, e fim da função Activity.

export async function request. Storage. Permission() { try { const granted = await Permissions. Android. request(Permissions. Android. PERMISSIONS. WRITE_EXTERN AL_STORAGE, { 'title': 'get. PDF', 'message': 'get. PDF necessita ter acesso ao armazenameno interno. ' } ) if (granted === Permissions. Android. RESULTS. GRANTED) { console. log("Acesso permitido") } else { console. log("Acesso negado") } } catch (err) { console. warn(err) } } Função assíncrona para permissão de acesso ao armazenamento interno (para android).

get. PDF • A importação Permissions. Android do React é para poder utilizar a função de solicitar permissão de armazenamento. • A importação Plataform do React é para diferenciar sistemas Android e i. OS. • A importação RNFetch. Blob serve para conseguir fazer download de arquivos. • O Async component. Will. Mount(), é uma função que ocorrerá apenas quando for a primeira execução do app, e ela executará a função que pede permissão de armazenamento interno.

get. PDF • O Async component. Will. Mount(), é uma função que ocorrerá apenas quando for a primeira execução do app, e ela executará a função que pede permissão de armazenamento interno.

download. File(url) • A função download. File recebe como parâmetro uma url, que no caso será string; • A variável dirs será o caminho onde o download será salvo, se o sistema for i. OS será um caminho e se for Android será outro, porque a arquitetura de pastas é diferente nos SO’s; • A parte de configuração será para descrever o caminho que o dado será salvo como arquivo; • No caso do Android é necessário utilizar um “gerenciador de downloads”, o mime é para identificar qual arquivo será baixado.

download. File(url) • O. fetch é onde se define qual será o método de requisição, qual será a url utilizada, e as configurações da requisição (se houver). • Caso o sistema for i. OS a reposta tem que utilizar uma função do RNFetch. Blob e se for Android outro, porque no i. OS já existem apps padrões que executam cada função de abrir arquivo.

get. PDF • Na parte on. Press do botão é onde será chamada a função de download e será passada a url que contém o PDF; • A função de permissão android possui inúmeras permissões de acesso, que estão disponíveis na documentação em: https: //facebook. github. io/reactnative/docs/permissionsandroid; • Caso o app seja para Android 5. 0 abaixo as permissões são necessárias serem incluídas no Android. Manifest. xml; • Agora abra o arquivo App. js e modifique-o.

import React, {Component} from 'react'; import {create. Stack. Navigator, create. App. Container} from 'reactnavigation'; import Activity from '. /Activity'; const App. Navigator = create. Stack. Navigator( { Main: { screen: Activity } }); Importações Criando um Stack. Navigator const App. Container = create. App. Container(App. Navigator); export default class App extends Component{ render(){ return <App. Container/>; } }; Criando um Container