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'
}
});
效果:
- 标签中有许多
为了避免上面问题,在开发中推荐使用 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之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- react native 触摸Touchable***的区别(TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback)
一.问题背景: react native的跨平台开发没有button的概念,而是使用touchable系列实现点击触发效果. 而touchable系列就有四个之多,而且相互之间仍有较大差别,这就给我们 ...
- React Native中Touchable组件的使用
截图如下: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import Rea ...
- React Native项目组织结构介绍
代码组织: 目录结构: . ├── components //组成应用的各个组件 │ ├── Routers.android.js //每个组件若实现不一样,分为android的实现和ios的实现 ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- 使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...
- React Native 教程:001 - 如何运行官方控件示例 App
原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...
- React Native从入门到放弃之环境搭建
官网 https://facebook.github.io/react-native/ 中文网站 http://reactnative.cn/ 相关文档 http://www.lcode.org/史上 ...
随机推荐
- HTML5- Canvas入门(五)
今天要介绍的是canvas对图形对象的操作,包括图像.视频绘制,和操作像素对象的方法. 图片/视频的绘制 在canvas中,我们可以通过 drawImage() 的方法来绘制图片或视频文件,其语法为: ...
- iOS开发系列--App扩展开发
概述 从iOS 8 开始Apple引入了扩展(Extension)用于增强系统应用服务和应用之间的交互.它的出现让自定义键盘.系统分享集成等这些依靠系统服务的开发变成了可能.WWDC 2016上众多更 ...
- 再次学习 java 类的编译
做JAVA开发的都知道myeclipse, 我们在myeclipse中新建一个类,然后保存, 如何正常的话,那么在项目指定的目录(也就是项目的output目录)就会生成同名的class文件, 可是,我 ...
- node.js里npm install --save 与 npm install --save-dev 的区别
在package.json可以看到一个放在package.json 的dependencies , 一个放在devDependencies里面. 目前找到的一些解答:真正跑在用户浏览器中的代码,比如j ...
- angular view之间的数据传递
之前写过一篇backbone view之间的传递,由于现在在用angular搞开发,现在也来总结一下.在angular 传递数据通俗的讲叫做 广播 ,在一些文章中,也叫做事件的发布与订阅,在angul ...
- iOS 之消息推送(个推)---个人小结
前言:自从上个星期开始整这个推送,弄了差不多一个星期,今天终于给整好了,因此现在来记录这段"奇妙"的旅程. 我们公司使用的消息推送是用的第三方--个推,这里不得不说一下,个推的技术 ...
- linux tree 命令
使用cmder确实是方便了很多,想看命令帮助信息: $ help tree 以图形显示驱动器或路径的文件夹结构. TREE [drive:][path] [/F] [/A] /F 显示每个文件夹中文件 ...
- 【.net 深呼吸】写入日志文件
记录日志,一方面可以把日志写入系统的日志存储中,可在“事件查看器”窗口中查看:如果不喜欢写到系统的日志文件中,也可以写到自己定义的文件中. 其实,日志文件就是文本文件,可能有朋友会想到用写入文本文件的 ...
- ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求
之所以称ASP.NET Core是一个Web开发平台,源于它具有一个极具扩展性的请求处理管道,我们可以通过这个管道的定制来满足各种场景下的HTTP处理需求.ASP. NET Core应用的很多特性,比 ...
- 在Linux Mint上安装node.js和npm
1.安装Node.js 前端开发过程中,很多项目使用npm的http-server的模块来运行一个静态的服务器,我个人在Dell的笔记本上安装的是Linux Mint最新版本,所以想尝试一下在Linu ...