如何在 React Native 中创建多个 panresponders？

Question

我知道如何创建 panResponder，但我不确定如何创建它的多个实例。例如。我有一组独立移动的元素，我必须将每个响应器分别附加到元素以从中获取布局值。任何帮助将不胜感激被困了很长时间。

    pan = new Animated.ValueXY();

    panResponder = PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderGrant: (evt, gestureState) => {
            this.pan.setOffset(this.pan.__getValue());
            this.pan.setValue({ x: 0, y: 0 });
        },

    onPanResponderMove: Animated.event([
      null,
      { dx: this.pan.x, dy: this.pan.y }
    ]),
    onPanResponderRelease: (e) => {
      console.log(this.pan.getLayout(), 'layout values')
      this.pan.flattenOffset();
    }
  });

 render() {
      
    return (
      <View style={styles.container}>
        <View  style={{backgroundColor:'red', height:300, width:300}}>
            <Animated.View
                pointerEvents="box-none"
                style={[styles.box, {
                    transform: [{ translateX: this.pan.x }, { translateY: this.pan.y }]
                }]}
                {...this.panResponder.panHandlers}>
        </Animated.View>
      </View>
      </View>
    );
  }

Answer 1

1. 您可以根据数组创建多个指向 Parent 组件本身的引用实例，并将 PanResponder 附加到它

class Parent extends Component {
  constructor(props) {
    super(props);
    this.panRefs = this.props.elements.map(e => React.createRef());

    this.panRefs.forEach(panRef => {
      panRef.current = PanResponder.create({})
    });
  }

  render() {}
}

2. 您可以创建一个子组件并将其附加到一个 PanResponder 引用。

class Parent extends Component {
  render() {
    const arr = Array.from({ length: 8 });

    return (
      <View>
        {arr.map((elem, idx) => {
          return <Child elem={elem} key={idx} />
        })}
      </View>
    )
  }
}

class Child extends Component {
  constructor(props) {
    super(props);

    this.panRef = React.createRef();

    this.panRef.current = PanResponder.create({})
  }

  render() {}
}