React Native 0.71.10中Animated语法错误排查求助

问题背景 #

• 此前iOS模拟器可正常构建运行，提交GitHub并重构代码后出现打包错误，回滚至报错前的稳定版本仍无法解决
• 核心报错：SyntaxError: .../node_modules/react-native/index.js: Unexpected token (240:19)，报错位置指向Animated属性的类型定义代码
• 已尝试无效操作：注释所有Animated API导入、删除并重装node_modules

排查步骤 #

1. 检查Babel配置是否正确解析Flow类型 #

React Native用Flow做类型定义，若Babel未正确配置预设，会无法解析类型注解导致语法错误：

• 确保babel.config.js使用官方预设，示例配置：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
  };
  

• 不要自定义preset时遗漏@babel/preset-flow或React Native专属预设，否则类型语法会被当成无效token

2. 核对Metro配置是否正常处理react-native模块 #

Metro是React Native的打包工具，若配置错误导致react-native模块未被转译：

• 确保metro.config.js使用默认配置或正确合并自定义配置，示例：

  const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  const config = {};
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  

• 避免自定义resolver时错误排除react-native模块，导致其跳过Babel转译

3. 确认Node.js版本与React Native兼容 #

不同React Native版本对Node.js版本有要求，版本不匹配可能导致语法解析失败：

• 对照React Native官方文档，确认当前Node.js版本符合项目所用RN版本的要求（比如RN 0.70+需要Node.js 16+）
• 可通过node -v查看当前版本，版本过低则升级Node.js

4. 彻底清除各类缓存 #

缓存残留是常见的疑难问题诱因，执行以下命令清除：

# 重置Metro缓存
npx react-native start --reset-cache
# 清除Xcode派生数据
rm -rf ~/Library/Developer/Xcode/DerivedData
# 清除iOS构建产物
rm -rf ios/build

5. 同步依赖锁文件 #

回滚代码后若锁文件未同步，可能导致依赖版本异常：

• 删除package-lock.json或yarn.lock
• 重新执行npm install或yarn install，确保依赖版本与稳定版本一致

6. 检查Xcode构建脚本 #

确认iOS项目的Build Phases中Bundle React Native code and images脚本未被修改：

• 检查脚本中的NODE_BINARY路径是否指向正确的Node.js版本
• 确保脚本执行逻辑正常，未被添加错误的参数或过滤规则

内容的提问来源于stack exchange，提问作者Colin Tondreau