DownloadManager

Question

我正在使用expo FileSystem下载pdf文件。 API响应成为成功函数。但是，我无法将下载的文件显示给用户。

预期的行为应该像我们通常在状态栏上看到通知图标一样，点击图标会打开您的文件。

FileSystem.downloadAsync(
  'https://bitcoin.org/bitcoin.pdf',
  FileSystem.documentDirectory + 'Stay_Overview.xlsx'
).then(({ uri }) => {
   console.log('Finished downloading to ', uri);
})
 .catch(error => {
    console.error(error);
 });

Answer 1

这个有一个或两个技巧，但这是使用Expo的一种解决方案，它可以在iOS和Android上使用。

在新的Expo项目中，修改以下两个文件：

App.js

import React, { Component } from 'react';
import { View, ScrollView, StyleSheet, Button, Alert, Platform, Text, TouchableWithoutFeedback } from 'react-native';
import { FileSystem, Constants, Notifications, Permissions } from 'expo';
import Toast, {DURATION} from 'react-native-easy-toast';

async function getiOSNotificationPermission() {
  const { status } = await Permissions.getAsync(
    Permissions.NOTIFICATIONS
  );
  if (status !== 'granted') {
    await Permissions.askAsync(Permissions.NOTIFICATIONS);
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    // this.toast = null;
    this.listenForNotifications = this.listenForNotifications.bind(this);
    // this.openFile = this.openFile.bind(this);
    this.state = {
      filePreviewText: ''
    }
  }

  _handleButtonPress = () => {
    let fileName = 'document.txt';
    let fileUri = FileSystem.documentDirectory + fileName;
    FileSystem.downloadAsync(
      "https://raw.githubusercontent.com/expo/expo/master/README.md",
      fileUri
    ).then(({ uri }) => {
      console.log('Finished downloading to ', uri);

      const localnotification = {
        title: 'Download has finished',
        body: fileName + " has been downloaded. Tap to open file.",
        android: {
          sound: true,
        },
        ios: {
          sound: true,
        },

        data: {
          fileUri: uri
        },
      };
      localnotification.data.title = localnotification.title;
      localnotification.data.body = localnotification.body;
      let sendAfterFiveSeconds = Date.now();
      sendAfterFiveSeconds += 3000;

      const schedulingOptions = { time: sendAfterFiveSeconds };
      Notifications.scheduleLocalNotificationAsync(
        localnotification,
        schedulingOptions
      );
    })
    .catch(error => {
        console.error(error);
        Alert.alert(error);
    });
  };
  listenForNotifications = () => {
    const _this = this;

    Notifications.addListener(notification => {
      if (notification.origin === 'received') {
        // We could also make our own design for the toast
        // _this.refs.toast.show(<View><Text>hello world!</Text></View>);

        const toastDOM = 
          <TouchableWithoutFeedback 
            onPress={() => {this.openFile(notification.data.fileUri)}}
            style={{padding: '10', backgroundColor: 'green'}}>
            <Text style={styles.toastText}>{notification.data.body}</Text>
          </TouchableWithoutFeedback>;

        _this.toast.show(toastDOM, DURATION.FOREVER);
      } else if (notification.origin === 'selected') {
        this.openFile(notification.data.fileUri);
      }
        // Expo.Notifications.setBadgeNumberAsync(number);
        // Notifications.setBadgeNumberAsync(10);
        // Notifications.presentLocalNotificationAsync(notification);
        // Alert.alert(notification.title, notification.body);
    });
  };
  componentWillMount() {
    getiOSNotificationPermission();
    this.listenForNotifications();
  }
  componentDidMount() {
    // let asset = Asset.fromModule(md);
    // Toast.show('Hello World');
  }
  openFile = (fileUri) => {
    this.toast.close(40);
    console.log('Opening file ' + fileUri);
    FileSystem.readAsStringAsync(fileUri)
    .then((fileContents) => {
      // Get file contents in binary and convert to text
      // let fileTextContent = parseInt(fileContents, 2);
      this.setState({filePreviewText: fileContents});
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonsContainer}>
          <Button style={styles.button}
            title={"Download text file"}
            onPress={this._handleButtonPress}
          />
          <Button style={styles.button}
            title={"Clear File Preview"}
            onPress={() => {this.setState({filePreviewText: ""})}}
          />
        </View>
        <ScrollView style={styles.filePreview}>
          <Text>{this.state.filePreviewText}</Text>
        </ScrollView>
        <Toast ref={ (ref) => this.toast=ref }/>
      </View>
    );
            // <Toast
        //   ref={ (ref) => this.toast=ref }
        //   style={{backgroundColor:'green'}}
        //   textStyle={{color:'white'}}
        //   position={'bottom'}
        //   positionValue={100}
        //   opacity={0.8}
        // />
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  buttonsContainer: {
    flexDirection: 'row',
  },
  button: {
    flex: 1
  },
  filePreview: {
    flex: 1,
    padding: 10,
  },
  toastText: {
    color: 'white',
    padding: 5,
    justifyContent: 'flex-start',
  },
});

package.json：添加以下依赖项（react-native-easy-toast的分支）

"react-native-easy-toast": "git+https://github.com/SiavasFiroozbakht/react-native-easy-toast.git"

有关此解决方案的一些重要说明：

最常使用Expo API，用于外部本地通知以及文件的读写操作，这限制了当前解决方案to being unable写入Expo自己目录以外的其他位置。
下载文件后，如果应用程序处于活动状态（Expo当前不支持前台通知），则向用户显示可自定义的Toast，或者发送本地推送通知以使用户知道下载的内容完成。单击这两者中的任何一个，将使用<Text>组件在视图中显示文件的内容。
crazycodeboy/react-native-easy-toast回购由于吐司的限制而未直接使用，这是当前不考虑触摸事件的原因。在原始请求中执行合并请求之前，分叉的仓库使此功能可用。我建议一旦修补后再切换回原始版本，因为我可能不会维护我的版本。
尽管Snack中的这个项目is also available，但是如上所述，由于package.json中需要using a git repository，并且在变量作用域上存在其他明显的矛盾，因此它无法运行。这可以通过合并请求或Snack中的新功能来解决。
可能支持其他文件类型，例如by Expo itself或通过外部软件包，例如this PDF viewer。但是，必须进一步修改代码。
吐司（内部通知）是使用TouchableWithoutFeedback组件创建的，尽管React Native中有other similar ones有所不同。可以在代码中自定义此组件（搜索toastDOM），但以后可以通过Expo中的内部通知自定义might even be replaceable。
最后，文件下载后，通知会故意延迟三秒钟–这使我们可以在应用程序处于后台时测试通知。随时删除延迟和trigger the notification immediately。

就是这样！我认为这为使用Expo进行文件下载和预览提供了一个很好的起点。

代码库also available on GitHub。

Answer 2

DownloadManager

我相信您希望使用DownloadManager处理Android上的下载（请注意，没有适用于iOS的DownloadManager，因此您必须以不同的方式处理）DownloadManager要么将文件保存为共享文件，系统缓存，否则会将其保存到外部存储中。

但是，目前我不认为Expo允许您使用DownloadManager，而是自己处理所有下载。原因可能是Expo不允许您访问外部存储，如文档中所述：

每个应用程序仅具有对以下目录下位置的读写权限：


Expo.FileSystem.documentDirectory

Expo.FileSystem.cacheDirectory

https://docs.expo.io/versions/latest/sdk/filesystem

因此，一旦下载，便无法访问Expo中的文件。

可能的解决方案

可能的解决方案是使用React-Native Fetch Blob。它确实允许您使用DownloadManager。 https://github.com/joltup/rn-fetch-blob#android-media-scanner-and-download-manager-support

通过将rn-fetch-blob键设置为true，将addAndroidDownloads设置为useDownloadManager，即可使用DownloadManager。

但是，这意味着要从Expo中弹出您的应用。

Expo.FileSystem.downloadAsync不显示下载通知

2 个答案:

DownloadManager

可能的解决方案