如何将PanResponder与索引一起使用

Question

我正在开发React本机应用程序并使用PanResponder动态移动项目。当我选择0索引元素的项目时，移动比选择其他索引元素PanResponder不移动元素更容易。当我选择项目保存在数组上的项目并在屏幕上显示多个项目时。比我移动0index项目正常工作，移动到其他索引项目而不是平移响应器不移动。请帮我提前谢谢你

//Code
{this.state.cards.map((d, index) => (
<Svg width={Dimensions.get('window').width} height={Dimensions.get('window').height}>
<Image
key={index}
{...this.getPanResponder(index).panHandlers}
x={d.x}
y={d.y}
width="60"
height="100"
opacity="1"
href={d.image}
/>
</Svg>
))}
getPanResponder(index) {
return this.panResponder = panResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => false,
onStartShouldSetPanResponderCapture: (evt, gestureState) =>
true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
true,
onPanResponderMove: (evt, gesture) => {
this.setState({ x: gesture.dx, y: gesture.dy })
var items = this.state.cards;
items[index].x = evt.nativeEvent.locationX;
items[index].y = evt.nativeEvent.locationY;
this.setState({ cards: items });
},
onPanResponderRelease: (evt, gs) => {
this.setState({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY })
},
onPanResponderTerminate: (evt, gestureState) => {
},
onShouldBlockNativeResponder: (evt, gestureState) => {
return true;
},
})
}

Answer 1

试试这个：

export default class App extends React.Component {
state = {
cards: [...],
cancelContentTouches: true,
};
_toggleState = () => this.setState({cancelContentTouches: !this.state.cancelContentTouches});
_panResponder = (index) => {
return PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: (evt, gesture) => {
this._toggleState(); // CALL FIRST HERE TO DISABLE SCROLLING!
},
onPanResponderMove: (evt, gesture) => {
this.setState({ x: gesture.dx, y: gesture.dy });
var items = this.state.cards;
items[index].x = evt.nativeEvent.locationX;
items[index].y = evt.nativeEvent.locationY;
this.setState({ cards: items });
},
onPanResponderRelease: (evt, gs) => {
this.setState({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY })
},
onPanResponderTerminate: (evt, gestureState) => {
this._toggleState(); // CALL AGAIN HERE TO ENABLE SCROLLING!
},
})
};

return (
<ScrollView
pagingEnabled
canCancelContentTouches={this.state.cancelContentTouches}
scrollEventThrottle={1}>
{
this.state.cards.map((d, index) => (
<Svg width={Dimensions.get('window').width} height={Dimensions.get('window').height}>
<Image
key={index}
{...this._panResponder(index).panHandlers}
x={d.x}
y={d.y}
width="60"
height="100"
opacity="1"
href={d.image}
/>
</Svg>
))
}
</ScrollView>
);
}