反応ネイティブの既定のアプリケーションでデバイス上のファイル（pdf、word、excel、pngなど）を開く

Question

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; 

Answer 1

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

コード：

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