Question

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

一个或多个JSON文件
图像
声音

现在我并不担心这些是单独传输还是以zip文件传输（尽管首选zip文件）。当然，设备需要连接到Internet才能获得当前的游戏包列表并下载用户选择的游戏包。一旦将游戏包下载到手机上，用户将不需要因特网连接来玩游戏，因为他们将拥有所有文件。

如何在我的项目中实施此功能？

如何下载文件？我会使用react-native-fetch-blob库并将其保存在特定位置吗？该库指的是将其保存为＆＃34; cache＆＃34;而不是永久性的，所以我不确定这是否是正确的解决方案。我在图书馆页面上看到的具体部分是＆＃34;使用特定文件路径＆＃34;。但是因为它是缓存，我应该寻找更长期存储的其他东西吗？它确实在页面上说文件不会被删除，所以我对在这种情况下永久存储和缓存之间的区别有点困惑。

一旦文件被下载，我就可以打开图像并显示它们，打开声音文件并播放它们，然后打开json文件并处理它们？

Answer 1

查看React Native FS，特别是downloadFile:

上的文档

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

这是一个有效的例子：

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

了解必须在height

上设置width和Image非常重要

使用React Native下载数据文件以供脱机使用

1 个答案: