React Native 五：手势

import React, {
  … … 
  TouchableHighlight,
} from ‘react-native‘;

class AwesomeProject extends Component {
  show(text) {
    alert(text);
  }
  //手势相关事件的实现
  onPressIn(){
    this.start = Date.now()
    console.log("press in")
  }
  onPressOut(){
    console.log("press out")
  }
  onPress(text){
    console.log("press")
    alert(text);
  }
  onLonePress(){  AppRegistry,
    console.log("long press "+(Date.now()-this.start))
  }
  render() {
    return(
      <View style={styles.container}>
        //TouchableHighlight包裹绑定Touch手势的组件，并实现支持的4个事件
        <TouchableHighlight style={styles.touchable} onPressIn={this.onPressIn} onPressOut={this.onPressOut}
          onPress={this.onPress.bind(this,‘点击了吗？‘)} onLongPress={this.onLonePress}>
          <View style={styles.button}></View>
        </TouchableHighlight>
      </View>
    )
  };
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  button:{
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: ‘red‘
  },
  touchable: {
    borderRadius: 100
  },
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

import React, {
   … … 
} from ‘react-native‘;

var AwesomeProject = React.createClass({
  getInitialState(){
    return {
      bg: ‘white‘
    };
  },

  componentWillMount(){
    this._gestureHandlers = {
      onStartShouldSetResponder: () => true,
      onMoveShouldSetResponder: ()=> true,
      onResponderGrant: ()=>{
        this.setState({bg: ‘red‘})
      },
      onResponderMove: ()=>{
        console.log(123)
      },
      onResponderRelease: ()=>{
        this.setState({bg: ‘white‘})
      }
    }
  },

  render() {
    return(
      <View style={styles.container}>
        <View {...this._gestureHandlers} style={[styles.rect, {backgroundColor:this.state.bg}]}></View>
      </View>
    );
  }
});
var styles = StyleSheet.create({
     … … 
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

import React, {
     ... ... 
} from ‘react-native‘;

var AwesomeProject = React.createClass({
  getInitialState(){
    return {
      bg: ‘white‘,
      bg2: ‘white‘
    }
  },
  componentWillMount(){
    this._gestureHandlers = {
      //外部正方形在“捕获期”阻止底层时间成为响应者
      onStartShouldSetResponderCapture: () => true,
      onMoveShouldSetResponderCapture: ()=> true,
      onResponderGrant: ()=>{this.setState({bg: ‘red‘})},
      onResponderMove: ()=>{console.log(123)},
      onResponderRelease: ()=>{this.setState({bg: ‘white‘})},
    }
    this._gestureHandlers2 = {
      //内部正方形在即时实现了on*ShouldSetResponder也无法成为响应者
      onStartShouldSetResponder: () => true,
      onMoveShouldSetResponder: ()=> true,
      onResponderGrant: ()=>{this.setState({bg2: ‘green‘})},
      onResponderMove: ()=>{console.log(123)},
      onResponderRelease: ()=>{this.setState({bg2: ‘white‘})}
    }
  },
  render: function() {
    return (
      <View style={styles.container}>
        <View {...this._gestureHandlers} style={[styles.rect,{"backgroundColor": this.state.bg}]}>
          <View {...this._gestureHandlers2} style={[styles.rect2,{"backgroundColor": this.state.bg2}]}>
          </View>
        </View>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  ... ... 
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

import React, {
  ... ... 
  PanResponder,
} from ‘react-native‘;


var AwesomeProject = React.createClass({
  getInitialState(){
    return {
      bg: ‘white‘,
      top: 0,
      left: 0
    }
  },
  componentWillMount(){
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: ()=> true,
      onPanResponderGrant: ()=>{
        //滑动开始时，获取矩形的左上坐标，并设置背景为红色
        this._top = this.state.top
        this._left = this.state.left
        this.setState({bg: ‘red‘})
      },
      onPanResponderMove: (evt,gs)=>{
        console.log(gs.dx+‘ ‘+gs.dy)
        //随着手势滑动，相应的改变矩形的位置
        this.setState({
          top: this._top+gs.dy,
          left: this._left+gs.dx
        })
      },
      onPanResponderRelease: (evt,gs)=>{
        //活动结束后，还原背景为白色
        this.setState({
          bg: ‘white‘,
          top: this._top+gs.dy,
          left: this._left+gs.dx
        })}
    })
  },
  render: function() {
    return (
      <View style={styles.container}>
        //设置手势事件处理对象
        <View{...this._panResponder.panHandlers} style={[styles.rect,{
            "backgroundColor": this.state.bg,
            "top": this.state.top,
            "left": this.state.left}]}>
        </View>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    //开始的矩形位于中间，下图拖动到下部区域
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  rect: {
    ... ... 
  }
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);