android - 使用 React Native 下载数据文件以供离线使用

Question

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

• 一个或多个JSON文件
• 图片
• 声音

现在我不太关心这些文件是单独传输还是在 zip 文件中传输(尽管 zip 文件肯定是首选)。当然，设备需要连接到互联网才能获取当前游戏包列表并下载用户选择的游戏包。一旦游戏包下载到手机上，用户将不需要互联网连接来玩游戏，因为他们将拥有所有文件。

我该如何在我的项目中实现它？

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

下载文件后，我是否可以打开图像并显示它们、打开声音文件并播放它们以及打开 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 上设置