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

问题现象

在 React Native 开发中，当使用 Expo 并结合 React Compiler 时，react-native-video 组件会出现无法渲染的问题。开发者报告称，在调试模式下甚至无法在组件树中看到该组件的存在。

问题复现

该问题可以通过以下步骤复现：

1. 创建一个 Expo 项目
2. 启用 React Compiler 功能
3. 引入 react-native-video 组件
4. 运行 Android 应用

技术分析

经过深入调查，发现问题根源在于 React Compiler 处理模块导入时的特殊行为。当 React Compiler 启用时，模块导入机制出现了异常：

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

解决方案

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

方案一：修改导入方式

在 react-native-video 的源码中，增加命名导出：

export {Video}
export default Video;

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

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

方案二：临时禁用 React Compiler

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

{
  "experiments": {
    "reactCompiler": false
  }
}

深入理解

这个问题揭示了 React Compiler 在处理默认导出时的一个潜在问题。React Compiler 作为优化工具，可能会改变模块的导入解析方式，导致某些特殊结构的模块无法正常工作。

对于库开发者来说，最佳实践是同时提供默认导出和命名导出，以增加库的兼容性。对于应用开发者，在遇到类似问题时，可以尝试以下排查步骤：

1. 检查组件是否被正确导入
2. 尝试不同的导入方式（默认导入 vs 命名导入）
3. 在简单示例中验证组件是否正常工作
4. 检查编译工具的特殊配置

总结

react-native-video 组件在 React Compiler 下的渲染问题，本质上是一个模块系统兼容性问题。通过调整导出/导入方式可以解决当前问题，但长期来看，需要 React Compiler 团队进一步完善对各类模块导入模式的支持。

对于开发者而言，在采用新编译工具时，应当注意测试所有依赖组件的兼容性，特别是那些同时涉及 JavaScript 和原生代码的跨平台组件。