WatermelonDB 在 React Native 0.76+ 中的装饰器语法问题解决方案

问题背景

在使用最新版 React Native (0.76+) 开发时，许多开发者遇到了 WatermelonDB 的装饰器语法无法识别的问题。具体表现为 Metro 打包工具在解析包含 @field、@json 等 WatermelonDB 装饰器的代码时，会抛出"unrecognized character '@'"的错误。

问题根源

这个问题的根本原因在于 React Native 0.76+ 版本默认启用了 Hermes 解析器，而 Hermes 目前对装饰器语法的支持还不完善。WatermelonDB 大量使用了装饰器语法来定义数据模型，因此导致了兼容性问题。

解决方案

方法一：禁用 Hermes 解析器

最直接的解决方案是在 metro.config.js 中禁用 Hermes 解析器：

const config = {
    transformer: {
        hermesParser: false,
    },
};

这种方法简单有效，但需要注意禁用 Hermes 可能会影响应用的性能，因为 Hermes 是 React Native 的优化 JavaScript 引擎。

方法二：配置 Babel 插件

另一种更优雅的解决方案是正确配置 Babel 插件来支持装饰器语法：

1. 首先安装必要的 Babel 插件：

npm install -D @babel/plugin-proposal-decorators

2. 然后在 babel.config.js 中添加装饰器插件配置：

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]
};

这种方法保留了 Hermes 的优势，同时解决了装饰器语法的问题。

最佳实践建议

1. 优先考虑方法二：配置 Babel 插件是更推荐的解决方案，因为它保持了 Hermes 的性能优势。

2. 项目结构优化：将 WatermelonDB 相关代码组织在专门的目录中，如示例中的 db/ 目录结构，便于维护和问题排查。

3. 版本兼容性检查：确保使用的 WatermelonDB 版本与 React Native 版本兼容，定期检查更新。

4. 性能监控：如果选择禁用 Hermes，需要密切关注应用性能指标，必要时进行优化。

总结

React Native 生态系统的快速发展有时会带来一些兼容性问题，WatermelonDB 装饰器语法问题就是其中之一。通过合理配置 Babel 或调整 Metro 设置，开发者可以轻松解决这一问题，继续享受 WatermelonDB 为 React Native 应用带来的优秀离线数据管理能力。