Come calcolare e rilevare PanResponder evento?

Question 1

Io sono abbastanza nuovo di animazione e gesto gestore. Sto leggendo la documentazione ufficiale di reagire nativo animazioni e ho trovato un frammento di questo codice, che consente di spostare la scatola blu.

https://reactnative.dev/docs/animations

import React, { useRef } from "react";
import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";

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

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Drag & Release this box!</Text>
      <Animated.View
        style={{
          transform: [{ translateX: pan.x }, { translateY: pan.y }]
        }}
        {...panResponder.panHandlers}
      >
        <View style={styles.box} />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  titleText: {
    fontSize: 14,
    lineHeight: 24,
    fontWeight: "bold"
  },
  box: {
    height: 150,
    width: 150,
    backgroundColor: "blue",
    borderRadius: 5
  }
});

export default App;

Tuttavia, voglio console.di registro o di fare alcuni calcoli quando panresponder spostare così ho provato modificando il mio opPanResponderMove ma la scatola blu non si muove più. Mi chiedevo per quale motivo?

Il mio codice modificato:

onPanResponderMove: (event, gestureState) => {
        console.log(event);
        console.log(gestureState);
        Animated.event([
            null,
            { dx: pan.x, dy: pan.y }
          ])
      },

Question 2

C'era un problema circa il tuo problema qui

Ha detto che

Motivo era perché Animazione.evento() genera solo la funzione che viene utilizzato da onPanResponderMove, ha bisogno di argomenti di default evt, gestureState

e qui è il fix:

onPanResponderMove: (event, gestureState) => {
        console.log(event);
        console.log(gestureState);
        return Animated.event([
            null,
            { dx: pan.x, dy: pan.y }
          ])(event,gestureState);
      },

jted95 · Answer 1 · 2021-11-24T03:51:12

C'era un problema circa il tuo problema qui

Ha detto che

Motivo era perché Animazione.evento() genera solo la funzione che viene utilizzato da onPanResponderMove, ha bisogno di argomenti di default evt, gestureState

e qui è il fix:

onPanResponderMove: (event, gestureState) => {
        console.log(event);
        console.log(gestureState);
        return Animated.event([
            null,
            { dx: pan.x, dy: pan.y }
          ])(event,gestureState);
      },

Come calcolare e rilevare PanResponder evento?

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria