React Native报错与警告：事件参数不足、Animated.event需传第二个选项参数

原代码示例 #

const scrollY = useRef(new Animated.Value(0)).current;

const keyExtractorItem = useCallback((item) => item.id.toString(), []);

const anEvent = Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {
            y: scrollY,
          },
        },
      },
     { useNativeDriver: true }
    ],
    
  );

<AnimatedFlashList
        onScroll={anEvent}
        contentContainerStyle={{ paddingTop: StatusBar.currentHeight || 42 }}
        data={DATA}
        keyExtractor={keyExtractorItem}
        renderItem={renderItem}
        estimatedItemSize={20}
      />

遇到的问题 #

• 滚动时报错：

Event has less arguments than mapping

• 警告提示：

ANIMATED.EVENT NOW REQUIRES A SECOND ARGUMENT FOR OPTIONS

解决方法 #

问题出在Animated.event的参数格式错误：你把配置项{ useNativeDriver: true }放到了第一个参数的事件映射数组里，导致参数匹配失败，同时不符合新版React Native的API要求。

修正后的代码如下：

const scrollY = useRef(new Animated.Value(0)).current;

const keyExtractorItem = useCallback((item) => item.id.toString(), []);

// 修正Animated.event的参数结构，配置项作为独立的第二个参数传入
const anEvent = Animated.event(
  [
    {
      nativeEvent: {
        contentOffset: {
          y: scrollY,
        },
      },
    },
  ],
  { useNativeDriver: true }
);

<AnimatedFlashList
  onScroll={anEvent}
  contentContainerStyle={{ paddingTop: StatusBar.currentHeight || 42 }}
  data={DATA}
  keyExtractor={keyExtractorItem}
  renderItem={renderItem}
  estimatedItemSize={20}
/>

原因说明 #

1. 报错Event has less arguments than mapping：Animated.event的第一个数组参数是事件参数的映射列表，滚动事件只会传入一个参数（包含nativeEvent的对象），但你之前在数组里放了两个元素（事件映射对象+配置项），导致框架认为需要两个事件参数，实际却只有一个，因此报错。
2. 警告ANIMATED.EVENT NOW REQUIRES A SECOND ARGUMENT FOR OPTIONS：新版React Native要求Animated.event的配置项必须作为第二个独立参数传入，不能混入事件映射数组中。

内容的提问来源于stack exchange，提问作者Deepak S