图像拖放激活滚动ListView（react-native）

Currently I am trying to play around with PanResponder, and I have an idea making image as a draggable, and when user drag image at bottom of listview, the listview renderRow() will scroll as long the user did not change the position of the image.

目前我正在尝试使用PanResponder,我有一个想法使图像成为可拖动的,当用户在listview底部拖动图像时,listview renderRow()将滚动,只要用户没有改变图像的位置。

Here is sample of what I want to do..

这是我想要做的样本..

so far what I am doing just drag the image and it will return so same position after user release.

到目前为止,我正在做的只是拖动图像,它将返回用户释放后的相同位置。

constructor(props) {
  ....
  
  this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder : () => true,
      onPanResponderMove: Animated.event([null,{
        dx: this.state.pan.x,
        dy: this.state.pan.y
      }]),
      onPanResponderRelease: (e, gesture) => {
        Animated.spring(
          this.state.pan,
          {toValue:{x:0,y:0}}
        ).start();
      }
    });
}

renderDraggable(){
    if(this.state.showDraggable){
      return (
        <View style={styles.draggableContainer}>
          <Animated.View 
            {...this.panResponder.panHandlers}                       
            style={[this.state.pan.getLayout(), styles.circle]}>
            <Text>Drag me!</Text>
          </Animated.View>
        </View>
      );
    }
  }
  
renderRow(rowData) {
    return (
      <View>
        <Text style={styles.rowText}>{rowData}</Text>
      </View>
    );
  }
  
render() {
  return(
  <View style={styles.list}>
    <ListView
      dataSource={ds.cloneWithRows(optionsArray[this.state.question].answerArr)}
              renderRow={this.renderRow.bind(this)}
    />
      {this.renderDraggable()}
    </View>
  );
}

Thanks! Hope anyone can guide and point me to right direction..

谢谢!希望任何人都可以指导并指出我正确的方向..

1 个解决方案

#1

found the way!

找到了方法!

put ref inside ListView

把ref放在ListView里面

<ListView
              ref={ ref => this.listview = ref}
              dataSource={ds.cloneWithRows(optionsArray[this.state.question].answerArr)}
              renderRow={this.renderRow.bind(this)}
            />

then onPanResponderMove I just need to call the listViewScrollTo, but to ensure the Drag me Circle also move I need to wrap inside (e,gesture) and since animated.event will not work, I just need to put (e,gesture) immediately after animated.event.

然后onPanResponderMove我只需要调用listViewScrollTo,但是为了确保Drag me Circle也移动我需要包裹在里面(e,手势),因为animated.event将无法工作,我只需要立即放(e,手势) animated.event。

 onPanResponderMove: (e, gesture) => {
        this.listview.scrollTo({ y: this.state.heightList+200 });
        Animated.event([null,{
          dx: this.state.pan.x,
          dy: this.state.pan.y,
        }])(e, gesture);
      }

anyone have another solution can share since Im not sure it's the best way to do this.

任何人都有另一种解决方案可以分享,因为我不确定这是最好的方法来做到这一点。

#1