Expo Router SDK50集成Drawer遇Reanimated版本匹配错误求助

问题描述 #

使用Expo Router（SDK 50）开发应用时集成Drawer组件，按官方文档安装react-native-gesture-handler和react-native-reanimated后，出现错误提示：Reanimated: Couldn't determine the version of the native part of Reanimated，且动画无法正常运行。已尝试npm install、清除缓存、npx expo start --clear、run:android等操作，均未解决。旧版本中使用以下封装代码可正常运行：

const DrawerSceneWrapper = ({ children }) => {
  const progress = useDrawerProgress();
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { scale: interpolate(progress.value, [0, 1], [1, 0.8], "clamp") },
      {
        rotateY: `${interpolate(progress.value, [0, 1], [0, -10], "clamp")}deg`,
      },
      { translateX: interpolate(progress.value, [0, 1], [0, 0, -60], "clamp") },
    ],
    borderRadius: interpolate(progress.value, [0, 1], [0, 28], "clamp"),
    overflow: "hidden",
  }));
  return (
    <Animated.View className="flex-1" style={animatedStyle}>
      {children}
    </Animated.View>
  );
};

解决方案 #

1. 匹配SDK对应依赖版本 #

SDK 50要求react-native-reanimated版本为3.6.2，react-native-gesture-handler版本为2.14.0，执行以下命令安装指定版本：

npm install react-native-reanimated@3.6.2 react-native-gesture-handler@2.14.0

2. 配置babel插件顺序 #

在项目根目录的babel.config.js中，确保react-native-reanimated/plugin是最后一个插件：

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

3. 适配Reanimated 3.x API #

Reanimated 3.x已弃用旧版interpolate的字符串参数格式，需替换为配置对象，同时修正无效的插值参数。修改后的代码：

import { useDrawerProgress } from '@react-navigation/drawer';
import { interpolate, useAnimatedStyle, Animated } from 'react-native-reanimated';

const DrawerSceneWrapper = ({ children }) => {
  const progress = useDrawerProgress();
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { scale: interpolate(progress.value, [0, 1], [1, 0.8], { extrapolateRight: 'clamp' }) },
      {
        rotateY: `${interpolate(progress.value, [0, 1], [0, -10], { extrapolateRight: 'clamp' })}deg`,
      },
      { translateX: interpolate(progress.value, [0, 1], [0, -60], { extrapolateRight: 'clamp' }) },
    ],
    borderRadius: interpolate(progress.value, [0, 1], [0, 28], { extrapolateRight: 'clamp' }),
    overflow: "hidden",
  }));
  return (
    <Animated.View className="flex-1" style={animatedStyle}>
      {children}
    </Animated.View>
  );
};

注：原代码中translateX的插值数组[0,0,-60]无效，已修正为[0,-60]，确保输入输出数组长度一致。

4. 彻底清除缓存并重构 #

执行以下命令清除所有缓存并重新构建原生项目：

npx expo prebuild --clean
npx expo start --clear
npx expo run:android

5. 确认Gesture Handler入口配置 #

在项目入口文件（如app/_layout.js）的最顶部导入react-native-gesture-handler：

import 'react-native-gesture-handler';

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