React Native Error: „Animated.event wymaga teraz drugiego argumentu opcji”

Question

Czy ktoś wie, dlaczego po uruchomieniu poniższego kodu pojawia się następujący błąd?

Błąd zgłoszony przez React Native Expo w linii poleceń:

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

... dużo więcej tego samego wyniku dla wielu wierszy ... Mogę opublikować pełne wyjście, jeśli ludzie uważają, że jest to potrzebne.

To jest kod - to nie jest skomplikowane:

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;

Dziękuję Ci!

Answer 1

Jak powiedziano tutaj , musisz określić useNativeDriverw swoim kodzie (ustawić go na true lub false, w zależności od zastosowania)

Twój kod powinien teraz wyglądać następująco:

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;

Będąc jedyną różnicą tutaj:

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