React native 禁止手势触摸 pointerEvents
碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域。
这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换。
原先采取过的方法是在对应的触摸事件 执行return false ,但是这个局限于轮播图得是红色区域的父组件。不然触摸无法冒泡上去。
发现有个好用的属性,以前从来没用过。pointerEvents
看看官网的介绍:
用于控制当前视图是否可以作为触控事件的目标。
- auto:视图可以作为触控事件的目标。
- none:视图不能作为触控事件的目标。
- box-none:视图自身不能作为触控事件的目标,但其子视图可以
<View pointerEvents = 'none'></View>
这样就能完美的解决冲突了,直接不用管啥层级问题,冒泡捕获啥的都忽略。
React native 禁止手势触摸 pointerEvents的更多相关文章
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- 【React Native】进阶指南之二(手势响应系统)
移动设备上的手势识别要比在 web 上复杂得多.用户的一次触摸操作的真实意图是什么,App 要经过好几个阶段才能判断.比如 App 需要判断用户的触摸到底是在滚动页面,还是滑动一个 widget,或者 ...
- react native 触摸Touchable***的区别(TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback)
一.问题背景: react native的跨平台开发没有button的概念,而是使用touchable系列实现点击触发效果. 而touchable系列就有四个之多,而且相互之间仍有较大差别,这就给我们 ...
- react native 手势响应
参考地址:https://www.jianshu.com/p/935e5c6a5064 官方文档地址:https://facebook.github.io/react-native/docs/panr ...
- React Native 之 Touchable 介绍与使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native APP结构探索
APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...
- React Native移动框架功能研究
React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...
- React Native常用组件之ScrollView
1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...
随机推荐
- 新版create-react-app+webpack4跨域
src/setupProxy.js 创建文件 const proxy = require('http-proxy-middleware'); module.exports = function(ap ...
- linux系列(十):cat命令
1.命令格式: cat [选项] [文件] 2.命令功能: cat主要有三大功能: (1).一次显示整个文件:cat filename (2).从键盘创建一个文件:cat > filename ...
- Linux使用Aria2命令下载BT种子/磁力/直链文件 转载
Linux使用Aria2命令下载BT种子/磁力/直链文件 博主: Rat's 发布时间:2017 年 10 月 10 日 26725 次浏览 8 条评论 1073 字数 分类:主机教程 首页 正文 分 ...
- 解决Ubuntu重启后,core_pattern失效问题——手动关闭apport
云主机重启后,core_pattern,即/proc/sys/kernel/core_pattern和/etc/sysctl*配置失效,被系统自动修改. 配置后,重启后core_pattern被重写 ...
- Linux网络编程四、UDP,广播和组播
一.UDP UDP:是一个支持无连接的传输协议,全称是用户数据包协议(User Datagram Protocol).UDP协议无需像TCP一样要建立连接后才能发送封装的IP数据报,也是因此UDP相较 ...
- [端口安全]Hydra密码爆破
目录 0x01 简介 0x02 常见参数 0x03 使用案例 0x04 密码字典 0x01 简介 Hydra中文名:九头蛇,这是一款相当强大的爆破工具,它基本支持了所有可爆破协议,而且容容错率非常好 ...
- iOS开发~防止navigation多次push一个页面
在点击push下一个页面时,因为各种原因,点一下cell或按钮没有响应,用户可能就多点几下,这时候会打开好几个一样的页面. 这是因为push后的页面有耗时操作或者刚好push到另一个页面时,另一个页面 ...
- 我的BO之状态控制
我的BO 1-我的BO之强类型 2-我的BO之数据保护 3-我的BO之状态控制 4-我的BO之导航属性 MIS常有状态 信息管理系统(MIS)常常有流程,一个流程由多个环节构成,不同的环节的流转通过状 ...
- Qt实现原生Flow实现不了的Item错误排列效果,类似淘宝商品展示
main.qml import QtQuick 2.12 import QtQuick.Window 2.12 import QtQml.Models 2.12 Window { visible: t ...
- Java知识体系思维导图
Java知识体系,为方便预览,将思维导图上传至印象笔记,博客园直接上传图片受限于图片大小,暂时接触这么多,待以后丰富 https://app.yinxiang.com/shard/s24/nl/272 ...