Reanimated 2和3的版本差异导致的报错怎么解决？

轩辕鑫玉提问于 2026-02-12 15:08:27 阅读 15

移动

我在升级Reanimated到v3后，使用Value时一直报“Cannot read property ‘Value’ of undefined”，但文档里写v3还支持v2语法

场景是给按钮添加缩放动画，之前用v2的Animated API写法：


import Animated, { Value } from 'react-native-reanimated';

const animatedValue = new Value(0);
// ...后续用这个值驱动动画

尝试过删除node_modules重装、检查peerDependencies，甚至按照迁移指南加了legacy: true配置，但问题依旧。控制台还提示“reanimated 2 api deprecated but used anyway”

Redux 性能优化

我来解答赞 5 收藏

反馈

1 条解答

思涵 Lv1

问题应该出在你还在用 v2 的导入方式，虽然 Reanimated v3 保留了对旧 API 的支持，但它的导入路径和初始化方式变了，而且默认启用了新的 JSI 引擎。

首先确认你已经装了正确的版本

npm install react-native-reanimated@^3.x

然后别忘了在项目的 metro.config.js 里加上 Reanimated 的插件（这步漏了就会导致运行时模块没注入）

const {getDefaultConfig} = require('metro-config');



module.exports = (async () => {

  const {

    resolver: {sourceExts, assetExts}

  } = await getDefaultConfig();

  return {

    transformer: {

      babelTransformerPath: require.resolve('react-native-svg-transformer'),

      experimentalImportSupport: false,

      inlineRequires: true,

    },

    resolver: {

      assetExts: assetExts.filter(ext => ext !== 'svg'),

      sourceExts: [...sourceExts, 'svg', 'jsx', 'ts', 'tsx'],

    },

    serializer: {

      getModulesRunBeforeMainModule: () => [

        require.resolve('react-native-reanimated/src/reactNativeReanimated')

      ],

    },

  };

})();

重点来了：从 v3 开始，Value 这些类不能再从主入口导出中拿到。你应该改用 Animated.Value，或者直接切换到新 API。

你现在报 “Cannot read property 'Value' of undefined” 是因为 import Animated, { Value } from 'react-native-reanimated' 这句里的 Value 已经是 undefined 了。

修复方案有两个：

第一个是快速兼容方案，保持旧逻辑但修正导入：

import Animated from 'react-native-reanimated';



// 改成这样

const animatedValue = new Animated.Value(0);

第二个是推荐做法：迁移到 v3 新语法，使用 useSharedValue 和 'worklet' 模式：

import { useSharedValue } from 'react-native-reanimated';



const scale = useSharedValue(1);



// 动画回调里记得加 'worklet'

const onPressIn = () => {

  'worklet';

  scale.value = 0.9;

};

最后那个 “reanimated 2 api deprecated but used anyway” 警告说明你确实触发了兼容层，但没完全配好。确保你在 entry file（比如 index.js 或 App.js）顶部加了启用旧 API 的标记：

// 必须放在所有 import 之前

global.__reanimatedWorkletInit = () => {};

global.__reanimatedModuleProxy = {

  installTurboModule: () => ({})

};



import React from 'react';

import {AppRegistry} from 'react-native';

// ...

不过最干净的办法还是尽快换成共享值 + worklet 的写法，老的 new Value() 在后续版本会被彻底移除。

2026-02-12 16:01