在日常的需求中,如上图的加减按钮,可能写ui布局的时候没考虑实际的这个点击范围太小,不利于真机上用户点击到,如果加包裹层加padding的话又会影响原先定好的布局,或者不利于对齐。

那么可以用  hitSlop 这个属性,TouchableWithoutFeedback 或者 TouchableOpacity 这两个组件都能用,也是我们常用来做 onPress 的两个包裹组件。

看一下官网介绍:hitSlop 这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset变得更大。 注意: 触摸范围不会超过父视图的边界,也不会影响原先和本组件层叠的视图(保留原先的触摸优先级)

以上的描述相当于向外延展80,都可以触发 onPress 事件,实际上红圈范围点击都是生效的。



React native 放大点击区域 hitSlop属性的使用的更多相关文章

  1. 4、手把手教React Native实战之flexbox布局(伸缩属性)

    ###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...

  2. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  3. React Native中自定义导航条

    这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...

  4. React Native开发之IDE(Atom+Nuclide)安装,运行,调试

    版权声明:本文为博主原创文章,如需转载请注明出处   目录(?)[-] 前言 MacWindowsLinux 准备工作 安装Atom 安装Nuclide 新建一个工程 自动补全 类型标注 语法检查 跳 ...

  5. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  6. React Native导航器Navigator

    React Native导航器Navigator 使用导航器可以让你在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据指定的路由来渲 ...

  7. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  8. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  9. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

随机推荐

  1. luogu P2345 奶牛集会

    二次联通门 : luogu P2345 奶牛集会 /* luogu P2345 奶牛集会 权值线段树 以坐标为下标, 坐标为值建立线段树 对奶牛按听力由小到大排序 对于要查的牛 每次第i次放入奶牛起作 ...

  2. NetworkX系列教程(5)-查看graph的信息

    小书匠Graph图论 有时候graph建好后,我们并不清除该graph内节点的,边的信息,这就需要调用函数去查看了. 目录: 6.查看Graph的信息 6.1查看graph内节点,边的 6.2查看gr ...

  3. opencv 学习一安装环境vs2015+opencv3

    参考博客 http://www.cnblogs.com/skyfsm/p/6840202.html 针对 模块计算机类型“X64”与目标计算机类型“X86”这个问题,我使用cmake 对环境的工程进行 ...

  4. 打造简单OS-总目录

    1-汇编写入引导区,虚拟机启动步骤 (了解即可) 2-开机BIOS初始化与MBR操作系统引导详解 (了解即可) 3-MBR引导区转移加载简单程序(突破512限制)(了解即可) 4-loader硬盘加载 ...

  5. linux环境下固定ip操作

    背景: 使用虚拟机管理软件VMvare workstation 安装好liunx虚拟机(centos)成功,下面为了固定linux的ip进行一系列设置 参考的文件有部分不是很详细,在借鉴它的基础上进行 ...

  6. 微信H5的video标签解决方案

    https://github.com/cczw2010/weixin-video 偶尔发现了可以h5化的一种更适合的方式,一个有趣的属性 h5-page 已经更新

  7. mac 登陆phpmyadmin 提示 mysqli_real_connect(): (HY000/2002): No such file or directory

    我们将下载的phpmyadmin 放在apache目录中,进入phpmyadmin目录, 首先将这个目录中的配置文件改名 sudo mv config.sample.inc.php config.in ...

  8. Java中BigDecimal的equals与compareTo的区别

          有个是否为零的判断[BigDecimal.ZERO.equals(ratio)]我用了BigDecimal的equals方法,结果,判断失败,因此特地分析一下equals与compareT ...

  9. [线性代数] 矩阵代数進階:矩阵分解 Matrix factorization

    Matrix factorization 导语:承载上集的矩阵代数入门,今天来聊聊进阶版,矩阵分解.其他集数可在[线性代数]标籤文章找到.有空再弄目录什麽的. Matrix factorization ...

  10. 使用python2 对服务器监控(监控内存,CPU,网卡流量等)

    #!/usr/bin/env python # -*- coding:utf- -*- #create at -- 'this is a system monitor scripts' __autho ...