使用钩子时如何设置偏移量?

Question

我找到了一个代码示例，演示了如何使用panResponder在反应本机中进行拖放操作。您可以在以下零食中尝试代码：

https://snack.expo.io/S14RvxJ_L

我面临的问题是，如果您将物品放在放置区域，然后触摸它，则位置会一直重置。

我希望用户能够将项目拖离放置区域而不会出现此问题。 所以再次澄清：您将项目拖到放置区域，它将被涂成红色。现在再次拖动项目并尝试拖动到您想要的任何位置，位置将被重置。 我尝试用钩子设置圆的初始位置，尝试在开始时使用起始值设置手势的 y0 和 x0。到目前为止还没有成功。

到目前为止，我发现，我可以在PanResponderGrant中使用pan.setOffset((。但是由于平底锅是使用 useRef(( 创建的，它是可变的并且无法更改，或者更好的是我不知道如何更改。

我将如何以最佳方式实现这一目标？

import React from 'react';
import { StyleSheet, View, Text, Dimensions, Animated, PanResponder } from 'react-native';
export default function Drag() {
const dropZoneValues = React.useRef(null);
const pan = React.useRef(new Animated.ValueXY());
const [bgColor, setBgColor] = React.useState('#2c3e50');
const isDropZone = React.useCallback((gesture) => {
const dz = dropZoneValues.current;
return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
}, []);
const onMove = React.useCallback((_, gesture) => {
if (isDropZone(gesture)) setBgColor('red');
else setBgColor('#2c3e50');
}, [isDropZone]);
const setDropZoneValues = React.useCallback((event) => {
dropZoneValues.current = event.nativeEvent.layout;
});
const panResponder = React.useMemo(() => PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([null, {
dx  : pan.current.x,
dy  : pan.current.y
}], {
listener: onMove
}),
onPanResponderRelease: (e, gesture) => {
if (!isDropZone(gesture)) {
Animated.spring(
pan.current,
{toValue:{x:0,y:0}}
).start();
}
}
}), []);
return (
<View style={styles.mainContainer}>
<View
onLayout={setDropZoneValues}
style={[styles.dropZone, {backgroundColor: bgColor}]}
>
<Text style={styles.text}>Drop me here!</Text>
</View>
<View style={styles.draggableContainer}>
<Animated.View
{...panResponder.panHandlers}
style={[pan.current.getLayout(), styles.circle]}
>
<Text style={styles.text}>Drag me!</Text>
</Animated.View>
</View>
</View>
);
}
let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
let styles = StyleSheet.create({
mainContainer: {
flex: 1
},
dropZone: {
height  : 100,
backgroundColor:'#2c3e50'
},
text        : {
marginTop   : 25,
marginLeft  : 5,
marginRight : 5,
textAlign   : 'center',
color       : '#fff'
},
draggableContainer: {
position    : 'absolute',
top         : Window.height/2 - CIRCLE_RADIUS,
left        : Window.width/2 - CIRCLE_RADIUS,
},
circle: {
backgroundColor     : '#1abc9c',
width               : CIRCLE_RADIUS*2,
height              : CIRCLE_RADIUS*2,
borderRadius        : CIRCLE_RADIUS
}
});

(代码来自： https://github.com/facebook/react-native/issues/25360#issuecomment-505241400(

Answer 1

我终于解决了

您可以在此处查看结果：https://snack.expo.io/Bky!LlqbI

你必须在 onPanResponderGrant 中使用 setOffset 和 setValue。 pan 是一个可变对象，但仍可以使用 pan.current.setOffset(( 或 pan.current.setValue(( 进行更改。最后，我不得不将pan.current.flattenOffset添加到PanResponderRelease，以便保留该位置以用于放置区域中的下一次拖动。