如何在React Native移动端接收浏览器分享的文件数据？

摘要 #

我有一个React Native移动端应用，需要接收其他应用分享的文件。

详情 #

作为React/React Native/Expo/Android开发新手，我尝试在自己的应用内接收文件，但不清楚具体实现代码。我按照以下步骤测试了一个示例项目：

准备工作 #

• 将移动设备连接到电脑，开启开发模式和调试，或准备好模拟器

移动端应用操作 #

在终端执行以下命令：

git clone https://github.com/dimaportenko/react-native-receive-share-file-tutorial
yarn install
yarn android

浏览器测试操作 #

1. 在手机浏览器中访问文件分享测试页面
2. 填写数据
3. 附加文件
4. 点击'Share'
5. 选择'rnrecievesharetutorial'应用
6. 此时应用显示的接收结果中，文件相关字段均为null，仅能看到文本内容：

Received Files Array [
Object {
"contentUri": null,
"extension": null,
"fileName": null,
"filePath": null,
"subject": "Credential Offer",
"text": "Choose a wallet to process this offer.",
"weblink": null,
},
]

已确认网站确实分享了文件数据：选择手机上的邮件/Gmail应用时，文件会作为附件添加。

问题 #

能否提供可获取文件数据的代码？

要正确获取分享的文件数据，需配置正确的intent过滤器并使用适配的库解析内容，以下是完整实现：

1. 安装依赖 #

使用react-native-receive-sharing-intent处理分享意图：

yarn add react-native-receive-sharing-intent

2. 配置AndroidManifest.xml #

在android/app/src/main/AndroidManifest.xml的主Activity中添加intent过滤器，确保应用能接收文件：

<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
  android:launchMode="singleTask"
  android:windowSoftInputMode="adjustResize">
  <!-- 接收单文件分享 -->
  <intent-filter>
      <action android:name="android.intent.action.SEND" />
      <category android:name="android.intent.category.DEFAULT" />
      <data android:mimeType="*/*" /> <!-- 支持所有文件类型，可按需修改为特定类型如image/* -->
  </intent-filter>
  <!-- 接收多文件分享 -->
  <intent-filter>
      <action android:name="android.intent.action.SEND_MULTIPLE" />
      <category android:name="android.intent.category.DEFAULT" />
      <data android:mimeType="*/*" />
  </intent-filter>
</activity>

3. 核心组件代码 #

在React Native组件中监听分享意图并获取文件数据：

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import ReceiveSharingIntent from 'react-native-receive-sharing-intent';

const FileReceiverScreen = () => {
  const [sharedFiles, setSharedFiles] = useState([]);

  useEffect(() => {
    // 监听单文件分享
    const singleFileSub = ReceiveSharingIntent.getFileReceivedListener((files) => {
      setSharedFiles(files);
    });

    // 监听多文件分享
    const multiFileSub = ReceiveSharingIntent.getFilesReceivedListener((files) => {
      setSharedFiles(files);
    });

    // 组件卸载时取消监听
    return () => {
      singleFileSub.remove();
      multiFileSub.remove();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>接收的文件</Text>
      <FlatList
        data={sharedFiles}
        keyExtractor={(item) => item.path}
        renderItem={({ item }) => (
          <View style={styles.fileItem}>
            <Text style={styles.fileName}>文件名: {item.name}</Text>
            <Text style={styles.fileDetail}>文件路径: {item.path}</Text>
            <Text style={styles.fileDetail}>MIME类型: {item.mimeType}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15
  },
  fileItem: {
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    marginBottom: 10
  },
  fileName: {
    fontSize: 16,
    marginBottom: 5
  },
  fileDetail: {
    fontSize: 14,
    color: '#666'
  }
});

export default FileReceiverScreen;

说明 #

• 代码会监听单文件和多文件分享，获取到的文件信息包含文件名、本地路径、MIME类型等核心数据，可基于这些数据进行文件读取、上传等后续操作
• 如果使用Expo框架，可替换为expo-sharing和expo-file-system实现类似逻辑，API调用方式略有差异但核心思路一致

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