ios – 长按后可以在ScrollView中拖动元素

概述我已经使用panResponder和ScrollView实现了拖放列表.即使我触摸项目,我也希望能够滚动列表.问题是当我做手势滚动时项目会移动.当然我也希望能够移动项目,但现在它具有与滚动相同的手势.我想通过在长按(1.5秒)后才能拖动元素来克服它.怎么实现呢？我想使用Touchable作为onPressIn / onPressOut的元素就像这里描述的那样： http://browniefed. 我已经使用panResponder和ScrollVIEw实现了拖放列表.即使我触摸项目,我也希望能够滚动列表.问题是当我做手势滚动时项目会移动.当然我也希望能够移动项目,但现在它具有与滚动相同的手势.我想通过在长按(1.5秒)后才能拖动元素来克服它.怎么实现呢？我想使用touchable作为onPressIn / onPressOut的元素就像这里描述的那样： http://browniefed.com/blog/react-native-press-and-hold-button-actions/
以某种方式在一段时间后启用panResponder,但我不知道如何以编程方式启用它.

现在这是我列表中元素的代码：

class AccountItem extends Component {  constructor(props) {    super(props);    this.state = {      pan: new Animated.ValueXY(),zIndex: 0,}    this.panResponder = PanResponder.create({      onStartShouldSetPanResponder: () => true,onPanResponderGrant: (e,gestureState) => {        this.setState({ zIndex: 100 });        this.props.disableScroll();      },onPanResponderMove: Animated.event([null,{        dx: this.state.pan.x,dy: this.state.pan.y,}]),onPanResponderRelease: (e,gesture) => {        this.props.submitNewpositions();        Animated.spring(          this.state.pan,{tovalue:{ x:0,y:0 }}        ).start();        this.setState({ zIndex: 0 });        this.props.enableScroll();      }    })  }  meassureMyComponent = (event) => {    const { setElementposition } = this.props;    let posY = event.nativeEvent.layout.y;    setElementposition(posY);  }  render() {    const {name,index,onChangeText,onRemoveAccount} = this.props;    return (        <Animated.VIEw          style={[this.state.pan.getLayout(),styles.container,{zIndex: this.state.zIndex}]}          {...this.panResponder.panHandlers}          onLayout={this.meassureMyComponent}        >some other components...        </Animated.VIEw>    )  }}export default AccountItem;

解决方法 我遇到了同样的问题.我的解决方案是为onLongPress和正常行为定义2个不同的panResponder处理程序.

_onLongPresspanResponder(){    return PanResponder.create({      onPanResponderTerminationRequest: () => false,onStartShouldSetPanResponderCapture: () => true,onPanResponderMove: Animated.event([        null,{dx: this.state.pan.x,dy: this.state.pan.y},]),{vx,vy}) => {        this.state.pan.flattenOffset()        Animated.spring(this.state.pan,{         //This will make the draggable card back to its original position           tovalue: 0        }).start();        this.setState({panResponder: undefined})   //Clear panResponder when user release on long press      }    })  }  _normalPanResponder(){    return PanResponder.create({      onPanResponderTerminationRequest: () => false,gestureState) => {        this.state.pan.setoffset({x: this.state.pan.x._value,y: this.state.pan.y._value});        this.state.pan.setValue({x: 0,y: 0})        this.longPresstimer=setTimeout(this._onLongPress,400)  // this is where you trigger the onlongpress panResponder handler      },vy}) => {        if (!this.state.panResponder) {            clearTimeout(this.longPresstimer);   // clean the timeout handler        }      }    })  }

定义_onLongPress函数：

_onLongPress(){    // you can add some animation effect here as wll    this.setState({panResponder: this._onLongPresspanResponder()})  }

定义构造函数：

constructor(props){    super(props)    this.state = {      pan: new Animated.ValueXY()    };    this._onLongPress = this._onLongPress.bind(this)    this._onLongPresspanResponder = this._onLongPresspanResponder.bind(this)    this._normalPanResponder = this._normalPanResponder.bind(this)    this.longPresstimer = null  }

最后,在渲染之前,您应该根据状态切换到不同的panResponder处理程序：

let panHandlers = {}    if(this.state.panResponder){      panHandlers = this.state.panResponder.panHandlers    }else{      panHandlers = this._normalPanResponder().panHandlers    }

然后将panHandlers附加到您的视图{… panHandlers}您甚至可以更改不同panHandler的CSS以显示不同的效果.

总结

以上是内存溢出为你收集整理的ios – 长按后可以在ScrollView中拖动元素全部内容，希望文章能够帮你解决ios – 长按后可以在ScrollView中拖动元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。