reactjs - PanResponder 限制父容器 View

标签 reactjs react-native

我正在使用 PanResponder 作为屏幕上的可拖动框,但它当前可以移出屏幕。阅读没有示例的(非常令人困惑的)文档后,有没有办法限制框不移出屏幕?

这是我所拥有的:

componentWillMount () {

  this.animatedValue = new Animated.ValueXY()
  this.value = {x: 0, y: 0}
  this.animatedValue.addListener(value => this.value = value)
  this.panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: (evt, gestureState) => {
      return gestureState.dx !== 0 && gestureState.dy !== 0
    },
    onPanResponderGrant: (e, gestureState) => {
      this.animatedValue.setOffset({
        x: this.value.x,
        y: this.value.y,
      })
      this.animatedValue.setValue({x: 0, y: 0})
    },
    onPanResponderMove: (e, gestureEvent) => {
      this.pan(gestureEvent)
      Animated.event([
        null, {dx: this.animatedValue.x, dy: this.animatedValue.y}
      ])
    },
    onPanResponderRelease: (e, gestureState) => {
      this.animatedValue.flattenOffset()
      Animated.decay(this.animatedValue, {
        velocity: {x: gestureState.vx, y: gestureState.vy}
      }).start()
    }
  })
}

render () {

  return (
    <Animated.View
      {...this.panResponder.panHandlers}
      style={styles.box}
    >
      <Image source={{uri: 'uri'}} style={styles.imageDimensions} />
    </Animated.View>
  )
}

最佳答案

我做了一个基本的代码,如果你修改它可以帮助你。 Animated.View 无法移动到 X 坐标的负位置。

import React from 'react';
import { View, Animated, PanResponder } from 'react-native';

let _value = {x: 0, y:0};
const _animatedValue = new Animated.ValueXY();
let xOffset = 0;

export default function App() {

  React.useEffect(()=> {
    const listener = _animatedValue.addListener(
      (value) => _value = value
    );
    return () => {
      _animatedValue.removeListener(listener);
    }
  }, []);

  const panResponder = React.useMemo(() => PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponderCapture: () => true, // Same here, tell iOS that we allow dragging
    onPanResponderGrant: (_, gesture) => {
      xOffset= (xOffset + gesture.dx >= 0) ? _value.x : 0;
      _animatedValue.setOffset({x: xOffset, y: _value.y});
      _animatedValue.setValue({x: 0, y: 0});
    },
    onPanResponderMove: (_, gesture) => {
      if (xOffset + gesture.dx >= 0) {
        _animatedValue.setValue({ x: gesture.dx, y: 0 });
      } else {
        xOffset = 0;
        _animatedValue.setOffset({x: 0, y: _value.y});
        _animatedValue.setValue({ x: 0, y: 0 });
      }
    },
    onPanResponderRelease: () => {
      _animatedValue.flattenOffset();
    }
  }), []);

  return <View
    style={{
      flex: 1,
      alignItems: 'center',
      alignContent: 'center'
    }}
  >
    <View
      style={{
        width: 500,
        height: 200,
        position: 'relative',
      }}
    >
      <View
        style={{
          width: 500,
          height: 2,
          backgroundColor: 'red',
          top: 100,
          position: 'absolute'
        }}
      >
        <Animated.View
          {...panResponder.panHandlers}
          style={{
            width: 10,
            height: 10,
            backgroundColor: 'blue',
            borderRadius: 5,
            position: 'absolute',
            zIndex: 2,
            transform: _animatedValue.getTranslateTransform()
          }}
        ></Animated.View>
      </View>
    </View>
  </View>

}

关于reactjs - PanResponder 限制父容器 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50615084/

相关文章:

reactjs - 示例中的自定义自动完成不会在对话框中打开

reactjs - React JSX错误: Unclosed regular expression

javascript - react-redux 错误 : Actions must be plain objects. 使用自定义中间件进行异步操作

reactjs - 确保路径由变量定义的嵌套字段在添加到依赖项数组时触发 React.useMemo 更新

react-native - React Native Text.defaultProps 不存在并且创建它也不起作用

reactjs - 获取 react-router v4 中 pathHistory 的当前索引

javascript - React 中客户端身份验证的示例

IOS Testflight 即使在更新到新版本后也会加载我的应用程序的旧代码

reactjs - 为什么当我设置多个函数时,Formik 的 handleChange 不起作用?

android - React Native - 如何让 productFlavors 具有不同的 applicationIds?