Ant Design Mobile RN 中 Collapse 组件使用问题解析

问题现象

在使用 Ant Design Mobile RN 的 Collapse 组件时，开发者遇到了一个典型问题：当尝试使用 Collapse.Panel 子组件时，应用会抛出 TypeError: Cannot read property 'makeMutable' of undefined 错误。而如果移除 Collapse.Panel 部分，则应用可以正常运行。

问题根源分析

这个错误通常与 React Native 的动画库 react-native-reanimated 相关。makeMutable 是 reanimated 库中的一个方法，当这个错误出现时，表明 reanimated 库可能没有正确初始化或配置。

解决方案

1. 检查依赖版本

确保项目中安装了正确版本的 react-native-reanimated 和 react-native-gesture-handler。这两个库是 Ant Design Mobile RN 实现动画和手势交互的基础依赖。

2. 配置 Babel 插件

在项目的 babel.config.js 文件中添加 react-native-reanimated 插件配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 其他插件...
    'react-native-reanimated/plugin' // 这必须是最后一个插件
  ]
}

3. 清理缓存

修改配置后，需要清理项目缓存并重新启动：

npm start -- --reset-cache

或

yarn start --reset-cache

4. 检查初始化代码

确保在应用的入口文件（通常是 index.js 或 App.js）中正确初始化了 reanimated：

import 'react-native-gesture-handler';
import { enableFreeze } from 'react-native-screens';
import { enableScreens } from 'react-native-screens';

enableFreeze(true);
enableScreens(true);

注意事项

1. 如果项目不是使用 Expo 创建的，则不需要安装 expo-font 依赖。

2. react-native-reanimated 插件必须放在 babel 配置文件的插件数组的最后一项。

3. 确保 react-native-reanimated 的版本与项目中的其他依赖兼容。

总结

Ant Design Mobile RN 中的 Collapse 组件依赖 react-native-reanimated 来实现动画效果。当出现 makeMutable 未定义的错误时，通常是由于 reanimated 库没有正确配置或初始化导致的。通过检查依赖版本、正确配置 Babel 插件以及清理项目缓存，可以有效解决这一问题。