React Native应用文件关联：如何获取通过打开方式传入的文件数据？

嘿，刚好我之前处理过完全一样的场景，已经搞定了Android和iOS的文件关联配置，但不知道怎么拿到外部打开时传入的文件数据对吧？下面给你分享两种靠谱的解决方式：

一、用现成的React Native库（最省心） #

首推react-native-receive-sharing-intent，这个库就是专门用来处理从其他App接收分享/打开的内容（包括各种格式的文件），完美适配iOS的「Open with...」和Android的「Complete action with」场景，不用自己写太多原生代码。

安装&使用步骤 #

1. 先装依赖：

npm install react-native-receive-sharing-intent --save
# 用yarn的话就是 yarn add react-native-receive-sharing-intent

React Native 0.60+版本会自动链接，旧版本记得跑一下react-native link。

2. 在组件里监听文件：

import ReceiveSharingIntent from 'react-native-receive-sharing-intent';

// 组件挂载时开始监听
useEffect(() => {
  // 监听单个文件
  const fileListener = ReceiveSharingIntent.getFile(path => {
    console.log('拿到的文件路径：', path);
    // 这里就可以处理文件了——读取内容、上传啥的都ok
  });

  // 如果要监听多个文件，就用getFiles
  const filesListener = ReceiveSharingIntent.getFiles(files => {
    console.log('拿到的文件列表：', files);
    // files是数组，每个元素包含path、mimeType这些信息
  });

  // 别忘了组件卸载时清掉监听
  return () => {
    ReceiveSharingIntent.clearFileListeners();
  };
}, []);

3. 处理App未启动时被打开的情况：
   如果你的App是完全关闭状态，通过外部文件触发启动，上面的监听可能拿不到初始数据，得用getInitialFile：

useEffect(() => {
  ReceiveSharingIntent.getInitialFile()
    .then(path => {
      if (path) {
        console.log('启动时收到的文件：', path);
      }
    })
    .catch(err => console.error('获取初始文件失败：', err));
}, []);

二、自定义原生模块（适合需要定制化的场景） #

如果你不想依赖第三方库，或者需要更灵活的处理，可以自己写原生代码获取文件路径，再通过桥接传给React Native的JS层。

Android端实现 #

在你的MainActivity里，重写onCreate和onNewIntent方法，获取Intent里的文件Uri，转成路径后发给JS：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  handleIncomingFile(getIntent());
}

@Override
protected void onNewIntent(Intent intent) {
  super.onNewIntent(intent);
  handleIncomingFile(intent);
}

private void handleIncomingFile(Intent intent) {
  if (Intent.ACTION_VIEW.equals(intent.getAction()) && intent.getType() != null) {
    Uri fileUri = intent.getData();
    if (fileUri != null) {
      String filePath = getRealFilePathFromUri(fileUri);
      // 把路径通过事件发给JS
      sendEventToJS("fileReceived", filePath);
    }
  }
}

// 把Uri转成真实文件路径的辅助方法
private String getRealFilePathFromUri(Uri uri) {
  String[] projection = {MediaStore.Files.FileColumns.DATA};
  Cursor cursor = getContentResolver().query(uri, projection, null, null, null);
  if (cursor == null) return uri.getPath();
  
  int columnIndex = cursor.getColumnIndexOrThrow(MediaStore.Files.FileColumns.DATA);
  cursor.moveToFirst();
  String path = cursor.getString(columnIndex);
  cursor.close();
  return path;
}

// 发送事件给JS的方法
private void sendEventToJS(String eventName, String data) {
  ReactContext reactContext = getReactInstanceManager().getCurrentReactContext();
  if (reactContext != null) {
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
      .emit(eventName, data);
  }
}

然后在JS里监听这个事件：

import { NativeEventEmitter, NativeModules } from 'react-native';

const fileEventEmitter = new NativeEventEmitter(NativeModules.MainActivity);
fileEventEmitter.addListener('fileReceived', filePath => {
  console.log('原生传来的文件路径：', filePath);
});

iOS端实现 #

在AppDelegate.m里重写application:openURL:options:和application:continueUserActivity:restorationHandler:方法，拿到文件路径后发给JS：

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  NSString *filePath = url.path;
  [self sendEventToJS:@"fileReceived" withData:filePath];
  return YES;
}

// 处理Universal Links的情况（如果配置了的话）
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb]) {
    NSURL *url = userActivity.webpageURL;
    NSString *filePath = url.path;
    [self sendEventToJS:@"fileReceived" withData:filePath];
  }
  return YES;
}

// 发送事件给JS的方法
- (void)sendEventToJS:(NSString *)eventName withData:(NSString *)data {
  RCTBridge *bridge = [RCTBridge currentBridge];
  [bridge.eventDispatcher sendAppEventWithName:eventName body:data];
}

JS端同样用NativeEventEmitter监听事件就可以了。

一些注意点 #

• 确保你已经正确配置了Android的intent-filter和iOS的CFBundleDocumentTypes，不然App不会出现在打开菜单里哦。
• Android 10+因为Scoped Storage的限制，直接操作文件路径可能会有权限问题，建议用ContentResolver读取文件内容，而不是硬操作路径。
• iOS如果文件来自iCloud，得先下载到本地再处理，可以用NSFileManager的相关方法来实现。

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