React Native panResponderMove获取触摸的X位置

时间:2017-05-05 09:47:07

标签: android ios reactjs react-native native

当用户触摸图形容器视图时,如何在用户移动手指时获取手指的X位置?我怀疑它需要在onPanResponderMove里面:(evt)

screen shot of code

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

1 个答案:

答案 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