Descargar archivo en React Native

Este artículo mostrará cómo podemos descargar un archivo usando una aplicación React-Native. Además, facilitaremos el tema utilizando los ejemplos y explicaciones necesarios.

Descargar archivo en React Native

Si está trabajando con la Expo, debe seguir los pasos a continuación.

Veamos un ejemplo de cómo descargar un archivo desde una URL usando la aplicación React-Native.

Nuestro ejemplo a continuación demuestra cómo podemos descargar un archivo pdf usando nuestra aplicación React-Native. El fragmento de código para nuestro ejemplo será el siguiente.

// importing necessary packages
import * as FileSystem from 'expo-file-system';
import * as Linking from 'expo-linking';
import * as React from 'react';
import {Alert, StyleSheet, Text, View} from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    let URL = 'http://www.soundczech.cz/temp/lorem-ipsum.pdf';
    let LocalPath = FileSystem.documentDirectory + 'lorem-ipsum.pdf';
    FileSystem.downloadAsync(URL, LocalPath)
        .then(({uri}) => Linking.openURL(uri));
  }
  render() {
    return (<View style = {styles.container}>
            <Text style = {styles.paragraph}>Downloading your
                file...</Text>
      </View>);
  }
}
// Providing some styles to the UI components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 30,
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 20,
    textAlign: 'center',
  },
});

Ya ordenamos el propósito de todas las líneas necesarias con respecto a los pasos compartidos anteriormente en el ejemplo. Ahora describiremos algunas partes importantes del código de ejemplo compartido anteriormente.

La línea let URL = 'http://www.soundczech.cz/temp/lorem-ipsum.pdf'; proporciona la URL del archivo y la línea let LocalPath = FileSystem.documentDirectory + "lorem-ipsum.pdf"; proporciona la ubicación del archivo en el almacenamiento local. El bloque de código a continuación descarga el archivo y lo abre.

FileSystem
    .downloadAsync(URL, LocalPath)  // A function to download and open the file
    .then(({uri}) => Linking.openURL(uri));  // Linking the URL
}

Cuando ejecute la aplicación, obtendrá el siguiente resultado.

Producción:

Tenga en cuenta que el código compartido anteriormente se crea en React-Native, y usamos Expo-CLI para ejecutar la aplicación. Además, necesita la última versión de Node.js.

Si no tiene Expo-CLI en su entorno, instálelo primero.