Обновление состояния изнутри PanResponder - PullRequest
Новая
       9

Обновление состояния изнутри PanResponder

1 голос
/ 12 апреля 2020

Я делаю приложение с использованиемact-native-svg, и у меня возникают проблемы с обновлением состояния компонента изнутри PanResponder.

У меня есть элемент с в нем. Положение относительно переменной, называемой originCoords (переменная состояния). Я использовал PanResponder, чтобы сделать так, чтобы при выполнении жеста панорамирования (с внутри него) перемещался и, когда жест закончился, возвращался в исходное положение.

Я пытаюсь изменить originCoords после завершения жеста панорамирования, поэтому, даже если возвращается в исходное положение, остается в новом положении. Но мне очень трудно изменить состояние originCoords изнутри PanResponder, в файле createPanResponder. js, он остается неизменным, по крайней мере, в эмуляторе android. Любая помощь приветствуется.

Вот мои файлы: 

// MapScreen.js

import React, { useRef, useState } from "react";
import { Animated } from "react-native";
import { Svg, Circle } from "react-native-svg";
import { createPanResponder } from "../services/utils/createPanResponder";

export const MapScreen = () => {
  const [originCoords, setOriginCoords] = useState({x: 0, y: 0});
  const [circleCoords, setCircleCoords] = useState({x: 20, y: 20});

  const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = createPanResponder(pan, originCoords, setOriginCoords);

  return (
    <Animated.View
      style={{transform: [{ translateX: pan.x }, { translateY: pan.y }],}}
      {...panResponder.panHandlers}
    >
      <Svg width='300' height='300' style={{ backgroundColor: "blue" }}>
        <Circle
          cx={`${circleCoords.x - originCoords.x}`}
          cy={`${circleCoords.y - originCoords.y}`}
          r="5"
          stroke="white"
          strokeWidth="1"
        />
      </Svg>
    </Animated.View>
  );
};

import { useRef } from "react";
import { PanResponder, Animated } from "react-native";

export const createPanResponder = (pan, originCoords, setOriginCoords) => {
  return useRef(
    PanResponder.create({
      // PanResponder default configs have been removed to be more succint
      onPanResponderMove: (evt, gestureState) => {
        // sets pan.x and pan.y to equal gesture's deltas
        Animated.event([{ x: pan.x }])({ x: gestureState.dx });
        Animated.event([{ y: pan.y }])({ y: gestureState.dy });
      },

      onPanResponderRelease: (evt, gestureState) => {
        //resets pan.x and pan.y
        Animated.event([{ x: pan.x }])({ x: 0 });
        Animated.event([{ y: pan.y }])({ y: 0 });

        // PROBLEM IS HERE, setOriginCoords DOESN'T DO ANYTHING
        console.log(originCoords); // { x: 0, y: 0 }
        const { dx, dy } = gestureState;
        setOriginCoords({ ...originCoords, dx, dy });
        console.log(originCoords); // { x: 0, y: 0 }
      },
    })
  ).current;
};
...