При срабатывании scrollTo
перетаскиваемый компонент визуально не остается под моим пальцем. Он движется вместе с ScrollView.
Ссылка на gif: https://imgur.com/qX3S9GQ
У меня есть <ScrollView>
с компонентами, которые можно перетаскивать. Я использую PanResponder
для функции перетаскивания. Перетаскивание в видимом Scrollview отлично работает.
Когда я перетаскиваю компонент в нижнюю часть экрана, я вызываю функцию scrollTo
. scrollTo({x: 0, y: scrollToOffsetY, animated: true})
При этом ScrollView автоматически прокручивается в положение, определяемое смещением.
Однако после прокрутки компонент, который реагирует на перетаскивание, не остается под моим прикосновением. Он движется вверх вместе с прокруткой. Он реагирует на мои прикосновения, но визуально отошел от моего пальца.
Как убедиться, что перетаскиваемый компонент остается под моим пальцем?
state = {
pan: new Animated.ValueXY(),
};
constructor(props) {
super(props);
this.panHandler = PanResponder.create({
... // All other PanResponder functions.
onPanResponderGrant: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => {
this.state.pan.setOffset({ x: 0, y: 0});
this.state.pan.setValue({x: 0, y: 0});
},
onPanResponderMove: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => this.moveDraggableComponent(event, gestureState),
onShouldBlockNativeResponder: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => true,
});
};
moveDraggableComponent = (event: GestureResponderEvent, gestureState: PanResponderGestureState) => {
const draggableComponentPosition: DraggableComponentPositionInScrollView = this.getPositionInScrollView(event);
if (draggableComponentPosition == DraggableComponentPositionInScrollView.BOTTOM) {
// Trigger scrollTo() to auto scroll the ScrollView.
// scrollView.scrollTo({x: 0, y: 100, animated: true});
// Get the old position before the scrollTo was triggered
let yPos = +(JSON.stringify(this.state.pan.y));
const xPos = +(JSON.stringify(this.state.pan.x));
// Increment the position of the dragged component based on the `scrollTo` offset
yPos += this.incrementer;
this.incrementer += 100;
// Creating a new position.
const targetDestination = {
x: +(JSON.stringify(this.state.pan.x)), //We don't need to change the x offset.
y: yPos, // new y position of the dragged component
};
this.state.pan.setValue({x: xPos, y: yPos});
// Move the dragged component to the new position.
Animated.spring(this.state.pan, {
toValue: targetDestination,
useNativeDriver: true,
}).start();
}
return Animated.event([
null,
{dx: this.state.pan.x, dy: this.state.pan.y},
])(event, gestureState);
}
// Determine whether the dragged component has reached the bottom of the screen. T
getPositionInScrollView = (event: GestureResponderEvent) => {
if (event.nativeEvent.pageY > (this.screenHeight - 125)) {
return DraggableComponentPositionInScrollView.BOTTOM;
}
}