如何在EAS构建的开发版应用中使用React Native Reanimated？

问题场景 #

按照React Native Reanimated官方文档的安装说明创建了两个完全一致的Expo应用：

• 使用Expo Go运行时一切正常
• 使用开发构建（启动命令：npx expo start --dev-client）时出现两个错误：

  ERROR Error: [Reanimated] The native part of Reanimated doesn't seem to be initialized. This could be caused by

  • not rebuilding the app after installing or upgrading Reanimated
  • trying to run Reanimated on an unsupported platform
  • running in a brownfield app without manually initializing the native library, js engine: hermes
    ERROR Invariant Violation: "main" has not been registered. This can happen if:
  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

由于需要依赖仅支持开发构建的react-native-pdf库，必须解决开发构建下Reanimated的初始化问题。

解决方案步骤 #

1. 确保正确安装Reanimated并配置Babel #

• 确认已安装react-native-reanimated：

  npx expo install react-native-reanimated
  

• 在项目根目录的babel.config.js中，将Reanimated插件添加到插件列表最后一项：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: [
        // 其他插件放在前面
        'react-native-reanimated/plugin',
      ],
    };
  };
  

2. 重新构建开发客户端 #

开发构建需要将原生依赖编译到自定义客户端中，修改Reanimated相关配置后必须重新构建：

# 针对iOS构建开发客户端
eas build --profile development --platform ios
# 针对Android构建开发客户端
eas build --profile development --platform android

注意：每次修改原生依赖或Babel配置后，都需要重新构建开发客户端，无法像Expo Go那样通过热加载生效。

3. 清除缓存并重启Metro服务 #

• 停止当前运行的Metro服务
• 清除Metro缓存：

  npx expo start --clear
  

• 重新使用开发客户端启动项目：

  npx expo start --dev-client
  

4. 确认Hermes引擎启用 #

Reanimated在Hermes下表现更稳定，开发构建默认启用Hermes，可在app.json/app.config.js中确认配置：

{
  "expo": {
    "jsEngine": "hermes"
  }
}

5. 混合项目手动初始化（若为Brownfield场景） #

如果是原生项目集成Expo的混合场景，需要手动初始化Reanimated：

• iOS端：在AppDelegate.mm中添加初始化代码

  #import <ReactNativeReanimated/ReactNativeReanimated.h>
  
  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
    // 其他初始化代码
    [Reanimated initializeWithBridge:self.bridge];
    return YES;
  }
  

• Android端：在MainApplication.java中添加依赖包

  import com.swmansion.reanimated.ReanimatedPackage;
  
  @Override
  protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new ReanimatedPackage());
    return packages;
  }
  

关键注意点 #

• Expo开发构建不依赖Expo Go的预编译环境，所有原生依赖都需要编译到自定义客户端中，因此安装或更新Reanimated后必须重新构建开发客户端，这是和Expo Go最大的区别。
• Reanimated的Babel插件必须放在插件列表的最后，否则会导致动画异常或初始化失败。

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