在日常的需求中,如上图的加减按钮,可能写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. BZOJ 1576 树剖+LCT

    题意:给定一张图,保证 $1$ 号点到其他所有点的最短路径是唯一的,求:对于点 $i$,不经过 $1$ 到 $i$ 最短路径上最后一条边的最短路. 题解:可以先建出最短路树,然后枚举每一条非树边. 对 ...

  2. QT中使用pri子工程

    QT中使用pri子工程 使用子工程的作用是使得工程结构更加清晰,举个例子: 我制作了一个自定义控件,具备通用性,我打算把它用在日后的工程中.制作的这个控件需要用到头文件h.源文件c,资源文件qrc.图 ...

  3. 监控ntp进程的

    !#/bin/bash ntp_num=$[`ps -ef|grep ntp|wc -l`-1] if [ $ntp_num == 1 ];then echo 0 else echo $ntp_num ...

  4. 2019暑期金华集训 Day3 图论

    自闭集训 Day3 图论 NOI2019 D2T1 没有真正建出图来的必要,可以直接打取\(\min\)的\(tag\). 也可以把边压进堆里,然后变成一个二维清点问题(???),然后就线段树+并查集 ...

  5. 在学习ROS过程中碰到的一些问题--1

    好了,这是接触ROS的第三周了,初步了解了一下ROS,很多问题自己还是无法解决,但是想着很久没有在blog上记录自己的学习过程,就先胡乱写一下吧.^-^ 1.关于ROS各种基本概念的理解 这方面知识建 ...

  6. 数据层面;MySQL查

    AND 运算优先于OR运算执行(通过括号进行强化) count(*) 会得到包含NULL的数据行数:count(<列明>)会得到NULL之外的数据行数 SQL语句的总逻辑:书写顺序 sel ...

  7. C++标准库分析总结(一)

    之前学习过标准库,最近身边有人问到相关话题,故在此做一个总结 1 标准库介绍 C++标准库:C++ Standard Library C++标准模板库:Standard Template Librar ...

  8. SqlServer 获取 当前地址下 所有数据库字段信息 / 快速 批量插入数据库(TVPs)

    SQL执行 --拼装 当前地址下 所有数据库字段信息 BEGIN DECLARE @dataBaseName NVARCHAR(MAX)--数据库名称 DECLARE @tableName NVARC ...

  9. hadoop2.9.2 调整jvm

    错误:namenode挂掉 查看hadoop的日志文件,发现存在大量的GC,导致namenode挂掉 命令行执行错误信息: 解决: 查看系统内存: # /data1/hadoop/hadoop/etc ...

  10. Linux常用命令大全(最完整)

    要学习Linux语法最好到专门的网站 常用语法大全:https://www.runoob.com/linux/linux-command-manual.html (菜鸟教程) 另外提供一个总结的不错的 ...