React Native Vision Camera 在 RN 0.76 版本中 runAsync 问题的分析与解决

问题背景

在 React Native Vision Camera 这个强大的相机库中，开发者们经常使用 frame processors 来处理相机捕获的每一帧图像。其中 runAsync 方法是一个关键功能，它允许开发者将耗时的帧处理逻辑放到异步线程中执行，避免阻塞主线程导致帧率下降。

然而，当项目升级到 React Native 0.76 版本后，许多开发者发现 runAsync 方法突然停止工作，控制台会抛出错误提示："Regular javascript function cannot be shared. Try decorating the function with the 'worklet' keyword"。

问题现象

开发者在使用 runAsync 方法时，同步部分的代码能够正常执行，但异步部分的回调函数却无法正常工作。典型的错误日志如下：

Frame Processor Error: Regular javascript function '' cannot be shared. Try decorating the function with the 'worklet' keyword to allow the javascript function to be used as a worklet., js engine: VisionCamera

根本原因

经过深入分析，这个问题主要与 React Native 0.76 版本对 JavaScript 引擎和工作线程(worklet)机制的改动有关。具体来说：

1. React Native 0.76 对 JavaScript 引擎的共享机制进行了调整
2. 工作线程(worklet)的装饰器处理逻辑发生了变化
3. 异步回调函数的上下文传递方式在 RN 0.76 中有所不同

解决方案

要解决这个问题，开发者需要确保正确配置相关依赖和 Babel 插件：

1. 依赖版本控制：

   • react-native-reanimated: ~3.16.1
   • react-native-worklets-core: 1.5.0
   • react-native-vision-camera: ^4.6.3

2. Babel 配置： 在 babel.config.js 中添加必要的插件：

   module.exports = function (api) {
     api.cache(true);
     return {
       presets: [...],
       plugins: [
         "@babel/plugin-transform-async-generator-functions",
         ["react-native-worklets-core/plugin"],
         ["react-native-reanimated/plugin", { processNestedWorklets: true }]
       ]
     };
   };
   

3. 替代方案： 如果问题仍然存在，可以考虑使用 runAtTargetFps() 方法作为临时解决方案，它可以在一定程度上模拟异步处理的效果。

最佳实践

1. 确保所有相关依赖版本兼容
2. 仔细检查 Babel 配置，特别是 worklet 相关插件
3. 在升级 RN 版本时，先在小规模测试环境中验证 frame processors 功能
4. 考虑将复杂的帧处理逻辑分解为更小的单元，减少对异步处理的依赖

总结

React Native 版本升级带来的底层机制变化有时会影响特定库的功能。对于 Vision Camera 的 runAsync 问题，通过正确配置依赖和 Babel 插件，大多数情况下都能解决。开发者应当保持对 React Native 生态变化的关注，及时调整项目配置以适应新版本特性。

对于性能要求不是特别高的场景，也可以考虑使用同步处理或降低帧率的方式来规避异步处理带来的复杂性，这往往是更稳定的解决方案。