Как передать дополнительные данные в panResponder (React Native)?

Question

Я работаю над проектом, в котором у меня есть несколько <Image /> компонентов, но я сталкиваюсь с проблемой, когда я не могу указать, какое изображение захватывает пользователь, в любой момент времени. Моя первая мысль обойти эту проблему заключалась в том, чтобы обернуть изображение в 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

 class ImageCustom extends React.PureComponent{
    constructor(props){
       super(props)
       this._panResponder = PanResponder.create({....})
    }
    render(){
     const {source, style} = this.props
     return(
       <Image source={source} style={style} {...this._panResponder.panHandlers} />
     )     
   }
}

App.js

class App extends React.Component {
  const renderShape = ( shape, i ) => (
      <ImageCustom 
        key={`${shape.name}${i}`} 
        style={style.shapeImg} 
        source={shape.activeImg} 
      >
    )
 ...
}

Answer 2

Я смог ответить на свой вопрос. Как я решил свою проблему, было довольно просто. Я передал данные (объект) в качестве опоры в каждый <Image /> компонент, например: <Image shape={shape} />. После введения компонента с пропеллером я перехожу к onPanResponderGrant: (evt, gestureState) и нахожу в memoizedProps (evt._targetInst.memoizedProps.shape). Когда у меня есть данные, которые я ищу, я обновляю их состояние.

Answer 3

Вы можете разделить изображение на экран и использовать функцию panResponder с этим экраном.