React Native panResponderMove 获取触摸的X位置

Posted 2023-02-23

【中文标题】React Native panResponderMove 获取触摸的X位置

【英文标题】：React Native panResponderMove get X position of touch

【发布时间】：2017-05-05 09:47:07

【问题描述】：

当用户触摸图形容器视图时，如何在用户移动手指时获取手指的 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);

【问题讨论】：

请不要发布“代码图片”。以Minimal, Complete, and Verifiable Example 的形式将代码发布为文本。

【参考方案1】：

试试这个：

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