ReactNative PanResponder limit X позиция

Вместо того, чтобы позволить вашей анимации умирать на ваших границах, вы можете интерполировать свой Animated.Value с y = x, но с ограничением его ширины.

return (
    <View style={styles.container}>
        <Animated.View 
            style={{
                transform: [{
                    translateX: this.state.pan.x.interpolate({
                        inputRange: [0, trackWidth ],
                        outputRange: [0, trackWidth ],
                        extrapolate: 'clamp'
                    })
                }],

            }} 
            {...this._panResponder.panHandlers}
        />
    </View>
);

Вот более подробный пример: https://github.com/olapiv/expo-audio-player/blob/master/src/AudioSlider.js.

Я пытался сделать что-то подобное; Я хотел, чтобы вы могли частично потянуть страницу, а затем отпустить, и она вернется на место.

Мое решение было таким:

panResponder = PanResponder.create({
  onMoveShouldSetPanResponderCapture: (e, { dx }) => {
    // This will make it so the gesture is ignored if it's only short (like a tap).
    // You could also use moveX to restrict the gesture to the sides of the screen.
    // Something like: moveX <= 50 || moveX >= screenWidth - 50
    // (See https://facebook.github.io/react-native/docs/panresponder)
    return Math.abs(dx) > 20;
  },
  onPanResponderMove: (e, gestureState) => (
    // Here, 30 is the limit it stops at. This works in both directions
    Math.abs(gestureState.dx) > 30
      ? null
      : Animated.event([null, { dx: this.animatedVal }])(e, gestureState)
  ),
  onPanResponderRelease: (e, { vx, dx }) => {
    // Here, abs(vx) is the current speed (not velocity) of the gesture,
    // and abs(dx) is the distance traveled (not displacement)
    if (Math.abs(vx) >= 0.5 || Math.abs(dx) >= 30) {
      doSomeAction();
    }
    Animated.spring(this.animatedVal, {
      toValue: 0,
      bounciness: 10,
    }).start();
  },
});

???? Этот метод не отменяет обработчик жестов, если пользователь все еще удерживает его после превышения предела X. Измените MaxDistance и MinDistance на любые значения, которые вам нравятся ????

onPanResponderMove: (e, gestureState) => {
  // Configure Min and Max Values
  const MaxDistance = maxDistance;
  const MinDistance = 0;
  const dxCapped = Math.min(Math.max(parseInt(gestureState.dx), MinDistance), MaxDistance);

  // If within our bounds, use our gesture.dx....else use dxCapped
  const values = {}
  if(gestureState.dx < MaxDistance && gestureState.dx > MinDistance){
    values.dx = gestureState.dx
    values.dy = gestureState.dy
  }else{
    values.dx = dxCapped
    values.dy = gestureState.dy
  }

  //Animate Event
  Animated.event([null, {
    dx: pan.x,
    dy: pan.y,
  }])(e, values);
},

Надеюсь, это поможет некоторым людям. ????

Сложность заключается в том, что, хотя я не могу переместить значок за пределы этого зажима, значение pan.x действительно выходит за пределы ограничения, хотя вы его не видите. Затем, когда вы хотите переместить его обратно, вы не знаете, сколько смахивания вам нужно, чтобы переместить его обратно. Это может быть нюанс.

Мое решение:

      onPanResponderGrant: () => {
        console.log("pan responder was granted access!")
        pan.setOffset({
          x: (pan.x._value>xMax)? xMax : (pan.x._value<xMin)? xMin: pan.x._value,
          y: (pan.y._value>yMax)? yMax : (pan.y._value<yMin)? yMin: pan.y._value,
        });
      },

Затем можно также выполнить console.log pan.x._value для двойной проверки.

      onPanResponderRelease: () => {
        pan.flattenOffset();}

Я нашел это полезным для моего собственного проекта. Примечание может использовать только pan.x_value, но не pan.x. В моем случае я также использовал useMemo вместо useRef, чтобы ограничения можно было сбросить, о чем я узнал из PanResponder React Native имеет устаревшее значение из useState?

Есть решение аналогичной проблемы по этому другому вопросу: https://stackoverflow.com/a/58886455/9021210

которые можно использовать для того, что вы ищете

const DRAG_THRESHOLD = /*configure min value*/
const DRAG_LIMIT = /*configure max value*/

onPanResponderMove: (e, gesture) => {
   if ( (Math.abs( gesture.dy ) > DRAG_THRESHOLD) && 
        (Math.abs( gesture.dy ) < DRAG_LIMIT ) )
   {
       return Animated.event([
           null, {dx: 0, dy: pan.y}
       ]) (e, gesture)
   }
 },

Это не мой ответ, поэтому я рекомендую вам перейти по ссылке, чтобы увидеть дальнейшие объяснения, и, если вам это нравится, проголосуйте за оригинальный плакат! :) Я пытался сделать то же самое, и у меня это сработало! Надеюсь, это поможет.

P.S. Я обнаружил, что другие решения, основанные на проверке значения анимации, а не значения жеста, иногда застревают.