如何将附加数据传递给 panResponder (React Native)？

Question

我正在开发一个项目，其中有多个<Image />组件，但遇到了一个问题，即我无法指示用户在任何给定时间正在抓取哪个图像。我首先想到解决这个问题是将图像包装在 a 中TouchableOpacity，onPress 函数将触发并传递图像数据以更新状态 ( this.setState({ currentImage: imageData }))。但这不适用于panResponder. 所以我的问题是，有什么方法可以将数据传递给 panResponder 或者如何让 panResponder 用户正在抓取哪个图像？

class App extends React.Component {

  point = new Animated.ValueXY();

  constructor() {
    super();
    this.state = {
      shapesArr: [],
      isGrabbing: false,
      currentShape: {},
    };
this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        console.log(findNodeHandle(evt.nativeEvent.target));
        this.setState({ isGrabbing: true });
        Animated.event([{ x: this.point.x }])({ x: gestureState.x0 - 21 })
        Animated.event([{ y: this.point.y }])({ y: gestureState.y0  - 21})

        // The gesture has started. Show visual feedback so the user knows
        // what is happening!
        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => {
        // console.log(gestureState);
        Animated.event([{ y: this.point.y }])({ y: gestureState.moveY - 21 })
        Animated.event([{ x: this.point.x }])({ x: gestureState.moveX - 21 })
        // Animated.event([{ x: this.point.x }])({ x: gestureState.moveX })


        // The most recent move distance is gestureState.move{X,Y}
        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => false,
      onPanResponderRelease: (evt, gestureState) => {
        // this.setState({ isGrabbing: false });

        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // this.setState({ isGrabbing: false });

        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    });
  }

  componentDidMount() {
    this.setState({ shapesArr: getShapes()})
  }

  render() {
    const { shapesArr, isGrabbing } = this.state;

    const renderShape = ( shape, i ) => (
      <Image 
        key={`${shape.name}${i}`} 
        style={style.shapeImg} 
        source={shape.activeImg} 
        {...this._panResponder.panHandlers} 
      >
    )
    return (
      <View style={style.container}>
        {isGrabbing && (
          <Animated.View
            style={[
              { 
                position: 'absolute',
                zIndex: 2, 
                top: this.point.y,
                left: this.point.x,
              }]}
          >
            {renderShape({ id: 2, name: 'star', activeImg: starImg }, 2)}
          </Animated.View> 
        )}
        <View style={style.selectionContainer}>
          {shapesArr.map((shape, i) => renderShape(shape, i))}
        </View>

      </View>
    )
  }
}

Answer 1

我能够回答我自己的问题。我如何解决我的问题非常简单。我将数据（一个对象）作为道具传递到每个<Image />组件中，如下所示<Image shape={shape} />：使用 prop 注入组件后，我会在( )onPanResponderGrant: (evt, gestureState)中查找。一旦获得了所需的数据，我就会用它来更新状态。memoizedPropsevt._targetInst.memoizedProps.shape