React Native如何展示卡片附件文件？现有方案均失效求解决

方案1：使用expo-file-viewer（推荐） #

这是Expo官方提供的专门用于打开本地文件的工具库，支持iOS和Android，能适配PDF、图片、文本等多种文件类型，会自动调用系统对应应用打开文件。

操作步骤： #

1. 安装依赖：

npx expo install expo-file-viewer

2. 修改openAttachment函数，替换原有的Sharing.shareAsync(uri)：

import * as FileViewer from 'expo-file-viewer';

// ... 原有下载缓存代码保持不变 ...

console.log('Opening file ' + uri);
// 替换原分享逻辑为文件打开操作
await FileViewer.openAsync(uri, {
  displayName: attachment.name, // 可选：指定文件显示名称
});

方案2：针对特定文件类型在App内直接展示 #

如果不需要调用系统应用，想在App内直接呈现内容，可以按文件类型选择对应组件：

图片文件： #

用Expo原生Image组件加载本地URI：

import { Image, Modal, View } from 'react-native';
import { useState } from 'react';

// 假设组件内有状态控制模态框显示
const [visibleImage, setVisibleImage] = useState(null);

// 在openAttachment中判断文件类型
if (attachment.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
  setVisibleImage(uri);
}

// 模态框展示示例
<Modal visible={!!visibleImage} onRequestClose={() => setVisibleImage(null)}>
  <View style={{ flex: 1, backgroundColor: 'black' }}>
    <Image source={{ uri: visibleImage }} style={{ flex: 1, resizeMode: 'contain' }} />
  </View>
</Modal>

文本文件： #

先读取文件内容，再用Text组件展示：

import * as FileSystem from 'expo-file-system';
import { Modal, ScrollView, Text } from 'react-native';
import { useState } from 'react';

const [visibleText, setVisibleText] = useState(null);

if (attachment.name.match(/\.(txt|md|json)$/i)) {
  const content = await FileSystem.readAsStringAsync(uri);
  setVisibleText(content);
}

// 模态框展示示例
<Modal visible={!!visibleText} onRequestClose={() => setVisibleText(null)}>
  <ScrollView style={{ flex: 1, padding: 16 }}>
    <Text>{visibleText}</Text>
  </ScrollView>
</Modal>

PDF文件： #

使用expo-pdf组件在App内直接渲染：

1. 安装依赖：

npx expo install expo-pdf

2. 渲染PDF：

import { PDFView } from 'expo-pdf';
import { Modal, View } from 'react-native';
import { useState } from 'react';

const [visiblePdfUri, setVisiblePdfUri] = useState(null);

if (attachment.name.endsWith('.pdf')) {
  setVisiblePdfUri(uri);
}

// 模态框展示示例
<Modal visible={!!visiblePdfUri} onRequestClose={() => setVisiblePdfUri(null)}>
  <View style={{ flex: 1 }}>
    <PDFView style={{ flex: 1 }} source={{ uri: visiblePdfUri }} />
  </View>
</Modal>

方案3：Android端使用expo-intent-launcher（备选） #

如果上述方案不满足需求，Android端可以通过Intent直接调用系统应用打开文件：

1. 安装依赖：

npx expo install expo-intent-launcher

2. 调用代码：

import * as IntentLauncher from 'expo-intent-launcher';

// 仅Android可用
await IntentLauncher.startActivityAsync('android.intent.action.VIEW', {
  data: uri,
  flags: 1 << 27, // 授予应用读取URI的权限
});

注意事项 #

• 务必使用FileSystem.getContentUriAsync转换本地文件URI，系统应用才能正常访问缓存文件。
• 判断文件类型时，优先使用FileSystem.getInfoAsync返回的mimeType属性，比文件名后缀更准确。

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