React Native File Viewer报错：无关联应用处理该MIME类型

问题背景 #

使用react-native-file-viewer和react-native-fs预览URL文件时，带.jpg后缀的图片能正常打开，但预览API返回的无后缀图片时触发报错：

error Error: No app associated with this mime type
    at index.js:25:33
    at EventEmitter.emit (_EventEmitter.js:150:33)
    at MessageQueue.__callFunction (MessageQueue.js:417:27)
    at MessageQueue.js:114:12
    at MessageQueue.__guard (MessageQueue.js:368:9)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:113:10)
    at debuggerWorker.js:69:58

原实现代码：

import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import FileViewer from "react-native-file-viewer";
import RNFS from "react-native-fs";

export default class FileViewerSample extends Component {
  onPress = async () => {
    const url = "https://{{baseurl}}/downloadDocument/2870348";

    const f2 = url.split("/");
    const fileName = f2[f2.length - 1];
    const localFile = `${RNFS.DocumentDirectoryPath}/${fileName}`;
    const options = {
      fromUrl: url,
      toFile: localFile,
    };

    RNFS.downloadFile(options)
      .promise.then(() => FileViewer.open(localFile))
      .then(() => {})
      .catch((error) => {});
  };

  render() {
    return (
      <View
        style={{
          alignItems: "center",
          justifyContent: "center",
          flex: 1,
        }}>
        <TouchableOpacity
          onPress={this.onPress}
          style={{ backgroundColor: "gray", padding: 20 }}>
          <Text style={{ fontSize: 25 }}> App </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

问题原因 #

无后缀的本地文件无法被系统识别对应的MIME类型，导致FileViewer找不到合适的应用来打开文件。

解决方案 #

方案1：已知文件类型时直接指定后缀 #

如果明确知道API返回的是JPG图片，下载时直接给文件名添加.jpg后缀，确保系统能识别MIME类型。修改后的代码：

import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import FileViewer from "react-native-file-viewer";
import RNFS from "react-native-fs";

export default class FileViewerSample extends Component {
  onPress = async () => {
    const url = "https://{{baseurl}}/downloadDocument/2870348";

    // 用时间戳生成唯一文件名并添加.jpg后缀
    const fileName = `${Date.now()}.jpg`;
    const localFile = `${RNFS.DocumentDirectoryPath}/${fileName}`;
    const options = {
      fromUrl: url,
      toFile: localFile,
    };

    try {
      await RNFS.downloadFile(options).promise;
      await FileViewer.open(localFile);
      // 预览成功后的逻辑
    } catch (error) {
      console.error("预览失败:", error);
    }
  };

  render() {
    return (
      <View
        style={{
          alignItems: "center",
          justifyContent: "center",
          flex: 1,
        }}>
        <TouchableOpacity
          onPress={this.onPress}
          style={{ backgroundColor: "gray", padding: 20 }}>
          <Text style={{ fontSize: 25 }}>打开图片</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

方案2：动态获取文件类型（通用方案） #

如果不确定文件类型，可先发送HEAD请求获取响应头中的Content-Type，再映射对应的文件后缀：

import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import FileViewer from "react-native-file-viewer";
import RNFS from "react-native-fs";

export default class FileViewerSample extends Component {
  onPress = async () => {
    const url = "https://{{baseurl}}/downloadDocument/2870348";
    
    try {
      // 发送HEAD请求获取文件类型
      const headResponse = await fetch(url, { method: "HEAD" });
      const contentType = headResponse.headers.get("Content-Type");
      
      // 映射Content-Type到文件后缀
      const extMapping = {
        "image/jpeg": ".jpg",
        "image/png": ".png",
        "image/gif": ".gif",
        "application/pdf": ".pdf",
        // 可根据需求添加更多类型映射
      };
      const fileExt = extMapping[contentType] || ".bin"; // 默认二进制文件后缀
      
      // 生成唯一文件名
      const fileName = `${Date.now()}${fileExt}`;
      const localFile = `${RNFS.DocumentDirectoryPath}/${fileName}`;
      
      // 下载并预览
      await RNFS.downloadFile({ fromUrl: url, toFile: localFile }).promise;
      await FileViewer.open(localFile);
    } catch (error) {
      console.error("处理失败:", error);
    }
  };

  render() {
    return (
      <View
        style={{
          alignItems: "center",
          justifyContent: "center",
          flex: 1,
        }}>
        <TouchableOpacity
          onPress={this.onPress}
          style={{ backgroundColor: "gray", padding: 20 }}>
          <Text style={{ fontSize: 25 }}>打开文件</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

内容的提问来源于stack exchange，提问作者Mark henry