圖像拖放激活滾動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）

回答

相關問題