更新Expo SDK后react-native-reanimated中Animated.Value不存在问题求助

更新Expo SDK版本后同步升级依赖，使用react-native-reanimated@3.6.2时遇到两个问题：

1. VSCode提示类型错误：Animated上不存在属性Value，导入方式为import Animated from 'react-native-reanimated';
2. 运行应用进入StocksScreen页面时抛出错误：TypeError: Cannot read property 'prototype' of undefined，错误栈如下：

ERROR  TypeError: Cannot read property 'prototype' of undefined

This error is located at:
in StocksScreen (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:218)
in RCTView (at View.js:116)
in View (at Screen.tsx:63)
in RCTView (at View.js:116)
in View (at Background.tsx:13)
in Background (at Screen.tsx:58)
in Screen (at BottomTabView.tsx:135)
in RNSScreen (at createAnimatedComponent.js:54)
in Unknown (at src/index.native.tsx:314)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:313)
in InnerScreen (at src/index.native.tsx:566)
in Screen (at ScreenFallback.tsx:39)
in MaybeScreen (at BottomTabView.tsx:127)
in RNSScreenNavigationContainer (at src/index.native.tsx:398)
in ScreenContainer (at ScreenFallback.tsx:30)
in MaybeScreenContainer (at BottomTabView.tsx:93)
in RCTView (at View.js:116)
in View (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at BottomTabView.tsx:92)
in BottomTabView (at createBottomTabNavigator.tsx:118)
in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
in NavigationContent (at useComponent.tsx:35)
in Unknown (at createBottomTabNavigator.tsx:117)
in BottomTabNavigator (at BottomTabNavigator.tsx:32)
in Suspense (at BottomTabNavigator.tsx:25)
in BottomTabNavigator (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:218)
in RCTView (at View.js:116)
in View (at DebugContainer.native.tsx:34)
in DebugContainer (at NativeStackView.native.tsx:82)
in MaybeNestedStack (at NativeStackView.native.tsx:325)
in RCTView (at View.js:116)
in View (at NativeStackView.native.tsx:318)
in RNSScreen (at createAnimatedComponent.js:54)
in Unknown (at src/index.native.tsx:314)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:313)
in InnerScreen (at src/index.native.tsx:566)
in Screen (at NativeStackView.native.tsx:253)
in SceneView (at NativeStackView.native.tsx:413)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:220)
in RNSScreenStack (at src/index.native.tsx:227)
in ScreenStack (at NativeStackView.native.tsx:401)
in NativeStackViewInner (at NativeStackView.native.tsx:474)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at NativeStackView.native.tsx:473)
in NativeStackView (at createNativeStackNavigator.tsx:72)
in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
in NavigationContent (at useComponent.tsx:35)
in Unknown (at createNativeStackNavigator.tsx:71)
in NativeStackNavigator (at StackNavigator.tsx:16)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at StackNavigator.tsx:15)
in StackNavigator (at App.tsx:15)
in CurrencyContextProvider (at App.tsx:14)
in NewsContextProvider (at App.tsx:13)
in CategoryContextProvider (at App.tsx:12)
in App (at withDevTools.ios.js:25)
in withDevTools(App) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes

1. 修复Animated.Value类型错误 #

react-native-reanimated v3+ 已移除Animated.Value，改用函数式API替代：

• 旧写法：

  const animatedValue = new Animated.Value(0);
  

• 替换为v3写法：

  import { useSharedValue } from 'react-native-reanimated';
  
  const animatedValue = useSharedValue(0);
  

• 若需兼容旧代码，可直接从react-native导入原生Animated：

  import { Animated } from 'react-native';
  

2. 解决TypeError: Cannot read property 'prototype' of undefined #

该错误多因代码仍使用reanimated v2旧API或依赖版本不兼容：

• 检查StocksScreen动画代码：排查是否存在Animated.Value、Animated.timing等v2 API，替换为v3对应API（如withTiming、useAnimatedStyle）
• 验证依赖兼容性：确认react-native-reanimated@3.6.2与当前Expo SDK版本匹配
• 清理缓存：执行命令清除旧代码残留：

  npx expo start --clear
  rm -rf node_modules && npm install
  

• 检查babel配置：确保babel.config.js中正确配置reanimated插件，且插件置于最后：

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

3. 额外排查点 #

• 检查StocksScreen中第三方组件是否依赖旧版reanimated，升级至兼容v3的版本
• 确保所有动画相关导入统一来自react-native-reanimated，避免混用react-native原生Animated

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