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

目前我正在尝试与PanResponder一起玩，并且我有一个让图像为可拖动的想法，并且当用户在listview底部拖动图像时，listview renderRow（）只要用户没有改变图像的位置就会滚动。图像拖放激活滚动ListView（react-native）

这里是我想要做的样品..

到目前为止，我在做什么，只需要拖动图像和用户发布后它将返回相同的位置。

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

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

来源

2017-08-08 Hazim Ali

找到了路！

把里面的ListView REF

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

然后onPanResponderMove我只需要调用listViewScrollTo，但为确保将我圈也动我需要里面包（即，手势）并且由于animated.event不起作用，我只需要在animated.event之后立即放置（e，手势）。

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

人有，因为我不确定这是做到这一点的最好办法另一种解决方案可以共享。

来源

2017-08-08 04:24:21

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

回答

相关问题