Open a file (pdf, word, excel, png etc.) on device with its default application in react-native

问题

I'm using react-native-fs to download a file(pdf, word, excel, png etc.) and I need to open it in other application. Is it possible to open downloaded file with Linking or better open a dialog with possible apps like when using Sharing? Linking in the code below tries to open the file but it closes immediately without any notification, but my app is still working fine. Is there some special way to build URLs for deep linking for a specific file type? Any ideas for the best solution?

I see that there is old package react-native-file-opener but it's no longer maintained. This solution would be great.

Simplified code for download component:

import React, { Component } from 'react';
import { Text, View, Linking, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
import RNFS from 'react-native-fs';

import { showToast } from '../../services/toasts';

class DownloadFile extends Component {
  state = {
    isDone: false,
  };

  handleDeepLinkPress = (url) => {
    Linking.openURL(url).catch(() => {
      showToast('defaultError');
    });
  };

  handleDownloadFile = () => {
    RNFS.downloadFile({
      fromUrl: 'https://www.toyota.com/content/ebrochure/2018/avalon_ebrochure.pdf',
      toFile: `${RNFS.DocumentDirectoryPath}/car.pdf`,
    }).promise.then(() => {
      this.setState({ isDone: true });
    });
  };

  render() {
    const preview = this.state.isDone
      ? (<View>
        <Icon
          raised
          name="file-image-o"
          type="font-awesome"
          color="#f50"
          onPress={() => this.handleDeepLinkPress(`file://${RNFS.DocumentDirectoryPath}/car.pdf`)}
        />
        <Text>{`file://${RNFS.DocumentDirectoryPath}/car.pdf`}</Text>
      </View>)
      : null;
    return (
      <View>
        <TouchableOpacity onPress={this.handleDownloadFile}>
          <Text>Download File</Text>
        </TouchableOpacity>
        {preview}
      </View>
    );
  }
}

export default DownloadFile;

回答1:

After some research, I decided to use react-native-fetch-blob. From version 0.9.0 it's possible to open downloaded file with Intent and use Download Manager. It also has API for iOS for opening documents.

Code now:

...
const dirs = RNFetchBlob.fs.dirs;
const android = RNFetchBlob.android;
...

  handleDownload = () => {
    RNFetchBlob.config({
      addAndroidDownloads: {
        title: 'CatHat1.jpg',
        useDownloadManager: true,
        mediaScannable: true,
        notification: true,
        description: 'File downloaded by download manager.',
        path: `${dirs.DownloadDir}/CatHat1.jpg`,
      },
    })
      .fetch('GET', 'http://www.swapmeetdave.com/Humor/Cats/CatHat1.jpg')
      .then((res) => {
        this.setState({ path: res.path() });
      })
      .catch((err) => console.log(err));
  };

...
render() {
...
        <Icon
          raised
          name="file-pdf-o"
          type="font-awesome"
          color="#f50"
          onPress={() => android.actionViewIntent(this.state.path, 'image/jpg')}
...
}

来源：https://stackoverflow.com/questions/46180225/open-a-file-pdf-word-excel-png-etc-on-device-with-its-default-application

标签

android

ios

react-native

react-native-fetch-blob

react-native-fs