react-native中View组件这是单纯的视图容器,并不能响应交互变化,绑定事件,rn提供了TouchableOpacity等封装组件以正确响应触摸操作。

TouchableWithoutFeedback:单纯的用户点击触摸响应组件,不会改变视图UI,仅绑定press、longPress等事件;
TouchableOpacity:响应用户触摸操作,继承TouchableWithoutFeedback组件所有功能与属性,点击下降低视图透明度,可以绑定perss、longPress等事件;
TouchableHighlight:响应用户触摸操作,继承TouchableWithoutFeedback组件所有功能与属性,点击下背景变暗,可以添加press、longPress等事件绑定;
TouchableNativeFeedback:Android平台组件,继承TouchableWithoutFeedback组件所有功能与属性,同时可以设置background用于反馈触摸操作(形成波纹背景效果)
更多知识见原文:https://blog.csdn.net/Wbiokr/article/details/79167771

react-native---rn中的修饰组件(TouchableHightlight、TouchableOpacity、TouchableNativeFeedback等)的更多相关文章

  1. react native( rn) 中关于navigationOptions中headerRight 获取navigation的问题 rn

    使用以下代码获取navigation static navigationOptions = ({ navigation, navigationOptions }) => { const { pa ...

  2. React Native开发中自动打包脚本

    React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...

  3. RN中的常用组件-----图片

    1.RN中的常用组件-----图片 本地图片: <Image  source={require('../src/assets/x.jpg')}/> 本地图片可以无需指定尺寸(因为导入/打包 ...

  4. React Native之本地文件系统访问组件react-native-fs的介绍与使用

    React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...

  5. React Native工程中TSLint静态检查工具的探索之路

    建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...

  6. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

  7. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  8. React native开发中常见的错误

    react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: java.lang.RuntimeExcept ...

  9. 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

    ),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...

  10. React Native填坑之旅--组件生命周期

    这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...

随机推荐

  1. flutter屏幕适配

    现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设 ...

  2. Linux基础学习笔记2-文件管理和重定向

    本节内容 1)文件系统结构元素 2)创建和查看文件 3)复制.转移和删除文件 4)软和硬链接 5)三种I/O设备 6)把I/O重定向至文件 7)使用管道 文件系统和结构 文件系统 文件和目录被组织成一 ...

  3. python之路--网络通信协议

    一 . osi七层协议 互联网协议按照功能不同分为osi七层或tcp/ip五层或tcp/ip四层 二 . tcp三次握手和四次挥手 我们知道网络层,可以实现两个主机之间的通信.但是这并不具体,因为,真 ...

  4. nginx反向代理proxy_pass的问题

    起因:今天企业部署一个项目,用的nginx做的反向代理,配置如下: 测试结果令人失望,IP:端口 能访问项目,域名:端口 也能访问 ,但是 域名/接口名 访问失败 ################## ...

  5. web前端面試題

    1.怎麼判斷一個一個變量的類型是string? typeof(obj)==="string" typeof obj==="string" obj.constru ...

  6. 关于SQL查询语句中的LIKE模糊查询的解释

    LIKE语句的语法格式为: select * from 表名 where 字段名 like 对应值(字符串) 注:主要是针对字符型字段的,它的作用是在一个字符型字段列中检索包含对应字符串的. 下面列举 ...

  7. freemarker 设置中文

    在web中添加一段代码 <servlet> <servlet-name>freemarker</servlet-name> <servlet-class> ...

  8. 洛谷 P1441 砝码称重

    题目描述 现有n个砝码,重量分别为a1,a2,a3,……,an,在去掉m个砝码后,问最多能称量出多少不同的重量(不包括0). 输入输出格式 输入格式: 输入文件weight.in的第1行为有两个整数n ...

  9. Android View相关知识问答

    Android View相关核心知识问答 Activity Window View之间的三角关系 你真的了解View的坐标吗? 在渲染前获取 View 的宽高 5种手势工具类 浅析Android的窗口

  10. url.openconnection() 设置超时时间

    System.setProperty("sun.net.client.defaultConnectTimeout", "30000"); System.setP ...