React Native 五：手势

一、Touchable手势

1.React Native提供了4个组件来做这个事情，具体如下：

     TouchableHighlight：高亮触摸，用户点击时，会产生高亮效果；

     TouchableNativeFeedback：

     TouchableOpacity：透明触摸，用户点击时，点击的组件不会出现任何视觉变化；

     TouchableWithoutFeedback：无反馈触摸，用户点击时，点击的组件不会有任何视觉变化；

2.这4个组件，我们可以应用某个部分绑定上Touch事件，并支持一下方法：

     onPress：

     onPressIn：

     onPressOut：

     onLongPress：

3.下面我们以实例演示下，相关代码实现：

Index.android.js文件：

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

4.点击，我们看见具体的运行效果如下：

5.我们使用Debug模式，研究下4个手势出现的条件和顺序；

摇晃手机，选择Debug JS；