React Native应用接收TikTok视频分享的实现方案问询

核心原理 #

TikTok在向其他App分享内容时，除了传递视频URL，还会通过系统分享机制同步提供视频文件本身（iOS通过UTI标识、Android通过MIME类型）。react-native-receive-sharing-intent默认只抓取了URL类型的数据，未处理文件流；而Instagram、Snapchat这类App是直接监听了系统分享的文件类型，并非依赖TikTok的私有API。

React Native端实现步骤 #

1. iOS原生模块扩展 #

修改项目中的AppDelegate.m，监听系统分享的视频文件数据：

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    // 保留原有URL处理逻辑
    NSItemProvider *itemProvider = options[UIApplicationOpenURLOptionsItemProviderKey];
    if ([itemProvider hasItemConformingToTypeIdentifier:@"public.movie"]) {
        [itemProvider loadObjectOfClass:[NSURL class] completionHandler:^(id _Nullable object, NSError * _Nullable error) {
            NSURL *videoURL = (NSURL *)object;
            // 将视频路径传递给RN层
            RCTRootView *rootView = (RCTRootView *)self.window.rootViewController.view;
            [rootView.appBridge.environment injectJavaScript:[NSString stringWithFormat:@"NativeModules.TikTokShareReceiver.receiveVideo('%@')", videoURL.path]];
        }];
    }
    return YES;
}

同时创建RN原生模块TikTokShareReceiver，负责将视频路径传递至JS层。

2. Android原生模块扩展 #

在MainActivity中重写onNewIntent方法，获取分享的视频Uri并转换为真实路径：

@Override
protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    String action = intent.getAction();
    String type = intent.getType();
    if (Intent.ACTION_SEND.equals(action) && type != null && type.startsWith("video/")) {
        Uri videoUri = intent.getParcelableExtra(Intent.EXTRA_STREAM);
        if (videoUri != null) {
            String videoPath = getRealPathFromURI(videoUri);
            ReactInstanceManager manager = getReactInstanceManager();
            ReactContext context = manager.getCurrentReactContext();
            if (context != null) {
                context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("onTikTokVideoReceived", videoPath);
            }
        }
    }
}

// 实现Uri转真实文件路径的工具方法
private String getRealPathFromURI(Uri contentUri) {
    String[] proj = {MediaStore.Video.Media.DATA};
    Cursor cursor = getContentResolver().query(contentUri, proj, null, null, null);
    int columnIndex = cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DATA);
    cursor.moveToFirst();
    String path = cursor.getString(columnIndex);
    cursor.close();
    return path;
}

3. React Native JS层处理 #

监听原生模块传递的视频路径事件：

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

// iOS监听逻辑
const TikTokShareReceiver = NativeModules.TikTokShareReceiver;
// Android监听逻辑
const eventEmitter = new NativeEventEmitter(NativeModules.TikTokShareReceiver);
eventEmitter.addListener('onTikTokVideoReceived', (videoPath) => {
    console.log('收到TikTok视频文件路径:', videoPath);
    // 后续可对视频文件进行存储、播放等操作
});

关于私有API的说明 #

Instagram、Snapchat并未使用TikTok的私有API，它们只是严格遵循了iOS/Android的系统分享规范，直接处理了TikTok暴露给系统分享面板的视频文件资源。TikTok公开文档仅提及向TikTok分享内容的能力，但从TikTok分享至其他App属于系统级行为，TikTok本身会主动将视频文件提供给系统分享渠道。

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