React Native Video 组件在 React Compiler 启用时的渲染问题分析

问题现象

在使用 Expo 开发环境并启用 React Compiler 时，开发者发现 react-native-video 组件无法正常渲染。调试过程中发现该组件甚至不会出现在组件树中，导致视频播放功能完全失效。

问题定位

经过技术分析，这个问题源于 React Compiler 与 react-native-video 组件的交互方式。当启用 React Compiler 时，模块导入机制出现了异常行为：

1. 正常情况下，应该导入的是 react-native-video 的 JavaScript 模块
2. 但在 React Compiler 启用时，却直接导入了原生模块(RCTVideo)

通过调试日志可以观察到这一现象：

import Video from 'react-native-video';
console.log('Video', Video);  // 输出显示为 RCTVideo 而非预期的 JS 模块

临时解决方案

目前有两种可行的临时解决方案：

方案一：修改导入方式

1. 首先需要在 react-native-video 库中修改导出方式：

// 在 src/index.ts 中添加命名导出
export {Video}
export default Video;

2. 然后在应用代码中使用命名导入：

import {Video} from 'react-native-video';

方案二：禁用 React Compiler

在 app.json 配置文件中移除 React Compiler 的实验性配置：

{
  "experiments": {
-    "reactCompiler": true
  }
}

技术原理分析

这个问题本质上反映了 React Compiler 在处理默认导出时的特殊行为。在传统的模块系统中，默认导出会被视为一个特殊的"default"命名导出，而 React Compiler 可能对此处理方式有所不同，导致直接获取了原生模块而非预期的 JavaScript 包装组件。

对于 react-native-video 这样的跨平台组件，JavaScript 层实际上是对原生模块的封装和抽象，提供了统一的 API 接口。当这一层被绕过时，直接使用原生模块会导致 React 无法正确识别和处理组件。

最佳实践建议

1. 组件库开发：建议组件库同时提供默认导出和命名导出，以增加兼容性
2. 应用开发：在使用实验性功能时，应该对关键组件进行充分测试
3. 问题追踪：关注 React Compiler 的后续更新，这个问题可能会在未来的版本中得到修复

总结

这个问题展示了实验性功能与现有生态系统的兼容性挑战。作为开发者，在采用新技术时需要平衡创新与稳定性，同时组件库开发者也需要考虑如何提高组件的鲁棒性以应对各种使用场景。目前建议采用命名导入的临时解决方案，或者暂时禁用 React Compiler 功能。