วิธีคำนวณและระบุสิ่งที่ผิดปกติ PanResponder เหตุการณ์?

0

คำถาม

ฉันค่อนข้างใหม่เพื่อให้มีการเคลื่อนไหวเมื่อรพิมพ์แป้นพิมพ์และเครื่องมือจัดการ. ฉันอ่านเอกสารคู่มือในการโต้ตอบเป็นชนพื้นเมืองที่การเคลื่อนไหวและฉันเจอ snippet ของรหัสนั่นให้คุณย้ายไปอยู่ที่สีน้ำเงินในกล่อง

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;

อย่างไรก็ตามฉันต้องการที่จะคอนโซล.ปูมบันทึกหรือ sone วยการคำณวนตอนที่ panresponder ย้ายงั้นผมพยายามรุงภาพลักษณ์ที่สมบูรณ์ของฉัน opPanResponderMove แต่สีฟ้านกล่อง doesnt องย้ายอีกต่อไปแล้ว ฉันสงสัยว่าทำไม?

ฉันมีการแก้ไขรหัส:

onPanResponderMove: (event, gestureState) => {
        console.log(event);
        console.log(gestureState);
        Animated.event([
            null,
            { dx: pan.x, dy: pan.y }
          ])
      },
animation react-native
2021-11-24 01:44:24
1

คำตอบที่ดีที่สุด

1

มีปัญหาเรื่องปัญหาของคุณ อยู่ที่นี่

มันบอกว่า

สาเหตุก็เพราะการกระตุ้นการทำงาน.เหตุการณ์()เดียวที่สร้าฟังก์ชันที่ใช้ในการจาก onPanResponderMove มันก็ต้องการค่าปริยายอาร์กิวเมนต์ evt,gestureState

และนี่คือแก้ไข:

onPanResponderMove: (event, gestureState) => {
        console.log(event);
        console.log(gestureState);
        return Animated.event([
            null,
            { dx: pan.x, dy: pan.y }
          ])(event,gestureState);
      },
2021-11-24 03:51:12

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่