Herunterladen von Dateien mit React Native für die Offline-Nutzung

Question

Ich möchte eine App entwickeln, wo ein Benutzer verschiedene Gamepacks auswählen kann, um auf ihrem Android oder iOS-Gerät zu installieren. Ein Gamepack besteht aus:

• eine oder mehr JSON-Dateien
• Bilder
• klingt

Im Moment bin ich nicht wirklich besorgt, wenn diese einzeln oder in einer Zip-Datei übertragen (obwohl eine Zip-Datei wäre sicherlich bevorzugt). Natürlich muss das Gerät mit dem Internet verbunden sein, um die aktuelle Liste der Gamepacks zu erhalten und diejenigen herunterzuladen, die der Benutzer auswählt. Sobald die Gamepacks auf das Telefon heruntergeladen sind, benötigt der Benutzer keine Internetverbindung, um das Spiel zu spielen, da sie alle Dateien haben werden.

Wie gehe ich vor, dies in meinem Projekt zu implementieren?

Wie lade ich die Dateien herunter? Würde ich die Bibliothek react-native-fetch-blob verwenden und sie an einem bestimmten Ort speichern? Diese Bibliothek bezieht sich darauf, sie als "Cache" statt permanent zu speichern, daher bin ich mir nicht sicher, ob dies die richtige Lösung ist. Der spezifische Abschnitt, den ich auf der Bibliotheksseite betrachte, ist "Benutze spezifischen Dateipfad". Aber weil es sich um einen Cache handelt, sollte ich nach etwas anderem suchen, das längerfristig gespeichert werden kann? Es sagt auf der Seite, dass Dateien nicht gelöscht werden, so dass ich ein wenig verwirrt bin, was der Unterschied zwischen permanentem Speicher und Cache in diesem Fall ist.

Sobald die Dateien heruntergeladen sind, wäre ich dann in der Lage, Bilder zu öffnen und anzuzeigen, Sounddateien zu öffnen und abzuspielen, die JSON-Dateien zu öffnen und zu bearbeiten?

Answer 1

überprüfen Reagieren aus india FS, speziell in der Dokumentation auf downloadFile:

https://github.com/johanneslumpe/react-native-fs#downloadfileoptions-downloadfileoptions--jobid-number-promise-promisedownloadresult-

Hier ist ein funktionierendes Beispiel:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    Image, 
} from 'react-native'; 
import RNFS from 'react-native-fs'; 


export default class downloadFile extends Component { 
    constructor() { 
    super() 
    this.state = { 
     isDone: false, 
    }; 
    this.onDownloadImagePress = this.onDownloadImagePress.bind(this); 
    } 

    onDownloadImagePress() { 

     RNFS.downloadFile({ 
     fromUrl: 'https://facebook.github.io/react-native/img/header_logo.png', 
     toFile: `${RNFS.DocumentDirectoryPath}/react-native.png`, 
     }).promise.then((r) => { 
     this.setState({ isDone: true }) 
     }); 
    } 

    render() { 
    const preview = this.state.isDone ? (<View> 
     <Image style={{ 
     width: 100, 
     height: 100, 
     backgroundColor: 'black', 
     }} 
     source={{ 
      uri: `file://${RNFS.DocumentDirectoryPath}/react-native.png`, 
      scale: 1 
     }} 
     /> 
     <Text>{`file://${RNFS.DocumentDirectoryPath}/react-native.png`}</Text> 
    </View> 
    ) : null; 
    return (
     <View> 
     <Text onPress={this.onDownloadImagePress}>Download Image</Text> 
     {preview} 
     </View> 
    ); 
    } 
} 
AppRegistry.registerComponent('downloadFile',() => downloadFile); 

Es ist wichtig zu wissen, dass die height und width muss auf die festgelegt werden Image