plugins: [ ['react-native-reanimated/plugin', { globals: ['__scanCodes'] // 确保包含所需功能 }] ] 什么意思

<think>我们正在讨论React Native Reanimated插件配置中的globals参数，特别是__scanCodes的作用。 根据引用[1][2][3][4]的配置示例，我们看到在babel.config.js中配置了： plugins: [ ['react-native-reanimated/plugin', { globals: ['__scanCodes'] // 或者 '__labelImage' 等 }] ] 这个配置的作用是什么？我们需要从Reanimated的工作原理和Babel插件的功能来分析。 1. Reanimated的工作机制： Reanimated库的核心功能是允许我们在UI线程上同步执行JavaScript代码（通过Worklets）。为了实现这一点，它需要将一些JavaScript函数标记为Worklet，并在构建时通过Babel插件进行转换。 2. Babel插件的作用： react-native-reanimated/plugin 这个Babel插件主要做两件事： a) 自动检测代码中使用了`worklet`声明的函数（例如：`function myWorklet() { 'worklet'; ... }`），并对它们进行转换，使其可以在UI线程运行。 b) 处理在globals配置项中指定的全局函数（如__scanCodes），将它们同样视为Worklet函数，即使它们没有显式的`'worklet';`指令。 3. 为什么需要globals配置？ 有些情况下，我们使用的第三方库可能已经提供了预编译的Worklet函数（比如vision-camera-code-scanner中的__scanCodes函数）。这些函数在库的代码中已经被标记为Worklet，但是它们是在我们的项目代码之外定义的。当我们引入这些库时，我们的项目代码中可能会直接调用这些函数（例如在组件的属性中指定一个worklet函数为__scanCodes）。然而，由于这些函数不是在当前项目源码中定义的，Babel插件默认不会处理它们（即不会将它们转换成Worklet函数）。这样就会导致运行时错误（函数没有被正确转换，无法在UI线程运行）。 通过globals配置，我们告诉Babel插件：即使你在当前项目源码中没有看到这些函数的定义，也要将它们当作Worklet函数来处理。这样，Babel插件会对这些函数的调用点进行转换，确保它们能够正确地在UI线程中运行。 4. 具体到__scanCodes： 从引用[1][2][3]中我们看到，配置中指定了globals: ['__scanCodes']。这个__scanCodes是vision-camera-code-scanner库中提供的一个函数，用于识别图像中的条形码/二维码。由于它是一个Worklet函数（需要在UI线程运行以实时处理相机帧），并且我们在使用它的时候可能是在组件的属性中直接引用（例如在VisionCamera的frameProcessor属性中），所以我们需要确保它被正确转换。 5. 配置方法： 在babel.config.js中，我们按照以下方式配置： module.exports = { plugins: [ ['react-native-reanimated/plugin', { globals: ['__scanCodes'] // 这里可以是一个数组，包含多个全局Worklet函数的名称 }] ] }; 6. 注意事项： - 不同的库可能提供不同的全局Worklet函数，因此需要查看库的文档来确定需要配置哪些函数名。例如，引用[4]中配置的是__labelImage，这可能是另一个图像识别库提供的函数。 - 如果没有正确配置，可能会遇到类似“__scanCodes is not a function”或“Tried to synchronously call a non-worklet function”的错误。 因此，配置globals: ['__scanCodes']的作用是确保第三方库（如vision-camera-code-scanner）提供的全局Worklet函数__scanCodes能够被Reanimated的Babel插件正确处理，从而在UI线程上运行。 引用[1][2][3]都提到了这个配置，说明在多个项目中都需要这样配置才能正确使用vision-camera-code-scanner库的扫码功能。 下面我们用一个简单的代码示例来说明使用场景： 在使用了VisionCamera和vision-camera-code-scanner的项目中，我们可能会这样写： ```javascript import { useCameraDevices } from 'react-native-vision-camera'; import { Camera } from 'react-native-vision-camera'; import { useScanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner'; export default function App() { const devices = useCameraDevices(); const device = devices.back; const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], { checkInverted: true, }); // 这里useScanBarcodes返回的frameProcessor就是一个Worklet函数，它内部使用了__scanCodes // 如果没有在babel插件中配置globals: ['__scanCodes']，那么__scanCodes可能不会被正确转换，导致运行时报错 return ( <Camera style={StyleSheet.absoluteFill} device={device} isActive={true} frameProcessor={frameProcessor} // 这里传入的frameProcessor需要是Worklet函数 /> ); } ``` 在上面的代码中，`useScanBarcodes`返回的`frameProcessor`是一个Worklet函数，它内部调用了`__scanCodes`。由于`__scanCodes`是在第三方库中定义的，我们通过globals配置告诉Babel插件处理它，这样`frameProcessor`才能正确运行。 总结：Reanimated插件的globals配置项用于指定需要被当作Worklet处理的全局函数名，确保这些函数（尤其是来自第三方库的）能够被正确转换，从而在UI线程上运行。 §§相关问题§§ 1. 如何确定需要配置哪些全局函数到Reanimated插件的globals中？ 2. 除了__scanCodes，还有哪些常见的全局Worklet函数需要配置？ 3. 如果没有配置globals会导致什么运行时错误？ 4. Reanimated插件的其他配置选项有哪些？</think>### React Native Reanimated 插件配置解析：`globals: ['__scanCodes']` 的作用 #### 1. **核心作用：注册全局 Worklet 函数** `globals: ['__scanCodes']` 配置的主要作用是**向 Reanimated 插件声明需要特殊处理的全局 Worklet 函数**。具体功能包括： - **跨线程识别**：使 `__scanCodes` 函数能在 UI 线程（Native）和 JS 线程之间无缝调用[^1] - **JSI 优化**：通过 JavaScript Interface (JSI) 实现零拷贝通信，避免传统 Bridge 的性能损耗 - **类型安全**：在 TypeScript 项目中自动生成类型声明（需配合 Reanimated 的 TS 支持） #### 2. **技术必要性分析** ```mermaid graph TD A[VisionCamera 图像帧] --> B[__scanCodes Worklet] B --> C{Reanimated 插件处理} C --> D[UI线程执行] C --> E[同步返回识别结果] D --> F[零延迟渲染] ``` - **性能关键**：图像处理需在 UI 线程同步执行（传统异步 JS 线程会导致帧丢失） - **原生绑定**：`__scanCodes` 本质是绑定到原生模块的 C++ 函数[^3] - **避免冲突**：防止 Metro 打包器错误优化或重命名该函数 #### 3. 典型应用场景（以 vision-camera-code-scanner 为例） ```javascript // 使用配置后可直接调用 const frameProcessor = useFrameProcessor(frame => { 'worklet' const codes = __scanCodes(frame) // ✅ 被正确识别为 Worklet console.log(codes) }) ``` - **未配置时**：报 `__scanCodes is not a function` 或 `Tried to synchronously call non-worklet function` 错误 - **配置后**：函数调用路径： 1. JS 线程 → 2. JSI 绑定 → 3. Native 模块 → 4. 同步返回结果 #### 4. 配置验证方法 在 `babel.config.js` 中确认配置： ```javascript module.exports = { plugins: [ ['react-native-reanimated/plugin', { globals: ['__scanCodes'] // 关键配置行[^1][^2] }] ] } ``` **生效标志**： - 构建时输出 `Reanimated: __scanCodes added to globals` - 运行时 `__scanCodes.toString()` 返回 `[native code]` #### 5. 常见问题排查 | 现象 | 原因 | 解决方案 | |------|------|----------| | 函数未定义 | 插件未加载 | 检查 `babel.config.js` 路径 | | 类型错误 | TS 未识别 | 添加 `global.d.ts` 声明文件 | | 性能低下 | JSI 未启用 | 确认 Reanimated ≥ 2.4.0 | > **最佳实践**：当使用依赖原生 Worklet 的库（如 vision-camera-code-scanner）时，必须在插件配置中显式声明其全局函数名[^2][^3]