前言

  • 学习本系列内容需要具备一定 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 介绍与使用的更多相关文章

  1. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. React Native之FlexBox介绍和使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  3. react native 触摸Touchable***的区别(TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback)

    一.问题背景: react native的跨平台开发没有button的概念,而是使用touchable系列实现点击触发效果. 而touchable系列就有四个之多,而且相互之间仍有较大差别,这就给我们 ...

  4. React Native中Touchable组件的使用

    截图如下: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import Rea ...

  5. React Native项目组织结构介绍

    代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组件若实现不一样,分为android的实现和ios的实现 ...

  6. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. 使用Visual Studio Code和typescript 开发调试React Native项目

    关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...

  8. React Native 教程:001 - 如何运行官方控件示例 App

    原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...

  9. React Native从入门到放弃之环境搭建

    官网 https://facebook.github.io/react-native/ 中文网站 http://reactnative.cn/ 相关文档 http://www.lcode.org/史上 ...

随机推荐

  1. 支付宝web支付

    过程 1. 用户下单 2. 商户后台产生订单 3. 请求支付宝web支付页面(将订单信息返回给用户---放在form里面---隐藏起来-----并通过脚本自动提交此form到支付宝web支付页) 4. ...

  2. Flexbox 自由的布局

    css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...

  3. 前端自学路线之js篇

    上一篇我们讲了前端切图的学习路线,不知大家有没有收获.今天来聊聊前端工程师的核心技能之——JavaScript.js这门语言看似简单,但要做到入门.熟练以至于架构的程度,还是有一段路要走的,今天就来聊 ...

  4. java太low,又舍不得jvm平台的丰富资源?试试kotlin吧(一)

    尝试kotlin的起因 因为各种原因(版权,人员招聘),公司的技术体系从c#转到了java,我花了大概两周的时间来上手java,发现java的语法还是非常简单的,基本看着代码就知道什么意思.学习jav ...

  5. 不要听吹牛逼什么前端MVVM框架就是好,其实都是一帮没学好分层设计的搞出来的,让你彻底看清前端MVVM的本质

    最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...

  6. ABP源码分析二十六:核心框架中的一些其他功能

    本文是ABP核心项目源码分析的最后一篇,介绍一些前面遗漏的功能 AbpSession AbpSession: 目前这个和CLR的Session没有什么直接的联系.当然可以自定义的去实现IAbpSess ...

  7. Html5 Json应用

    本文主要说明Json的基本概念,和一个在Html中使用Json给元素赋值的小例子,属于基础性信息 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Obj ...

  8. 你所不知道的setTimeout

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...

  9. 使用nwjs开发桌面应用之Hello,World!

    今天发现原来JavaScript也可以用来开发桌面应用程序,顿时有一种很牛逼的感觉,于是马上就开始了Hello,World!,感受一下JavaScript的强大. 可以用来开发桌面应用的js框架有三种 ...

  10. JavaScript知识点总结(命名规范,变量的作用域)

    命名规范 有人说JavaScript的宽容性是这个语言最糟糕的方面之一.比如说想把2个数字加在一起,JavaScript会把其中一个数字解析成字符串,那么就会得到一个奇怪的字符串,而不是2个数字的和. ...