React-native-gesture-handler: Как зафиксировать обработчик PanGesture в одном направлении за раз?

Созданный на 29 нояб. 2018 · 4Комментарии · Источник: software-mansion/react-native-gesture-handler

Я бы хотел, чтобы мой взгляд двигался по оси X или Y, но никогда одновременно.
У меня есть два вложенных PanGestureHandler (возможно, можно использовать и один, я не уверен):

     <PanGestureHandler
        onHandlerStateChange={onGestureEventY}
        onGestureEvent={onGestureEventY}
      >
        <Animated.View style={{ flex: 1 }}>
          <PanGestureHandler
            onHandlerStateChange={onGestureEventX}
            onGestureEvent={onGestureEventX}
          >
              // ....
          </PanGestureHandler>
        </Animated.View>
      </PanGestureHandler>
    );

Я хотел бы активировать его при перемещении по X, чтобы движение Y игнорировалось, и наоборот.
Я просмотрел эту часть документации: https://kmagiera.github.io/react-native-gesture-handler/docs/interactions.html, но, похоже, он не поддерживает этот вариант использования.

Как можно было достичь этого рецепта?

Источник

wcandillon

Самый полезный комментарий

Внимательно прочитав документацию, я нашел решение своей проблемы. Все <PanGestureHandlers> должны заключаться в <Animated.View> . Затем я могу использовать ожидание и установить правильные условия, чтобы один из обработчиков панорамирования не распознал жест. См. Пример ниже.

     <PanGestureHandler
        onHandlerStateChange={onGestureEventX}
        onGestureEvent={onGestureEventX}
        ref={this.horizontalHandler}
        minDist={10}
        failOffsetY={[-10, 10]}
      >
        <Animated.View style={{ flex: 1 }}>
          <PanGestureHandler
            waitFor={this.horizontalHandler}
            onHandlerStateChange={onGestureEventY}
            onGestureEvent={onGestureEventY}
          >
            <Animated.View style={{ flex: 1 }}>
         //...
            </Animated.View>
          </PanGestureHandler>
        </Animated.View>
      </PanGestureHandler>

wcandillon 30 нояб. 2018

❤6

Все 4 Комментарий

     <PanGestureHandler
        onHandlerStateChange={onGestureEventX}
        onGestureEvent={onGestureEventX}
        ref={this.horizontalHandler}
        minDist={10}
        failOffsetY={[-10, 10]}
      >
        <Animated.View style={{ flex: 1 }}>
          <PanGestureHandler
            waitFor={this.horizontalHandler}
            onHandlerStateChange={onGestureEventY}
            onGestureEvent={onGestureEventY}
          >
            <Animated.View style={{ flex: 1 }}>
         //...
            </Animated.View>
          </PanGestureHandler>
        </Animated.View>
      </PanGestureHandler>

wcandillon 30 нояб. 2018

❤6

@wcandillon вы случайно перекусили?

zachgibson 14 дек. 2018

У меня есть эта версия, которая, я думаю, работает хорошо: https://github.com/wcandillon/can-it-be-done-in-react-native/blob/f605d034d414a70884eff95414072030f5598410/flutter-animations/components/Sections.js

wcandillon 15 дек. 2018

Итак, подход с использованием нескольких респондентов Pan не сработал для меня. Это было слишком глючно. Это то, что я сделал вместо этого. Я взял переменную translateDirection, инициализировал ее без направления -1. А когда состояние было активным, вычислялось, в каком направлении должен двигаться вид, с помощью простого сравнения translation.y и translation.x. Затем, когда направление было установлено, я меняю только translateX или translateY в зависимости от направления:
`cond (eq (state, State.ACTIVE), [

    cond(
      eq(translateDirection, -1),
      cond(
        greaterThan(translation.y, translation.x),
        set(translateDirection, 2),
        set(translateDirection, 1)
      )
    ),
    cond(
      neq(translateDirection, -1),
      cond(
        eq(translateDirection, 1),
        set(translateX, add(offsetX, translation.x)),
        set(translateY, translation.y)
      )
    ),
  ]),`