firestore保存来自react native的可拖动图像

Question

我正在开发一个应用程序，可以在其中添加多个图像，这些图像可以在整个屏幕上拖动。这在一定程度上有效。但我想做的是将图像、位置(x，y(保存到firestore。我还没有找到一些能够做到这一点的示例代码。

有人知道吗？

Answer 1

设法找到一个用于拖放html对象的代码片段。根据此讨论，可以使用element.getBoundingClientRect()方法并记录形状的位置。应该看起来像这样：

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

从那里，对于返回的位置。您可以按照本文档的说明在Firestore中将数据添加到集合中。

Answer 2

当我使用panresponser时，我设法找到了解决方案。我得到x和y值，并将它们添加到firestore中。

这是我使用的代码的一部分：

const pan = useState(new Animated.ValueXY({x: xval, y: yval}))[0];
const panResponder = useState(
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {

pan.setOffset({
x: pan.x._value,
y: pan.y._value
});
pan.setValue({x: xval, y: yval});
},
onPanResponderMove: Animated.event(
[
null,
{ dx: pan.x, dy: pan.y }
],
{useNativeDriver: false}
),
onPanResponderRelease: () => {
pan.flattenOffset();
stagesRef.doc(parent).collection('stageimages').doc(id)
.update({
x: pan.x._value,
y: pan.y._value,
}).then(function() {

});
}
})
)[0];

舞台Ref是消防仓库的基础。xval和yval是来自另一个文件的值。