iOS向React Native启动及运行时传值问题（邮件附件场景）

嘿，我明白你现在的困境——刚接触RN和iOS原生开发，想要在应用启动后（比如打开邮件附件时）把文件URL传递给RN，而不是只在启动时传。你之前尝试重新创建RCTRootView的方式确实不对，这就是为什么会出现那个TypeError的原因，因为RCTRootView初始化后直接替换会破坏RN的内部状态和渲染流程。下面给你两种靠谱的解决思路：

方法一：通过Native EventEmitter发送实时事件 #

这种方式适合应用已经处于前台（或从后台唤醒）时收到文件的场景，能实时通知RN端处理文件：

1. iOS原生端修改（AppDelegate.m） #

在openURL方法里，不要重新创建rootView，而是获取当前的RN桥接实例，发送自定义事件：

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    // 获取当前RN应用的桥接实例
    RCTBridge *bridge = [(RCTRootView *)self.window.rootViewController.view bridge];
    
    // 发送自定义事件给RN，事件名可以自己定义，比如"fileOpened"
    [[bridge eventDispatcher] sendAppEventWithName:@"fileOpened" 
                                              body:@{@"url": url.absoluteString}];
    
    NSLog(@"Open URL: %@", url);
    return YES;
}

2. React Native端监听事件 #

在RN组件里监听这个事件，收到后处理文件逻辑：

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

// 初始化事件发射器
const eventEmitter = new NativeEventEmitter();

const YourComponent = () => {
    useEffect(() => {
        // 监听fileOpened事件
        const subscription = eventEmitter.addListener(
            'fileOpened',
            (data) => {
                console.log('收到文件URL:', data.url);
                // 在这里实现打开邮件附件的逻辑
            }
        );

        // 组件卸载时取消订阅，避免内存泄漏
        return () => subscription.remove();
    }, []);

    return (
        // 你的组件内容
    );
};

export default YourComponent;

方法二：创建自定义Native Module主动获取URL #

这种方式让RN端可以主动向原生端请求文件URL，适合应用从后台被唤醒、需要在某个时机主动获取的场景：

1. 创建自定义Native Module（iOS端） #

首先新建FileManagerModule.h和FileManagerModule.m两个文件：

// FileManagerModule.h
#import <React/RCTBridgeModule.h>

@interface FileManagerModule : NSObject <RCTBridgeModule>
@property (nonatomic, strong) NSURL *openedFileURL;
@end

// FileManagerModule.m
#import "FileManagerModule.h"

@implementation FileManagerModule

// 注册模块，RN端可以通过NativeModules.FileManagerModule访问
RCT_EXPORT_MODULE();

// 暴露方法给RN，用于获取已打开的文件URL
RCT_EXPORT_METHOD(getOpenedFileURL:(RCTResponseSenderBlock)callback) {
    // 把URL传递给RN，如果没有则返回null
    callback(@[self.openedFileURL.absoluteString ?: [NSNull null]]);
}

@end

2. AppDelegate中保存URL到Module #

修改openURL方法，把收到的URL保存到自定义模块：

#import "FileManagerModule.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    // 获取自定义模块实例
    FileManagerModule *fileManager = [self.bridge moduleForClass:[FileManagerModule class]];
    // 保存收到的文件URL
    fileManager.openedFileURL = url;

    // 可选：同时发送事件通知RN
    [[self.bridge eventDispatcher] sendAppEventWithName:@"fileOpened" 
                                              body:@{@"url": url.absoluteString}];
    
    NSLog(@"Open URL: %@", url);
    return YES;
}

3. RN端调用Native Module获取URL #

在RN组件中主动调用模块方法获取URL：

import { NativeModules, useEffect } from 'react-native';
const { FileManagerModule } = NativeModules;

const YourComponent = () => {
    useEffect(() => {
        // 组件挂载时主动获取文件URL
        const fetchFileURL = async () => {
            const url = await FileManagerModule.getOpenedFileURL();
            if (url) {
                console.log('获取到的文件URL:', url);
                // 处理文件逻辑
            }
        };

        fetchFileURL();
    }, []);

    return (
        // 你的组件内容
    );
};

export default YourComponent;

额外补充 #

• 你之前在didFinishLaunchingWithOptions里的initialProperties可以保留，用来处理应用启动时直接打开文件的场景（比如从系统文件管理器直接打开应用）。
• 两种方法可以结合使用：用事件实时通知RN，用Native Module让RN在需要时主动获取，覆盖更多场景。

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