React Native WebView触发导航崩溃：RCTComponentViewRegistry异常

API 探路者

2026-6-20

React Native WebView onMessage回调内导航导致崩溃的解决方案

崩溃的核心原因是WebView的onMessage回调运行在非主线程，而React Navigation的导航操作属于UI更新，必须在主线程执行，这就触发了RCTComponentViewRegistry的异常。按钮点击的onPress回调本身就在主线程执行，所以不会出现这个问题。

解决方案1：将导航操作切换到主线程执行

React Native提供了多种方式将代码调度到主线程，优先推荐InteractionManager.runAfterInteractions（确保所有交互完成后执行），也可以用setTimeout（0延迟即可将任务放入主线程队列）。

修改你的onEventComplete函数：

import { InteractionManager } from 'react-native';

const onEventComplete = () => {
  InteractionManager.runAfterInteractions(() => {
    navigation.push('SomeScreen', { autoRecord: true });
  });
};

或者使用简化的setTimeout写法：

const onEventComplete = () => {
  setTimeout(() => {
    navigation.push('SomeScreen', { autoRecord: true });
  }, 0);
};

解决方案2：增加组件挂载状态校验（可选）

如果WebView所在组件可能在事件触发前卸载，建议增加挂载状态校验，避免在组件销毁后执行导航操作：

import { useRef, useEffect, InteractionManager } from 'react';

const isMounted = useRef(true);

useEffect(() => {
  return () => {
    isMounted.current = false;
  };
}, []);

const onEventComplete = () => {
  InteractionManager.runAfterInteractions(() => {
    if (isMounted.current) {
      navigation.push('SomeScreen', { autoRecord: true });
    }
  });
};