当用户触摸图形容器视图时,如何在用户移动手指时获取手指的X位置?我怀疑它需要在onPanResponderMove里面:(evt)
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);
答案 0 :(得分:2)
试试这个:
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