PanResponder родительский и дочерний компоненты

Система зала в кинотеатре: есть родительский компонент (зал) у него есть дочерние компоненты (ряды), у рядов есть свои дочерние компоненты (места). Зал должен двигаться, места должны выбираться. Для зала настроил PanResponder, он работает, зал можно двигать в любом направлении. Если нажать на место, то оно выбирается, проблем нет. Но если нажать на место и попробовать двигать зал то ничего не происходит, не срабатывает ни движение зала, ни нажатие на место. Как двигать зал если палец нажат на месте?

Примерные схемы компонентов

  class HallPlan extends Component {
    constructor(props) {
      super(props);
      /* over code */
      let i;
      this.state.moving = new Animated.ValueXY({
        x: -(this.state.width - this.state.width*this.state.scale) / 2,
        y: -(this.state.height - this.state.height*this.state.scale) / 2 + w*.050,
      });
      this.state.movingResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,

        onPanResponderMove: Animated.event(
          [
            null,
            {
              dx: this.state.moving.x;,
              dy: this.state.moving.y,
            },
          ],
          {useNativeDriver: false,},
        ),
        onPanResponderRelease: (event, gestureState) => { this.state.moving.flattenOffset(); },
        onPanResponderGrant: () => {
          this.state.moving.setOffset({
            x: this.state.moving.x._value,
            y: this.state.moving.y._value,
          });
        }
      });
    }

    render() {
      return(
        <Animated.View
          style={[
            styles.hallHolder,
            {
              transform: [
                {scale: this.state.scale}
              ],
            },
            this.state.moving.getLayout(),
          ]}
          ref={(element) => {this.state.hallPlanTag = element}}
          {...this.state.movingResponder.panHandlers}
        >
          <View style={styles.hallPlanHolder}>
            {
              this.state.places.map((row, key) => {
                return(
                  <HallRow // это ряд в нем места
                    {...props}
                  />
                );
              })
            }
          </View>
        </Animated.View>
      );
    }
  }

  class HallPlace extends Component {
    constructor(props) {
      super(props);
    }

    selectPlace(event) {}

    render() {
      return(
        <View>
          <Pressable onPress={(event) => { this.selectPlace(event); }}>
            <Text style={{fontSize: fc*10}}>{this.state.place}</Text>
          </Pressable>
        </View>
      );
    }
  }

Ответы (0 шт):