React本地panResponderMove獲取觸摸的X位置

-1

當用戶觸摸圖形容器視圖時，如何在用戶移動手指時獲取手指的X位置？我懷疑它需要內部onPanResponderMove：（EVT）React本地panResponderMove獲取觸摸的X位置

import React, { Component } from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
View, 
Dimensions, 
PanResponder, 
TouchableWithoutFeedback, 
Animated 
} from 'react-native'; 

var data = [1,2,3,4,5,6]; 

export default class graph extends Component { 
    componentWillMount() { 
    this._panResponder = PanResponder.create({ 
     onPanResponderMove: (evt) => { 

     }, 
    }); 
    } 

render() { 
    let key = 0; 
    var Points = data.map(b => { 
     key = key+1; 
     return (
      <View key={key} style={styles.dataPointContainer}> 

      </View> 
     ) 
    }); 
    return (
     <View style={styles.container}> 
      <View style={styles.graphContainer} {...this._panResponder.panHandlers}> 
       { Points } 
      </View> 
     </View> 
    ); 
} 
} 

var window = Dimensions.get('window'); 

const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
}, 
graphContainer: { 
    borderLeftWidth: 1, 
    borderBottomWidth: 1, 
    height: window.height*0.4, 
    width: window.width*0.9, 
    flexDirection: "row" 
}, 
dataPointContainer: { 
    flex: 1/data.length, 
    borderRightWidth: 0.2 
    } 
}); 

AppRegistry.registerComponent('graph',() => graph);

來源

2017-05-05 Thomas Charlesworth

請不要發佈「的代碼的圖片」。以[最小，完整和可驗證示例]（https://stackoverflow.com/help/mcve）的形式將代碼作爲文本發佈。 – Lundin

試試這個：

this._panResponder = PanResponder.create({ 
    onMoveShouldSetPanResponder: (e, gs) => true, 
    onMoveShouldSetPanResponderCapture: (e, gs) => true, 
    onPanResponderMove: (e, gs) => { 
     // X position relative to the page 
     console.log(e.nativeEvent.pageX); 

     // The X position of the touch, relative to the element 
     console.log(e.nativeEvent.positionX); 
    }, 
});

這裏記載：https://facebook.github.io/react-native/docs/panresponder.html

來源

2017-05-05 10:17:23 kimar

React本地panResponderMove獲取觸摸的X位置

回答

相關問題