Android React Native：应用从杀死状态启动后如何发送打开成功事件？

我来帮你梳理下这个问题的核心原因，再给出具体的解决方案——你遇到的情况其实是应用冷启动（从杀死状态唤起）时，JS侧环境还未完全初始化，导致Native层发送的事件丢失，而后台状态下JS环境是存活的，Listener已经注册完成，所以能正常接收。

核心原因 #

当你的应用被invokeApp从杀死状态唤起时，Native层会先启动，但React Native的JS引擎、模块初始化需要时间。你此时在Native层发送appInvoked事件时，JS侧的NativeEventEmitter监听器还没完成注册，事件就直接丢失了。

解决方案 #

下面提供两种可靠的解决思路，你可以根据自己的项目情况选择：

方案一：Native层缓存事件，等JS环境就绪后再发送 #

在你的自定义NativeModule中维护一个事件缓存队列，当检测到JS环境未初始化时，先把事件参数存起来；等JS环境完全就绪后，再把缓存的事件发送出去。

Android 代码示例

// 你的RNInvokeAppModule类中
private static WritableMap cachedEvent;
private ReactContext reactContext;

@Override
public void initialize() {
    super.initialize();
    reactContext = getReactApplicationContext();
    
    // 监听React Context初始化完成事件
    reactContext.addReactInstanceEventListener(context -> {
        // JS环境就绪，发送缓存的事件
        if (cachedEvent != null) {
            context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit("appInvoked", cachedEvent);
            cachedEvent = null; // 清空缓存
        }
    });
}

// 修改原有的事件发送逻辑
public void sendAppOpenedEvent() {
    WritableMap paramsData = Arguments.createMap();
    paramsData.putString("eventProperty", "successfully opened");
    
    // 判断JS环境是否已初始化完成
    if (reactContext != null && reactContext.hasActiveCatalystInstance()) {
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("appInvoked", paramsData);
    } else {
        // 缓存事件，等待JS就绪后发送
        cachedEvent = paramsData;
    }
}

iOS 代码示例

// RNInvokeApp.m中
static NSDictionary *cachedEvent;
@property (nonatomic, weak) RCTBridge *bridge;

- (instancetype)initWithBridge:(RCTBridge *)bridge {
    self = [super initWithBridge:bridge];
    if (self) {
        self.bridge = bridge;
        // 监听Bridge加载完成
        [self.bridge addObserver:self forKeyPath:@"isLoading" options:NSKeyValueObservingOptionNew context:nil];
    }
    return self;
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"isLoading"] && ![self.bridge isLoading]) {
        // JS环境就绪，发送缓存事件
        if (cachedEvent) {
            [self.bridge.eventDispatcher sendAppEventWithName:@"appInvoked" body:cachedEvent];
            cachedEvent = nil;
        }
        [self.bridge removeObserver:self forKeyPath:@"isLoading"];
    }
}

- (void)sendAppOpenedEvent {
    NSDictionary *paramsData = @{@"eventProperty": @"successfully opened"};
    
    if (self.bridge && !self.bridge.isLoading) {
        [self.bridge.eventDispatcher sendAppEventWithName:@"appInvoked" body:paramsData];
    } else {
        cachedEvent = paramsData;
    }
}

方案二：JS侧主动查询Native层的缓存事件 #

另一种思路是，当JS模块初始化完成后，主动调用NativeModule的方法，询问是否有未发送的缓存事件，手动处理这些事件数据。

JS 代码示例（App.js中）

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

const RNInvokeApp = NativeModules.RNInvokeApp;
const eventEmitter = new NativeEventEmitter(RNInvokeApp);

function App() {
  useEffect(() => {
    // 注册事件监听器
    const eventListener = eventEmitter.addListener('appInvoked', (event) => {
      console.log('event invoked', event);
      // 这里处理事件逻辑
    });

    // 组件挂载后，主动查询Native层的缓存事件
    RNInvokeApp.getCachedEvent().then((cachedData) => {
      if (cachedData) {
        console.log('event invoked from cache', cachedData);
        // 手动触发监听器的回调
        eventListener(cachedData);
        // 通知Native层清空缓存
        RNInvokeApp.clearCachedEvent();
      }
    });

    return () => {
      eventListener.remove();
    };
  }, []);

  // ... 其他组件代码
}

export default App;

Native层补充方法（Android）

@ReactMethod
public void getCachedEvent(Promise promise) {
    if (cachedEvent != null) {
        promise.resolve(cachedEvent);
    } else {
        promise.resolve(null);
    }
}

@ReactMethod
public void clearCachedEvent() {
    cachedEvent = null;
}

Native层补充方法（iOS）

RCT_EXPORT_METHOD(getCachedEvent:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
    resolve(cachedEvent);
}

RCT_EXPORT_METHOD(clearCachedEvent) {
    cachedEvent = nil;
}

额外注意事项 #

• 确保你的NativeModule在应用冷启动时能被正确初始化：Android要在AndroidManifest.xml中配置对应的ReactPackage，iOS要在AppDelegate.m中完成模块注册。
• 测试时要确保应用处于完全杀死状态：Android通过最近应用列表划掉，iOS双击Home键划掉，避免误判为后台状态。

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