React Native其他组件之 Touchable系列组件

一、高亮触摸 TouchableHighlight

常用属性:
activeOpacity number
设置组件在进行触摸的时候， 显示的不透明度（取值在0-1之间）

onHideUnderlay function方法
当底层被隐藏的时候调用

onShowUnderlay function 方法
当底层显示的时候调用

style
可以设置控件的风格演示，该风格演示可以参与View组件的style

underlayColor
当触摸或者点击控件的时候显示出的颜色

二、不透明触摸 TouchableOpacity

该组件封装了响应触摸事件，当点击按下的时候，该组件的透明度会降低。
常用属性:
activeOpacity number
设置当用户触摸的时候，组件的透明度

三、常见的触摸事件

在开发中会经常的用到点击、按下、抬起、长按等触发事件，那么在TouchableOpacity中又是如何展示呢？

1.onLongPress：长按事件

2.onPressIn：触摸进入事件 3.onPressOut：触摸释放事件 4.onPress：触摸点击事件

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity
} from 'react-native';
//ES5写法
var DTouchabelDemo = React.createClass(}{
    getInitialState(){
        return{
            text:'hello'
        }
    })
    render() {
        return (
          
            < TouchableOpacity
              onLongPress={() => this.setState({ text: "长按" })}
              onPressIn={() => this.setState({ text: "按下" })}
              onPressOut={() => this.setState({ text: "松开" })}
              onPress ={this.show.bind(this,'做最特别的一个')}
            >
              
                {this.state.text}
                 
                    
            
        )
  }
  activeEvent(event){
      this.setState({
          text:event
      })
  }
}




//ES6写法
export default class App extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      text: 'hello'
    }
  }
  show(text) { 
    alert(text);
  }
  render() {
    return (
      
        < TouchableOpacity
          onLongPress={() => this.setState({ text: "长按" })}
          onPressIn={() => this.setState({ text: "按下" })}
          onPressOut={() => this.setState({ text: "松开" })}
          onPress ={this.show.bind(this,'做最特别的一个')}
        >
          
            {this.state.text}
             
                
        
    )
  }
}

const styles = StyleSheet.create({  
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal:10,
    backgroundColor: 'white'
  },
  button: {
    marginLeft: 30,
    marginTop: 30,
    width: 100,
    height: 100,
    backgroundColor: '#18B4FF',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 50,
  },
  buttonText: {
   color:'white'
  },
  countContainer: {
    alignItems: 'center',
    padding:10
  },
  countText: {
    color:'green'
  }
});