React-Native触摸组件PanResponder的使用

已经找到详细文档了:

http://reactnative.cn/docs/0.26/panresponder.html

DEMO:

import React,{ Component } from 'react';
import {
  Alert,StyleSheet,Text,View,Navigator,PanResponder
} from 'react-native';

export default class Login extends Component{
  constructor(props){
    super(props);
    this.state = {
     eventName:'',pos: '',};
    this.myPanResponder={}
  }

  componentWillMount() {
      this.myPanResponder = PanResponder.create({
      //要求成为响应者：
      onStartShouldSetPanResponder: (evt,gestureState) => true,onStartShouldSetPanResponderCapture: (evt,onMoveShouldSetPanResponder: (evt,onMoveShouldSetPanResponderCapture: (evt,onPanResponderTerminationRequest: (evt,//响应对应事件后的处理:
      onPanResponderGrant: (evt,gestureState) => {
        this.state.eventName='触摸开始';
        this.forceUpdate();
      },onPanResponderMove: (evt,gestureState) => {
        var _pos = 'x:' + gestureState.moveX + ',y:' + gestureState.moveY;
        this.setState( {eventName:'移动',pos : _pos} );
      },onPanResponderRelease: (evt,gestureState) => {
        this.setState( {eventName:'抬手'} );
      },onPanResponderTerminate: (evt,gestureState) => {
        this.setState( {eventName:'另一个组件已经成为了新的响应者'} )
      },});
  }

  render(){
    return (
      <View style={styles.container} {...this.myPanResponder.panHandlers}>
        <Text>eventName:{this.state.eventName}|{this.state.pos}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    backgroundColor:"#fff",flex:1
  }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!