RN适配鸿蒙踩坑日记（二）

最近在项目开发中有个需求，需要使用react-native-tab-view 组件来实现优雅的标签页切换效果。然而，集成完成后，项目运行时突然出现了一个报错：

Cannot read property 'getItem' of undefined

这类错误乍一看似乎跟react-native-tab-view没有什么直接关联，为了解决这个问题，我仔细排查了代码和依赖库，最终定位到错误的根源竟然是 Babel的配置。

经过深入分析发现，问题出在项目中为 MobX 配置的 Babel 插件上。在 MobX 的集成过程中，为了支持装饰器和类属性，我们在 babel.config.js 中添加了以下配置：

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

这一配置在集成 MobX 时运行良好，但由于 Babel 默认会把这些插件应用到整个项目的代码上，包括 node_modules 下的依赖库，导致了 react-native-tab-view 依赖的 FlatList 组件也被 Babel 处理，触发了“Cannot read property ‘getItem’ of undefined”的错误。

解决方案：精准控制 Babel 插件的应用范围

为了让 Babel 仅对我们自己的代码应用插件，而不影响到 react-native 和其他依赖库的代码，我们可以使用 overrides 配置来指定插件的应用范围：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  overrides: [
    {
      test: (filename) => {
        return filename && !/node_modules[\\/](react-native|react-navigation)/.test(filename);
      },
      plugins: [
        ['@babel/plugin-proposal-decorators', { version: 'legacy' }],
        ['@babel/plugin-transform-class-properties', { loose: true }],
      ],
    },
  ],
};

在这个配置中：

• overrides 配置：通过 overrides，我们可以将特定的插件应用范围限制在我们自己的代码中，而不会影响到 node_modules 下的依赖库。

• 正则表达式排除机制：通过排除 react-native 和 react-navigation 模块，我们确保这些库不会受到装饰器和类属性插件的干扰，从而避免了不兼容的问题。

最终效果

通过这种方式，我们成功地解决了 Babel 配置导致的兼容性问题。这样一来，不仅 MobX 和 react-native-tab-view 可以和平共存，项目的运行也变得更加稳定。遇到这种问题的朋友不妨一试，让你的 Babel 配置更智能地适应项目的需求！

希望这份踩坑笔记能为大家带来一些灵感，在未来的开发中少踩坑、多收获！