Ouvrir un fichier (pdf, word, excel, png etc.) sur l'appareil avec son application par défaut dans react-native

Question

J'utilise react-native-fs pour télécharger un fichier (pdf, word, excel, png etc.) et j'ai besoin pour l'ouvrir dans une autre application. Est-il possible d'ouvrir le fichier téléchargé avec Linking ou mieux ouvrir une boîte de dialogue avec des applications possibles, comme lors de l'utilisation Sharing? Linking dans le code ci-dessous essaie d'ouvrir le fichier, mais il se ferme immédiatement sans aucune notification, mais mon application fonctionne toujours bien. Existe-t-il un moyen spécial de créer des URL pour les liens profonds pour un type de fichier spécifique? Des idées pour la meilleure solution?

Je vois qu'il y a un ancien paquet react-native-file-opener mais il n'est plus maintenu. Cette solution serait géniale.

Code simplifié pour le composant de téléchargement:

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

Après quelques recherches, j'ai décidé d'utiliser react-native-fetch-blob. À partir de la version 0.9.0, il est possible d'ouvrir le fichier téléchargé avec Intent et d'utiliser Download Manager. Il a également API for iOS pour ouvrir des documents.

par code:

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