React Native Reanimated：'AnimatedNode<number>' 类型的参数不可分配给 'number' 类型的参数。ts(2345)

Question

我需要使用 React Native Reanimated(https://www.npmjs.com/package/react-native-reanimated) 创建抽屉动画。

before update interpolate 方法使用 2 个参数可以正常工作。像

一样使用

interpolate(
   props.progress,
   {
    [0, 1],
    [1, 0.85],
    Extrapolate.CLAMP
   }
);

但更新后，该方法将带3到4个参数

interpolate(
   props.progress,
   [0, 1],
   [1, 0.85],
   Extrapolate.CLAMP
);

现在我得到如下错误

Argument of type 'AnimatedNode<number>' is not assignable to parameter of type 'number'

我当前的 React Native Reanimated 版本是 2.1.0

如下所示通过 drawerContent(DrawerContentComponentProps) 传递 Props

drawerContent={(props) => {
            const scale = interpolate(
              props.progress,
              [0, 1],
              [1, 0.85],
              Extrapolate.CLAMP
            );

            const borderRadius = interpolate(
              props.progress,
              [0, 1],
              [0, 10],
              Extrapolate.CLAMP
            );

            screenStyle = {
              transform: [
                {
                  scaleY: scale,
                },
              ],
              borderRadius,
            };
            return <SideBar {...props} user={user} />;
          }}
    ```

Answer 1

在 Reanimated 2 中，interpolate 被重命名为 interpolateNode。所以我做了像

这样的更改我的代码

...
const scale = interpolateNode(props.progress, {
 inputRange: [0, 1],
 outputRange: [1, 0.85],
 extrapolate: Extrapolate.CLAMP,
});

const borderRadius = interpolateNode(props.progress, {
 inputRange: [0, 1],
 outputRange: [1, 10],
 extrapolate: Extrapolate.CLAMP,
});
...

并且运行正常

React Native Reanimated：'AnimatedNode<number>' 类型的参数不可分配给 'number' 类型的参数。ts(2345)

React Native Reanimated: Argument of type 'AnimatedNode<number>' is not assignable to parameter of type 'number'.ts(2345)

react-native

react-native-drawer

react-native-reanimated

react-native-reanimated-v2