在日常的需求中,如上图的加减按钮,可能写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. STL备忘

    STL备忘 lower_bound 查找第一个大于或等于的数,返回该数字的地址,地址减去首地址即得到数组下标(首地址下标为0) upper_bound 查找第一个大于的数 unique 去重,常用于离 ...

  2. 新路由3newifi3路由器刷机newifi3breed解锁小白刷机教程路由器刷breed老毛子Padavan固件

    路由刷机围观33696次5条评论日期:2018-11-23字体:大中小   此教程只针对新三路由器小白玩家,大神勿喷,非常详细. 先说一下,本人2018年11月22日新入手了个新三路由器,收到货晚上8 ...

  3. ubuntu16.04源码编译安装nginx1.14.2

    1.下载nginx-1.14.2, 官网地址:nginx.org 2.解压nginx-1.14.2.tar.gz tar zxvf nginx-1.14.2.tar.gz 3.切到文件夹nginx-1 ...

  4. P3986 斐波那契数列——数学(EXGCD)

    https://www.luogu.org/problem/P3986 很久很久以前,我好像写过exgcd,但是我已经忘了: 洛谷上搜EXGCD搜不到,要搜(扩展欧几里得) 这道题就是ax+by=k, ...

  5. Java基础系列 - 抽象类,子类继承

    package com.company; /** * 抽象类继承 * 用abstract修饰类就是抽象类 * 用abstract修饰方法就是抽象方法(一般使用比较少) * 抽象类不能被实例化 */ p ...

  6. mac下生成keystore

    keytool -genkey -v -keystore sign.keystore -alias cxa -keyalg RSA -validity 20000 -keystore /Users/c ...

  7. 2018-2019-2 20165114《网络对抗技术》 Exp 8 Web基础

    Exp 8 Web基础 目录 一.实验内容 二.基础问题回答 (1)什么是表单 (2)浏览器可以解析运行什么语言. (3)WebServer支持哪些动态语言 三.实践过程记录 3.1Web前端HTML ...

  8. Python 自学笔记(六)

    PK小游戏 1.要有玩家敌人:那就是需要定义两个角色的属性变量 2.相互攻击:需要两个角色都有血量和攻击的变量(也就是四个变量) 3.攻击减少血量:比如玩家血量=敌人攻击力-玩家当前血量 4.最终胜负 ...

  9. 安装navicat后C盘多了好多链接文件夹

      安装完最新的navicat后C盘多了好多连接文件夹 多了一堆链接的文件夹,里面就是 这些文件,但是吧强迫症怎么能让C盘那么多没有用的文件夹存在呢 最起码是这样的吧: 怎么办呢?找navicat的设 ...

  10. WhereHows编译时报错EINVRES Request to https://bower.herokuapp.com/packages/ace-builds failed with 502

    先说明一下,简单点讲就是bower的仓库地址换掉了.解决方案如下: 在.bowerrc文件中增加这么一句: { "registry": "https://registry ...