Question

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

 //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>
   );
}

如何将PanResponder与索引一起使用

1 个答案: