React Native使用Animated.event报Type 'number'不可分配给Mapping.ts(2322)错误

你遇到的Type 'number' is not assignable to type 'Mapping'.ts(2322)报错由以下几处代码错误导致，按顺序修改即可： #

报错截图
#

错误1：滚动事件字段拼写错误 #

Animated.event的事件路径写错了，React Native滚动事件的正确层级是nativeEvent.contentOffset，不是nativeElement，字段不匹配导致类型校验失败。
同时需要确认screenX是你提前声明的Animated.Value类型变量，示例声明代码如下：

// 组件顶部声明滚动偏移量存储变量
const screenX = useRef(new Animated.Value(0)).current;

修复后的onScroll属性代码：

onScroll={Animated.event(
  [{ nativeEvent: { contentOffset: { x: screenX } } }],
  // 不需要原生驱动就填false，要开启的话注意对应的动画属性要支持原生驱动
  { useNativeDriver: false }
)}

错误2：插值参数长度不匹配 #

你调用interpolate时，inputRange传了3个值，但outputRange仅传了1个值，两者长度必须一一对应。按照轮播指示器的常规效果，修改为：

let opacity = screenX.interpolate({
  inputRange: [i - 1, i, i + 1],
  // 对应前一个点、当前点、后一个点的透明度
  outputRange: [0.3, 1, 0.3],
  extrapolate: 'clamp'
});

注意：你原代码中用了position.interpolate，但滚动偏移量绑定的是screenX，如果没有额外处理的话这里要替换成screenX，否则指示器不会跟随滚动变化。

错误3：可选类型补充 #

如果修改完以上两处仍有类型报错，可以给Animated.event补充滚动事件的泛型定义：

// 顶部引入类型
import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';

// 给Animated.event加泛型
onScroll={Animated.event<NativeSyntheticEvent<NativeScrollEvent>>(
  [{ nativeEvent: { contentOffset: { x: screenX } } }],
  { useNativeDriver: false }
)}

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