簡體   English   中英

React Native panResponderMove獲得X觸摸位置

[英]React Native panResponderMove get X position of touch

當用戶觸摸圖形容器視圖時,如何在用戶移動手指時獲得手指的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);

嘗試這個:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM