Question

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

以下是我想要做的样本..

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

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>
  );
}

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

Answer 1

找到了方法！

将ref放入ListView

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

然后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);
      }

任何人都有另一种解决方案可以共享，因为我不确定这是最好的方法。

TQ

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

1 个答案: