Imageドラッグアンドドロップでスクロールを有効にするListView（反応ネイティブ）

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

方法が見つかりました！

プットは、私はちょうどlistViewScrollToを呼び出すことが、私はサークルも私が内部ラップする必要が移動するドラッグを確保する必要がonPanResponderMove

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

その後、リストビュー内のREF（E、ジェスチャー） 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); 
 
     }

誰もが別のソリューションは、それがこれを行うための最善の方法だと確信していないイムので、共有することができています。

tQ