React-native之 Touchable控件（8）

一. 简介

React Native没有像Web开发那样给元素绑定click事件,Text组件有onPress事件回调，View组件是没有的，但是在实际项目开发中，很多其他的组件也是需要可以被点击的，RN提供了4个组件来赋予被点击的能力（去包裹其他组件即可），这4个组件被称为“Touchable类组件”.
TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。其中最后一个控件是触摸点击不带反馈效果的，另外三个都是有反馈效果.可以看成是前面三个继承TouchableWithoutFeedback。

二. 属性及示例

TouchableWithoutFeedback

1.基本介绍
除非你有一个很好的理由，否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈（然而本组件没有任何视觉反馈）。这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。
2.属性
(1)accessibilityComponentType 设置可访问的组件类型
(2)accessibilityTraits 设置访问特征
(3)accessible bool设置当前组件是否可以访问
(4)delayLongPress number 设置延迟时间 单位时间为毫秒 从onPressIn开始，到onLongPress被调用的延迟
(5)delayPressIn number 设置延迟的时间，单位为毫秒，从用户触摸控件开始到onPressIn被调用这一段时间
(6)delayPressOut number 设置延迟的时间，单位为毫秒，从用户触摸事件释放开始到onPressOut被调用这一段时间
(7)onLayout function 当组件加载或者改组件的布局发生变化的时候调用。调用传入的参数为{nativeEvent:{layout:{x,y,width,height}}}
(8)onLongPress function 当用户长时间按压组件时调用该方法
(9)onPress function 当用户点击的时候调用(触摸结束)。 但是如果事件被取消了就不会调用
(10)onPressIn function 用户开始触摸组件回调方法
(11)onPressOut function 用户完成触摸组件之后回调方法
pressRetentionOffset {top:number,left:number,bottom:number,right:number} 该设置当视图滚动禁用的情况下，可以定义当手指距离组件的距离。当大于该距离该组件会失去响应。当少于该距离的时候，该组件会重新进行响应。

示例

export default class TouchableDemo extends Component { show(text) { alert(text); } render() { return ( <View style={styles.flex}> <TouchableWithoutFeedback onPress={this.show.bind(this,'学习RN的TouchableWithoutFeedback属性')}> <Text style={styles.fontItem}>学习RN的TouchableWithoutFeedback属性</Text> </TouchableWithoutFeedback> </View> ); } } const styles = StyleSheet.create({ flex: { flex: 1, marginTop:30, }, fontItem: { fontSize: 16, color: '#434343', marginLeft: 10, marginRight: 10, marginTop:10, }, }); AppRegistry.registerComponent('TouchableDemo', () => TouchableDemo);
效果 没有任何效果显示

TouchableWithoutFeedback.png

TouchableHighlight

![Uploading TouchableHighlight_933757.png . . .]
(触摸点击高亮效果)
1.基本介绍
本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。在底层实现上，实际会创建一个新的视图到视图层级中，如果使用的方法不正确，有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。
【注意】TouchableHighlight只支持一个子节点，如果你需要设置多个子视图组件，那么就需要使用View节点进行包装。
2.属性
(1).TouchableWithoutFeedback的属性，该组件都可以进行使用
(2)activeOpacity number 该用来设置视图在进行触摸的时候，显示的不透明度(0-1之间)
(3)onHideUnderlay function 当底层的颜色被隐藏的时候调用
(4)onShowUnderlay function 当底层的颜色被显示的时候调用
(5)style 可以设置控件的风格演示，该风格演示可以参考View组件的style
underlayColor 当触摸或者点击控件的时候显示出的颜色

示例（样式表与点击事件和上面的一样，这里只贴出主要代码）

render() { return ( <View style={styles.flex}> <TouchableHighlight onPress={this.show.bind(this,'学习RN的TouchableHighlight属性')} underlayColor='#E1F6FF'> <Text style={styles.fontItem}>学习RN的TouchableHighlight属性</Text> </TouchableHighlight> </View> ); }
效果 背景高亮

TouchableHighlight.png

TouchableOpacity

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

示例

render() { return ( <View style={styles.flex}> <TouchableOpacity onPress={this.show.bind(this,'学习RN的TouchableOpacity属性')}> <Text style={styles.fontItem}>学习RN的TouchableOpacity属性</Text> </TouchableOpacity> </View> ); }
效果
默认效果

TouchableOpacity_default.png

点击后效果 颜色改变

TouchableOpacity_pressed.png

TouchableNativeFeedback

1.基本介绍
本组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。目前它只支持一个单独的View实例作为子节点。在底层实现上，实际会创建一个新的RCTView结点替换当前的子View，并附带一些额外的属性。
原生触摸操作反馈的背景可以使用background属性来自定义

示例

renderButton: function() { return ( <TouchableNativeFeedback onPress={this._onPressButton} background={TouchableNativeFeedback.SelectableBackground()}> <View style={{width: 150, height: 100, backgroundColor: 'red'}}> <Text style={{margin: 30}}>Button</Text> </View> </TouchableNativeFeedback> ); },
效果

TouchableNativeFeedback.png
最后贴出整体代码
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, TouchableNativeFeedback, View } from 'react-native';
export default class TouchableDemo extends Component { show(text) { alert(text); }
render() { return ( <View style={styles.flex}> <TouchableWithoutFeedback onPress={this.show.bind(this,'学习RN的TouchableWithoutFeedback属性')}> <Text style={styles.fontItem}>学习RN的TouchableWithoutFeedback属性</Text> </TouchableWithoutFeedback>
<TouchableHighlight onPress={this.show.bind(this,'学习RN的TouchableHighlight属性')} underlayColor='#E1F6FF'> <Text style={styles.fontItem}>学习RN的TouchableHighlight属性</Text> </TouchableHighlight>
<TouchableOpacity onPress={this.show.bind(this,'学习RN的TouchableOpacity属性')}> <Text style={styles.fontItem}>学习RN的TouchableOpacity属性</Text> </TouchableOpacity>
<TouchableNativeFeedback onPress={this.show.bind(this,'学习RN的TouchableNativeFeedback属性')} > <View style={{width: 150, height: 100, backgroundColor: 'red'}}> <Text style={{margin: 30}}>学习RN的TouchableNativeFeedback属性</Text> </View> </TouchableNativeFeedback>
</View> ); } }
const styles = StyleSheet.create({ flex: { flex: 1, marginTop:30, }, fontItem: { fontSize: 16, color: '#434343', marginLeft: 10, marginRight: 10, marginTop:10, }, });
AppRegistry.registerComponent('TouchableDemo', () => TouchableDemo);

记录自己的RN学习之路，有什么不对的地方，一起讨论进步
最后感谢RN中文网，江清清的专栏，