react-native - 如何使用带有索引的 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;
                },
            })
        }

标签： react-native

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