React-Native 之 Touchable 介绍与使用
2016-11-04 11:36
483 查看
前言
学习本系列内容需要具备一定 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' } });
效果:
为了避免上面问题,在开发中推荐使用 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常用属性
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> ); } });
效果:
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> ); } });
效果:
相关文章推荐
- React Native按钮详解|Touchable系列组件使用详解
- React-Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- React-Native之截图组件view-shot的介绍与使用
- 使用react-native做一个简单的应用-01项目介绍
- reactnative netinfo使用介绍
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
- React-Native 之 Modal介绍与使用
- React-Native 之 FlexBox介绍和使用
- 使用Visual Studio Code编写react-native插件介绍
- React Native之FlatList的介绍与使用实例
- 【转】react-native-wechat组件使用介绍
- react-native 轮播组件 looped-carousel使用介绍
- React-Native 之 Modal介绍与使用
- React-Native 之 ScrollView介绍和使用
- React Native系列——WebView组件使用介绍
- React-Native之轮播组件looped-carousel的介绍与使用
- React Native for android——React Native 介绍
- React Native探索(六)不止是UI:React的使用场景探索