标签：
转载请标明出处：
http://blog.csdn.net/developer_jiangqq/article/details/50630984
本文出自:【江清清的博客】
【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org
今天我们一起来看一下Touchable*系列组件的使用详解，该系列组件包括四种分别为:TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。其中最后一个控件是触摸点击不带反馈效果的，另外三个都是有反馈效果。可以这样理解前面三个都是继承自TouchableWithoutFeedback扩展而来。
刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
今天我们需要讲解的这四种控件都是属于Touchable系列的，是封装了触摸点击相关事件,例如:触摸,点击,长按,反馈等相关。下面我们来把这四种组件分别进行讲解一下。
2.1.TouchableWithoutFeedback组件基本介绍
该控件除非你不得不使用，否则请不要使用该组件哦~任何可以响应事件的控件当触摸或者点击的时候应该会有视觉上面的反应效果(但是该组件没有)。这就是一个很大的原因，看起来像Web效果而不是原生的效果(Native)。
【特别声明】TouchableWithFeedback只支持一个字节点，如果你需要设置多个子视图组件，那么就需要使用View节点进行包装。
2.2.属性方法
该组件我们一般不会直接进行使用，下面三种Touchable*系列组件对于该组件的属性方法都可以进行使用。具体会具体演示这些属性方法的使用实例。
3.1.TouchableHighlight组件基本介绍
该组件进行封装视图触摸点击的属性。当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色(视图变暗或者变亮)。如果我们去查看该组件的源代码会发现，该底层实现是添加了一个新的视图。如果如果我们没有正确的使用，就可能不会出现正确的效果。例如:我们没有给该组件视图设置backgroudnColor的颜色值。
【特别声明】TouchableHighlight只支持一个字节点，如果你需要设置多个子视图组件，那么就需要使用View节点进行包装。
3.2.属性方法
3.3.组件使用实例代码
‘use strict‘;
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableHighlight,
} from‘react-native‘;
class TouchableHighlightDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text >
TouchableHighlight实例
</Text>
<TouchableHighlight
underlayColor="rgb(210, 230,255)"
activeOpacity={0.5}
style={{ borderRadius: 8,padding:6,marginTop:5}}
>
<Text style={{fontSize:16}}>点击我</Text>
</TouchableHighlight>
</View>
);
}
}
const styles =StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#F5FCFF‘,
},
});
AppRegistry.registerComponent(‘TouchableHighlightDemo‘,() => TouchableHighlightDemo);3.4.运行效果如下:
4.1.TouchableOpacity组件介绍
该组件封装了响应触摸事件。当点击按下的时候，该组件的透明度会降低。该组件使用过程中并不会改变视图的层级关系，而且我们可以非常容易的添加到应用并且不会产生额外的异常错误。
4.2.属性方法
4.3.组件使用实例代码:
‘use strict‘;
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableOpacity,
} from‘react-native‘;
class TouchableDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text>
TouchableOpacity实例
</Text>
<TouchableOpacity style={{marginTop:20}}>
<Text style={{fontSize:16}}>点击改变透明度</Text>
</TouchableOpacity>
</View>
);
}
}
const styles =StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#F5FCFF‘,
},
});
AppRegistry.registerComponent(‘TouchableDemo‘,() => TouchableDemo);4.4.运行效果截图:
4.5.实例演示onPress,onPressIn,onPressOut,onLongPress方法代码如下:
‘use strict‘;
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableOpacity,
} from‘react-native‘;
var TouchableDemo =React.createClass({
getInitialState: function() {
return {
eventLog: [],
};
},
render: function() {
return (
<View >
<View style={[styles.row,{justifyContent: ‘center‘}]}>
<TouchableOpacity
style={styles.wrapper}
onPress={() =>this._appendEvent(‘press‘)}
onPressIn={() =>this._appendEvent(‘pressIn‘)}
onPressOut={() =>this._appendEvent(‘pressOut‘)}
onLongPress={() =>this._appendEvent(‘longPress‘)}>
<Text style={styles.button}>
Press Me
</Text>
</TouchableOpacity>
</View>
<View style={styles.eventLogBox}>
{this.state.eventLog.map((e, ii)=> <Text key={ii}>{e}</Text>)}
</View>
</View>
);
},
_appendEvent: function(eventName) {
var limit = 6;
var eventLog = this.state.eventLog.slice(0,limit - 1);
eventLog.unshift(eventName);
this.setState({eventLog});
},
});
const styles =StyleSheet.create({
button: {
color: ‘#007AFF‘,
},
wrapper: {
borderRadius: 8,
},
eventLogBox: {
padding: 10,
margin: 10,
height: 120,
borderWidth: StyleSheet.hairlineWidth,
borderColor: ‘#f0f0f0‘,
backgroundColor: ‘#f9f9f9‘,
},
});
AppRegistry.registerComponent(‘TouchableDemo‘,() => TouchableDemo);4.6.运行效果截图:
5.1.TouchableNativeFeedback组件介绍
该封装了可以进行响应触摸事件的组件(仅限Android平台)。在Android平台上面该该组件可以使用原生平台的状态资源来显示触摸状态变化。【特别注意】现如今该组件只是支持仅有一个View的子视图实例(作为子节点)。在底层实现上面实际上面是创建一个新的RCTView的节点来进行替换当前的View节点视图，并且可以携带一些附加的属性。
该组件触摸反馈的背景图资源可以通过background属性进行自定义设置
下面一个很简单的使用实例方法如下:
var TouchableDemo =React.createClass({
render() {
return (
<View style={styles.container}>
<Text>
TouchableNativeFeedback实例
</Text>
<TouchableNativeFeedback style={{marginTop:20}}>
<View style={{width: 150,height: 100, backgroundColor: ‘red‘}}>
<Text style={{margin:30}}>Button</Text>
</View>
</TouchableNativeFeedback>
</View>
);
}
});运行效果如下:
5.2.属性方法介绍
①:TouchableNativeFeedback.SelectableBackground() 该会创建使用android默认主题背景(?android:attr/selectableItemBackground)
②:TouchableNativeFeedback.SelectableBackgroundBorderless() 该会创建使用android默认的无框的主题背景(?android:attr/selectableItemBackgroundBorderless)。不过该参数需要Android API 21+才可以使用
③:TouchableNativeFeedback.Ripple(color,borderless) 该会创建当组件被按下的时候有一个水滴的效果.通过color参数指定颜色，如果borderless为true的时候，那么该水滴效果会渲染到该组件视图的外边。同样该背景类型参数也需要Android API 21+才可以使用
5.3.使用实例代码:
①:首先设置backgroundPropType为默认的背景效果代码:
var TouchableDemo =React.createClass({
render() {
return (
<View style={styles.container}>
<Text>
TouchableNativeFeedback实例
</Text>
<TouchableNativeFeedback style={{marginTop:20}}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={{width: 150,height: 100,}}>
<Text style={{margin:30}}>Button</Text>
</View>
</TouchableNativeFeedback>
</View>
);
}
});效果如下:
今天我们主要学习一下Touchable*系列组件的使用详解，该系列组件包括四种分别为:TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。
尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
【React Native开发】React Native控件之Touchable*系列组件详解(18)
标签：
原文地址：http://blog.csdn.net/developer_jiangqq/article/details/50630984
