React Native 错误：“Animated.event 现在需要第二个选项参数”

Question

有谁知道为什么当我运行下面的代码时出现以下错误？

React Native Expo在命令行中报错：

Animated.event now requires a second argument for options
- node_modules/react-native/Libraries/LogBox/LogBox.js:117:10 in registerWarning
- node_modules/react-native/Libraries/LogBox/LogBox.js:63:8 in warnImpl
- node_modules/react-native/Libraries/LogBox/LogBox.js:36:4 in console.warn
- node_modules/expo/build/environment/react-native-logs.fx.js:18:4 in warn
- node_modules/react-native/Libraries/Animated/src/AnimatedEvent.js:141:6 in constructor 
- node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:520:24 in event
* src/screens/ImageScreen.js:21:24 in ImageScreen

...多行有更多相同的输出...如果人们认为需要，我可以发布完整的输出。

这是代码 - 它并不复杂：

import React, {useState, useRef} from 'react';
import { Animated, PanResponder, View, Image, StyleSheet } from 'react-native';

const style = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "red"
  },  
  moviePoster_posterStyle: {
    resizeMode: "cover"
  }
});

const ImageScreen = () => {

  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value
        });
      },
      onPanResponderMove: Animated.event(
        [
          null,
          { dx: pan.x, dy: pan.y }
        ]
      ),
      onPanResponderRelease: () => {
        pan.flattenOffset();
      }
    })
  ).current;

    return (
      <View style={style.mainView}
        onStartShouldSetResponderCapture={() => {return false}}>
        <Animated.View
          style={{
            transform: [{ translateX: pan.x }, { translateY: pan.y }]
          }}
          {...panResponder.panHandlers}
        >
          <Image
              style={style.moviePoster_posterStyle}
              source={require("../../assets/This_Gun_for_Hire_(1942)_poster.jpg")}
          />
        </Animated.View>
      </View>
    )


};

export default ImageScreen;

谢谢！

Answer 1

如here所述，您需要在代码中指定

useNativeDriver

（将其设置为true或false，具体取决于您的使用）

您的代码现在应该如下所示：

import React, {useState, useRef} from 'react';
import { Animated, PanResponder, View, Image, StyleSheet } from 'react-native';

const style = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "red"
  },  
  moviePoster_posterStyle: {
    resizeMode: "cover"
  }
});

const ImageScreen = () => {

  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value
        });
      },
      onPanResponderMove: Animated.event(
        [
          null,
          { dx: pan.x, dy: pan.y }
        ],
        {useNativeDriver: false}
      ),
      onPanResponderRelease: () => {
        pan.flattenOffset();
      }
    })
  ).current;

    return (
      <View style={style.mainView}
        onStartShouldSetResponderCapture={() => {return false}}>
        <Animated.View
          style={{
            transform: [{ translateX: pan.x }, { translateY: pan.y }]
          }}
          {...panResponder.panHandlers}
        >
          <Image
              style={style.moviePoster_posterStyle}
              source={require("../../assets/This_Gun_for_Hire_(1942)_poster.jpg")}
          />
        </Animated.View>
      </View>
    )


};

export default ImageScreen;

这里唯一的区别：

onPanResponderMove: Animated.event(
  [
    null,
    { dx: pan.x, dy: pan.y }
  ],
  {useNativeDriver: false}
),

Answer 2

这就是我要修复的问题，从 github 存储库来看，PanResponder 似乎无法与 Animated.event([], {useNativeDriver: true}); 一起使用

---

因此，我稍微将两者的 useNativeDriver 更改为 false，只是为了消除错误。

const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event(
      [
        null,
        {
          dx: pan.x, // x,y are Animated.Value
          dy: pan.y,
        },
      ],
      { useNativeDriver: false }
    ),
    onPanResponderRelease: () => {
      Animated.spring(
        pan, // Auto-multiplexed
        { toValue: { x: 0, y: 0 }, useNativeDriver: false }

        // Back to zero
      ).start();
    },
  });

---

代码摘自

Expo Documentations

---

这将消除这两个错误：

Animated.event 现在需要第二个选项参数
config.onPanResponderMove 不是一个函数

---

列出项目

Answer 3

在

{ useNativeDriver: false }

中添加

Animated.event

，然后重新启动应用程序。我修好了。
示例：

 const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}], {
        useNativeDriver: false,
      }),
      onPanResponderRelease: () => {
        Animated.spring(pan, {
          toValue: {x: 0, y: 0},
          useNativeDriver: true,
        }).start();
      },
    }),
  ).current;

Answer 4

在结束方括号后添加 {useNativeDriver: false} 即可工作。

        onScroll={Animated.event(  [
          {
            nativeEvent: {
              contentOffset: {
                x: scrollX,
              },
            },
          },
        ],{useNativeDriver: false}  )