首页 / 技术问答 / Typescript问答列表 / 问答详情

Typescript 在ReactionNativeReAnimated中不存在Animated.Value

在更新了expo SDK版本后，我不得不相应地更新另一个软件包.我开始面对Animated.Value的以下问题，VSCode说，属性Value在类型Animated上不存在.

导入为:

import Animated from 'react-native-reanimated';个

react-native-reanimated版本是3.6.2.

enter image description here

但是，当我运行应用程序并进入屏幕时，它抛出以下错误:

 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
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

有什么 idea 吗？

推荐答案

您使用的语法不正确，"Reaction-Native-ReAnimated"中的动画模块与"Reaction-Native"中的不同.

使用共享值

import { Button, View } from 'react-native';
import Animated, { useSharedValue } from 'react-native-reanimated';

export default function App() {
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = width.value + 50;
  };

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <Animated.View
        style={{
          width,
          height: 100,
          backgroundColor: 'violet',
        }}
      />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

使用动画功能:

import { Button, View } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';

export default function App() {
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = withSpring(width.value + 50);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <Animated.View
        style={{
          width,
          height: 100,
          backgroundColor: 'violet',
        }}
      />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

Typescript相关问答推荐

无需刷新即可让现场访客逆变

使用前的组件渲染状态更新

从接口创建类型安全的嵌套 struct

在TypeScript中使用泛型的灵活返回值类型

如何键入函数以只接受映射到其他一些特定类型的参数类型？

如果字符串文字类型是泛型类型，则用反引号将该类型括起来会中断

使用2个泛型类型参数透明地处理函数中的联合类型

为什么&；(交集)运算符会删除不相交的属性？

FatalError：Error TS6046：'；--模块分辨率'；选项的参数必须是：'； node '；，'； node 16'；，'； node

Angular 自定义验证控件未获得表单值

(TypeScript)TypeError：无法读取未定义的属性(正在读取映射)"

为什么我的导航在使用Typescript的React Native中不起作用？

在TypeScript中扩展重载方法时出现问题

有没有办法在Reaction组件中动态导入打字脚本`type`？

有没有一种方法可以提升对象的泛型级别，而对象的值是泛型函数？

替换typescript错误；X类型的表达式可以'；t用于索引类型Y；带有未定义

TypeScript：方法获胜'；t接受较窄类型作为参数

带有 Select 器和映射器的Typescript 泛型

如何强制对象数组中的对象属性具有非空字符串值？

如何编写一个接受 (string｜number｜null｜undefined) 但只返回 string 且可能返回 null｜undefined 的函数？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630