父边界内的可拖动视图

Question

我面临一项任务，我想在背景图像上放置一个可拖动的标记，然后在背景图像中获取标记的坐标。

我遵循了这个简洁的教程，使用Animated.Image、PanResponder和Animated.ValueXY制作了一个可拖动的标记。问题是，我不知道如何将可拖动视图限制为仅在其父视图(背景图像)的边界内移动。

非常感谢您的帮助：)

问候
Jens

Answer 1

这里有一种使用react原生手势响应器的方法。

import React, { Component } from 'react'
import {
StyleSheet,
Animated,
View,
} from 'react-native'
import { createResponder } from 'react-native-gesture-responder'
const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
draggable: {
height: 50,
width: 50,
},
})
export default class WorldMap extends Component {
constructor(props) {
super(props)
this.state = {
x: new Animated.Value(0),
y: new Animated.Value(0),
}
}
componentWillMount() {
this.Responder = createResponder({
onStartShouldSetResponder: () => true,
onStartShouldSetResponderCapture: () => true,
onMoveShouldSetResponder: () => true,
onMoveShouldSetResponderCapture: () => true,
onResponderMove: (evt, gestureState) => {
this.pan(gestureState)
},
onPanResponderTerminationRequest: () => true,
})
}
pan = (gestureState) => {
const { x, y } = this.state
const maxX = 250
const minX = 0
const maxY = 250
const minY = 0
const xDiff = gestureState.moveX - gestureState.previousMoveX
const yDiff = gestureState.moveY - gestureState.previousMoveY
let newX = x._value + xDiff
let newY = y._value + yDiff
if (newX < minX) {
newX = minX
} else if (newX > maxX) {
newX = maxX
}
if (newY < minY) {
newY = minY
} else if (newY > maxY) {
newY = maxY
}
x.setValue(newX)
y.setValue(newY)
}
render() {
const {
x, y,
} = this.state
const imageStyle = { left: x, top: y }
return (
<View
style={styles.container}
>
<Animated.Image
source={require('./img.png')}
{...this.Responder}
resizeMode={'contain'}
style={[styles.draggable, imageStyle]}
/>
</View>
)
}
}

Answer 2

我只使用react原生PanResponder和Animated库以另一种方式实现了这一点。它需要许多步骤才能完成，并且很难根据文档来确定，然而，它在两个平台上都运行良好，而且似乎性能不错。

第一步是找到父元素(在我的情况下是View)的高度、宽度、x和y。View采用onLayout道具。onLayout={this.onLayoutContainer}

这是一个函数，我在其中获得父级的大小，然后将State设置为值，这样我就可以在下一个函数中使用它了。

`  onLayoutContainer = async (e) => {
await this.setState({
width: e.nativeEvent.layout.width,
height: e.nativeEvent.layout.height,
x: e.nativeEvent.layout.x,
y: e.nativeEvent.layout.y
})
this.initiateAnimator()
}`

在这一点上，我已经知道了父母在屏幕上的大小和位置，所以我做了一些数学运算，并启动了一个新的动画。ValueXY。我设置了图像偏移的初始位置的x和y，并使用已知值将图像居中放置在元素中。

我继续用适当的值设置我的panResponder，但最终发现我必须对x和y值进行插值，以提供它可以操作的边界，再加上"钳制"动画，使其不超出这些边界。整个功能如下：

`  initiateAnimator = () => {
this.animatedValue = new Animated.ValueXY({x: this.state.width/2 - 50, y: ((this.state.height + this.state.y ) / 2) - 75 })
this.value = {x: this.state.width/2 - 50, y: ((this.state.height + this.state.y ) / 2) - 75 }
this.animatedValue.addListener((value) => this.value = value)
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: ( event, gestureState ) => true,
onMoveShouldSetPanResponder: (event, gestureState) => true,
onPanResponderGrant: ( event, gestureState) => {
this.animatedValue.setOffset({
x: this.value.x,
y: this.value.y
})
},
onPanResponderMove: Animated.event([ null, { dx: this.animatedValue.x, dy: this.animatedValue.y}]),
})
boundX = this.animatedValue.x.interpolate({
inputRange: [-10, deviceWidth - 100],
outputRange: [-10, deviceWidth - 100],
extrapolate: 'clamp'
})
boundY = this.animatedValue.y.interpolate({
inputRange: [-10, this.state.height - 90],
outputRange: [-10, this.state.height - 90],
extrapolate: 'clamp'
})
}`

这里的重要变量是boundX和boundY，因为它们是不会超出所需区域的插值。然后我设置了我的动画。具有这些值的图像，如下所示：

` <Animated.Image
{...this.panResponder.panHandlers}
style={{
transform: [{translateX: boundX}, {translateY: boundY}],
height: 100,
width: 100,
}}
resizeMode='contain'
source={eventEditing.resource.img_path}
/>`

我必须确保的最后一件事是，在动画尝试渲染之前，所有值都可用于动画，所以我在渲染方法中设置了一个条件，首先检查this.state.width，否则，在此期间渲染一个虚拟视图。所有这些加在一起让我实现了预期的结果，但正如我所说，完成一件看似简单的事情似乎过于冗长/复杂——"待在父母身边">