React Native Touchable系列组件

Touchable 触摸交互组件     

一 . 高亮触摸 TouchableHighlight

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。其原理是在底层新添加一个视图到视图层级中，如果使用的方法不正确，有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。此外，TouchableHighlight，只能进行一层嵌套，不能多层嵌套。如果你希望包含多个子组件，用一个View来包装它们。

常见属性 : 

ouchableWithoutFeedback props...    这意味着本组件继承了所有TouchableWithoutFeedback的属性。

activeOpacity number 
设置组件在进行触摸的时候，显示的不透明度（取值在0到1之间）。

onHideUnderlay function 
当底层的颜色被隐藏的时候调用。

onShowUnderlay function 
当底层的颜色被显示的时候调用。

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

underlayColorstring 
有触摸或者点击控件时显示出来的底层的颜色。

示例代码 :

renderButton: function() {  return (    <TouchableHighlight onPress={this._onPressButton}>      <Image        style={styles.button}        source={require('./button.png')}      />    </TouchableHighlight>  );},

二 . 不透明触摸 TouchableOpacity

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。这个过程并不会真正改变视图层级，大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。（译注：此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景）

常见属性 : 

activeOpacity number 
设置当用户触摸的时候组件的透明度（通常在0到1之间）。

renderButton: function() {  return (    <TouchableOpacity onPress={this._onPressButton}>      <Image        style={styles.button}        source={require('image!myButton')}      />    </TouchableOpacity>  );},

三 . 常见的触摸事件

TouchableWithoutFeedback，TouchableNativeFeedback(仅安卓)这两个一般用不到

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TouchableOpacity,  AlertIOS} from 'react-native';// ES5写法var DTouchabelDemo = React.createClass({  // 不可改变的值  getDefaultProps(){     return{        age: 18     }  }, // 可以改变的值  getInitialState(){     return{       title:'不透明触摸',       person: '张三'     }  },  render() {    return (        <View ref="topView" style={styles.container}>          <TouchableOpacity              activeOpacity={0.5}              onPress={()=>this.activeEvent('点击')}              onPressIn={()=>this.activeEvent('按下')}              onPressOut={()=>this.activeEvent('抬起')}              onLongPress={()=>this.activeEvent('长按')}              >            <View style={styles.innerViewStyle}>              <Text ref="event">常用的事件</Text>            </View>          </TouchableOpacity>          <View>              <Text>{this.state.title}</Text>              <Text>{this.state.person}</Text>              <Text>{this.props.age}</Text>          </View>        </View>    );  },  activeEvent(event){    // 更新状态机     this.setState({        title: event,        person:'李四'     })    // 拿到View    this.refs.topView    this.refs.event  }});// ES6写法// class DTouchabelDemo extends Component {//// }const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  innerViewStyle:{    backgroundColor:'red'  }});AppRegistry.registerComponent('DTouchabelDemo', () => DTouchabelDemo);