react-native-reanimated使用Animated.interpolate报参数缺失错误求助

该报错由react-native-reanimated的版本API差异导致：你当前使用的版本中，顶层Animated.interpolate方法要求传入3~4个位置参数，而你采用了旧版本支持的对象配置传参格式，参数数量不匹配触发TS报错。

两种修改方式任选其一即可，最终效果完全一致： #

方案1：使用动画值自带的interpolate实例方法（更推荐） #

直接调用动画值身上挂载的interpolate方法，支持你当前使用的对象配置格式，代码修改量最小：

const translateX = props.progress.interpolate({
  inputRange: [0, 0.5, 0.7, 0.8, 1],
  outputRange: [-100, -85, -70, -45, 0],
  // 还可以按需添加 extrapolate 等其他配置项
});

注意：Reanimated v2/v3全版本都支持该写法，是官方文档推荐的标准写法。 #

方案2：适配顶层Animated.interpolate的多参数规则 #

如果你要继续使用Animated.interpolate的调用形式，需要把inputRange、outputRange拆为单独的位置参数传入，可选配置作为第四个参数：

const translateX = Animated.interpolate(
  props.progress,
  [0, 0.5, 0.7, 0.8, 1], // 第二个参数传入inputRange数组
  [-100, -85, -70, -45, 0], // 第三个参数传入outputRange数组
  { extrapolate: 'clamp' } // 第四个可选参数，不需要可以省略
);

内容的提问来源于stack exchange，提问作者JACKSON LION WALKER