web-dev-qa-db-ja.com

デフォルトのアプリケーションがreact-nativeであるデバイスでファイル（pdf、Word、Excel、pngなど）を開きます

react-native-fs を使用してファイル（pdf、Word、Excel、pngなど）をダウンロードしていますが、他のアプリケーションで開く必要があります。ダウンロードしたファイルを Linking で開くことは可能ですか、それとも Sharing を使用する場合のように可能なアプリでダイアログを開く方が良いですか？以下のコードのLinkingはファイルを開こうとしますが、通知なしにすぐに閉じますが、アプリは引き続き正常に動作しています。特定のファイルタイプのディープリンク用のURLを作成する特別な方法はありますか？最良の解決策について何かアイデアはありますか？

古いパッケージ react-native-file-opener があるようですが、メンテナンスされていません。この解決策は素晴らしいでしょう。

ダウンロードコンポーネントの簡略化されたコード：

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;
androidiosreact-nativereact-native-fetch-blobreact-native-fs
5
mradziwon

いくつかの調査の後、私は react-native-fetch-blob を使用することにしました。バージョン0.9.0から、ダウンロードしたファイルを Intent で開き、Download Managerを使用することができます。また、ドキュメントを開くための iOS用API もあります。

今すぐコーディング：

...
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')}
...
}
4
mradziwon