Expo React Native Android/iOS端react-native-reanimated语法错误求助

环境信息 #

• "expo": "^49.0.0"
• 系统：MAC M1 Ventura 13.2.1 (22D68)
• Node版本：v20.11.1
• npm版本：10.2.4
• npx版本：10.2.4

问题描述 #

已完成所有包和插件配置，执行./gradlew clean成功，但运行yarn android时，react-native-reanimated出现语法错误：

error: SyntaxError: /Users/da/Desktop/Documents/apps/expoapps/mm/myapp/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx: Unexpected token, expected "," (105:28)

103 | // @ts-ignore This is required to create this overload, since type of createAnimatedComponent is incorrect and doesn't include typeof FlatList
104 | export function createAnimatedComponent(

105 | component: typeof FlatList,
| ^
106 | options?: Options
107 | ): ComponentClass<AnimateProps<FlatListProps>>;
108 |

iOS模拟器运行时也出现同类错误：

iOS Bundling failed 12533ms
error: SyntaxError: /Users/devendraahirwar/Desktop/Documents/apps/expoapps/mm/matrimoniallagnagathi/node_modules/react-native-reanimated/src/reanimated2/threads.ts: Unexpected token (235:47)

233 |
234 | return (...args) =>

235 | runOnJS(runWorkletOnJS<Args, ReturnValue>)(
| ^
236 | fun as WorkletFunction<Args, ReturnValue>,
237 | ...args
238 | );

项目依赖 #

• "react-native": "0.72.10"
• "react-native-reanimated": "^3.7.1"

Babel配置（babel.config.js） #

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

解决步骤 #

1. 锁定兼容版本的react-native-reanimated #

Expo 49对应React Native 0.72.x，react-native-reanimated 3.7.1存在适配问题，建议降级到3.3.0版本：

yarn add react-native-reanimated@3.3.0
# 或使用npm
npm install react-native-reanimated@3.3.0 --save

2. 调整Babel插件顺序 #

react-native-reanimated的插件必须放在所有插件的最后一位，修改babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // 其他插件需放在此之前
      'react-native-reanimated/plugin' // 必须是最后一个插件
    ],
  };
};

3. 彻底清除缓存并重启Metro #

执行以下命令清理缓存，避免旧缓存干扰：

npx expo start --clear
# 或使用yarn
yarn start --reset-cache

4. 重装依赖 #

删除现有依赖文件后重新安装：

rm -rf node_modules yarn.lock package-lock.json
yarn install # 或npm install

5. 检查TypeScript配置（若项目使用TS） #

确保tsconfig.json包含必要配置：

{
  "compilerOptions": {
    "jsx": "react-native",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "extends": "expo/tsconfig.base"
}

6. 裸工作流执行预构建清理 #

如果是裸工作流项目，重新执行预构建：

npx expo prebuild --clean

内容的提问来源于stack exchange，提问作者Jitendra Patwa