使用React Native下载数据文件以供离线使用 [英] Downloading data files with React Native for offline use

问题描述

我想开发一个应用程序，用户可以在Android或ios设备上选择不同的游戏。一个gamepack将包括：

• 一个或多个JSON文件


• 图像


• 声音

现在我不是非常担心这些是单独传输还是在zip文件中一定是优选的zip文件）当然，该设备需要连接到互联网以获取当前的游戏列表，并下载用户选择的游戏。一旦将游戏下载到手机，用户将不需要互联网连接来播放游戏，因为它们将具有所有文件。

如何在我的项目中实现？

如何下​​载文件？我会使用

I am wanting to develop an app where a user can select different gamepacks to install on their android or ios device. A gamepack will consist of:

• one or more JSON files
• images
• sounds

Right now I'm not really concerned if these are transferred individually or in a zip file (though a zip file would certainly be preferred). Of course the device will need to be connected to the Internet to get the current list of gamepacks and to download the ones that the user chooses. Once the gamepacks are downloaded to the phone the user will not need an Internet connection to play the game as they will have all the files.

How do I go about implementing this in my project?

How do I download the files? Would I use the react-native-fetch-blob library and save it in a specific location? This library refers to saving it as "cache" rather than permanently, so I am not sure if this is the correct solution. The specific section I am looking at on the library page is "Use Specific File Path". But because it is cache, should I be looking for something else that is more of a longer term storage? It does say on the page that files will not be deleted so I am a bit confused as to what the difference between permanent storage and cache is in this case.

Once the files are downloaded would I then be able to open images and display them, open sound files and play them, and open the json files and process them?

解决方案

Check out React Native FS, specifically the documentation on downloadFile:

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

Here's a working example:

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);

It's important to know that the height and width must be set on the Image

这篇关于使用React Native下载数据文件以供离线使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！