Laden Sie die Datei in React Native herunter

Dieser Artikel zeigt, wie wir eine Datei mit einer React-Native-App herunterladen können. Außerdem werden wir das Thema vereinfachen, indem wir die notwendigen Beispiele und Erklärungen verwenden.

Laden Sie die Datei in React Native herunter

Wenn Sie mit der Expo arbeiten, müssen Sie die folgenden Schritte befolgen.

Sehen wir uns ein Beispiel an, wie Sie mit der React-Native-App eine Datei von einer URL herunterladen.

Unser Beispiel unten zeigt, wie wir eine PDF-Datei mit unserer React-Native-App herunterladen können. Das Code-Snippet für unser Beispiel sieht wie folgt aus.

// 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',
  },
});

Wir haben bereits den Zweck aller erforderlichen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte befohlen. Jetzt werden wir einige wichtige Teile des oben geteilten Beispielcodes beschreiben.

Die Zeile let URL = 'http://www.soundczech.cz/temp/lorem-ipsum.pdf'; liefert die Datei-URL und die Zeile let LocalPath = FileSystem.documentDirectory + "lorem-ipsum.pdf"; stellt den Dateispeicherort im lokalen Speicher bereit. Der folgende Codeblock lädt die Datei herunter und öffnet sie.

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

Wenn Sie die App ausführen, erhalten Sie die folgende Ausgabe.

Ausgang:

Beachten Sie, dass der oben geteilte Code in React-Native erstellt wurde und wir die Expo-CLI verwendet haben, um die App auszuführen. Außerdem benötigen Sie die neueste Version von Node.js.

Wenn Sie Expo-CLI nicht in Ihrer Umgebung haben, installieren Sie es zuerst.