如何在本机反应中创建多个panresponders？答案

【问题标题】：How to create multiple panresponders in react native?如何在本机反应中创建多个panresponders？
【发布时间】：2021-06-15 04:08:12
【问题描述】：

我知道如何创建 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>
    );
  }

【问题讨论】：

标签： javascript reactjs react-native react-native-android react-native-navigation

【解决方案1】：

您可以根据数组创建父组件本身的多个引用实例，并将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() {}
}

您可以创建一个子组件并将 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() {}
}

【讨论】：