React-Native 之 Touchable 介绍与使用

前言

学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至简书查看也希望喜欢的朋友可以点赞，谢谢

View 中的触摸属性与 Touchable 的对比

学完之前的内容后，是不是有个疑问 —— 界面我们是搭建出来了，那为什么不会对用户的点击、触摸、拖拽做出反应？这篇就结合前面的内容加上小案例来解答疑惑

其实在 React Native 中，想实现手势监听很简单，有两种方式

标签中有许多 on 开头的属性可以供我们使用，但是在不同标签上有的属性是不能做出相应的响应的，比如下面的例子,同样的属性，在View上不可使用，在Text上就可以

	var textInputTest = React.createClass({
		render(){
    		return(
        		<View style={styles.container}>
            		{/* 实例化一个View */}
            		<View style={styles.testViewStyle} onPressIn={() => {alert('点击')}}>
            		</View>
            		{/* 实例化一个Text */}
            		<Text style={styles.testTextStyle} onPress={() => {alert('点击')}}></Text>
        		</View>
    		);
		}
	});

	var styles = StyleSheet.create({
		container: {
    		flex:1,
    		backgroundColor:'gray'
		},

		testViewStyle: {
    		// 设置尺寸
    		width:width,
    		height:40,
    		marginTop:20,
    		// 设置背景颜色
    		backgroundColor:'red'
		},

		testTextStyle: {
    		// 设置尺寸
    		width:width,
    		height:40,
    		marginTop:20,
    		// 设置背景颜色
    		backgroundColor:'yellow'
		}
	});

效果：

行内on属性行为比对.gif

为了避免上面问题，在开发中推荐使用 Touchable 的方式来实现用户点击事件的包装

首先，既然要使用Touchable,那么肯定要先告诉系统在哪里找到它

	import {
		AppRegistry,
		StyleSheet,
		Text,
		View,
		TouchableOpacity
	} from 'react-native';

完成上面的步骤我们就可以使用Touchable来包装我们的标签了，格式如下

	<TouchableOpacity Touchable属性>
		<需要包装的标签></需要包装的标签>
	</TouchableOpacity>

这里就来将上面的方式更改一下，从中可以看出，不仅可以让标签有接收触摸事件能力，还出现了不透明的效果（类似于高亮的效果）

	var textInputTest = React.createClass({
		render(){
    		return(
        		<View style={styles.container}>
            		{/* 包装View */}
            		<TouchableOpacity
                		onPress={() => {alert('点击了View')}}
            >
                	<View style={styles.testViewStyle}></View>
            		</TouchableOpacity>
            		{/* 包装Text */}
            		<TouchableOpacity
                		onPress={() => {alert('点击了Text')}}
            >
                		<Text style={styles.testTextStyle}></Text>
            		</TouchableOpacity>
        		</View>
    		);
		}
	});

效果：

Touchable行为比对.gif

好了，先介绍到这里，下面来看下Touchable常用属性

Touchable 常用属性介绍

Touchable 中包含两种触摸类别：TouchableHighlight(高亮触摸)、TouchableOpacity(不透明触摸)
- TouchableHighlight(高亮触摸)：当手指点下的时候，该视图的不透明度会进行降低同时会看到相应的颜色（原理：在底层新添加一个View）,需要注意的是TouchableHighlight只能进行一层嵌套，不能多层嵌套，如果需要多层嵌套就要用View包装
  - activeOpacity：设置组件在进行触摸时候，显示的不透明度（取值：0 ~ 1）
  - onHideUnderlay：当底层被隐藏的时候调用
  - onShowUnderlay：当底层显示的时候调用
  - style：可以设置控件的风格演示，该风格演示可以参考View组件的style
  - underlayColor：当触摸或者点击控件的时候显示出的颜色
  - TouchableWithoutFeedback：这个属性说明了这个组件继承了所有TouchableWithoutFeedback的属性
    - disabled：如果为true,则禁止此组件的一切交互
    - hitSlop {top: number, left: number, bottom: number, right: number}：这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset（见下文）变得更大。注意：触摸范围不会超过父视图的边界，也不会影响原先和本组件层叠的视图（保留原先的触摸优先级）
    - onLayout{nativeEvent: {layout: {x, y, width, height}}}：当加载或者布局改变的时候被调用
    - onLongPress：长按
    - onPress：点击
    - onPressIn：按住
    - onPressOut：抬起
    - pressRetentionOffset {top: number, left: number, bottom: number, right: number}：在当前视图不能滚动的前提下指定这个属性，可以决定当手指移开多远距离之后，会不再激活按钮。但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配
- TouchableOpacity(不透明触摸)：该组件封装了响应触摸事件，当点击按下的时候，该组件的透明度会降低
  - activeOpacity：设置当用户触摸的时候，组件的透明度（取值：0 ~ 1）
  - TouchableWithoutFeedback：这个属性说明了这个组件继承了所有TouchableWithoutFeedback的属性
    - disabled：如果为true,则禁止此组件的一切交互
    - hitSlop {top: number, left: number, bottom: number, right: number}：这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset（见下文）变得更大。注意：触摸范围不会超过父视图的边界，也不会影响原先和本组件层叠的视图（保留原先的触摸优先级）
    - onLayout{nativeEvent: {layout: {x, y, width, height}}}：当加载或者布局改变的时候被调用
    - onLongPress：长按
    - onPress：点击
    - onPressIn：按住
    - onPressOut：抬起
    - pressRetentionOffset {top: number, left: number, bottom: number, right: number}：在当前视图不能滚动的前提下指定这个属性，可以决定当手指移开多远距离之后，会不再激活按钮。但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配

常见的触摸事件演示

TouchableHighlight（高亮触摸）

	var textInputTest = React.createClass({
    	render(){
        	return(
            	<View style={styles.container}>
                	{/* 点击 */}
                	<TouchableHighlight
                    	onPress={() => {alert('点击')}}
                    	underlayColor={'red'}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableHighlight>

                	{/* 按下 */}
                	<TouchableHighlight
                    	onPressIn={() => {alert('按下')}}
                    	underlayColor={'orange'}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableHighlight>

                	{/* 抬起 */}
                	<TouchableHighlight
                    	onPressOut={() => {alert('抬起')}}
                    	underlayColor={'blue'}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableHighlight>

                	{/* 长按 */}
                	<TouchableHighlight
                    	onLongPress={() => {alert('长按')}}
                    	underlayColor={'yellow'}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableHighlight>
            	</View>
        	);
    	}
	});

效果：

TouchableHighlight效果.gif

TouchableOpacity（不透明触摸）

	var textInputTest = React.createClass({
    	render(){
        	return(
            	<View style={styles.container}>
                	{/* 点击 */}
                	<TouchableOpacity
                    	onPress={() => {alert('点击')}}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableOpacity>

                	{/* 按下 */}
                	<TouchableOpacity
                    	onPressIn={() => {alert('按下')}}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableOpacity>

                	{/* 抬起 */}
                	<TouchableOpacity
                    	onPressOut={() => {alert('抬起')}}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableOpacity>

                	{/* 长按 */}
                	<TouchableOpacity
                    	onLongPress={() => {alert('长按')}}
                	>
                    	<View style={styles.testViewStyle}></View>
                	</TouchableOpacity>
            	</View>
        	);
    	}
	});

效果：

TouchableOpacity效果.gif

posted @ 2016-11-04 11:36 黑森林工作室阅读(1721) 评论(0) 编辑收藏举报

刷新页面返回顶部

黑森林工作室

React-Native 之 Touchable 介绍与使用

前言

View 中的触摸属性 与 Touchable 的对比

Touchable 常用属性介绍

常见的触摸事件演示

公告

View 中的触摸属性与 Touchable 的对比