react-native - React Native Reanimated：'AnimatedNode 类型的参数' 不可分配给“数字”类型的参数。ts(2345)

Question

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

在更新前插值方法与 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)传递道具如下

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 中，插值被重命名为 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,
});
...

它工作正常