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 ...
随机推荐
- selenium + chromeDriver的ip代理设置
from selenium import webdriver from selenium.webdriver.chrome.options import Options import zipfile ...
- 使用jsonpath解析多层嵌套的json响应信息
Python自带的json库可以把请求转为字典格式, 但在多层嵌套的字典中取值往往要进行多次循环遍历才能取到相应的数据, 如: res_dict = { "code": 0, &q ...
- zookeeper 随记
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务. zookeeper的几种模式: 1.单点模式 2.分布式集群模式,节点运行在多台机器 3.单点多实例 在这里只介绍单点多实例安装. ...
- Linux的MySQL安装和配置(详细)
打开centos系统 输入root用户和密码(我的用户和密码都是root) 查看有没有安装mysql rpm -qa|grep mysql 没有返回任何信息说明没有安装 我是用的centos7,默认安 ...
- GO- 使用JSON
1 json.Marshal 把对象转换为JSON的方法 原型如下 func Marshal(v interface{}) ([]byte, error)这个函数接收任意类型的数据 v,并转换为字节 ...
- create table:使用SELECT语句创建表
oracle下直接(创建表) create table newtablename as select * from oldtablename sqlserver的语法是(自动创建表) : select ...
- laravel不同用户对应的同名的session是独立的
laravel不同用户对应的同名的session是独立的 一.总结 一句话总结: laravel中 不同用户会根据不同的laravel_session从而将session存在不同的session文件里 ...
- 运行模型,COM错误,解决问题步骤
运行模型,COM错误,解决问题步骤 1.数据新建一个,路径短一点,不要有中文 2.所有数据重新导入 3.文档新建 4,问题莫名奇妙解决了
- phpstorm有红波浪线,怎么找到语法错误的地方
在phpstorm里面,有时候不小心多打了个字符,会导致IDE显示红色波浪线,提示有语法错误了,但是不容易找出在哪一行. 在有红色波浪线的文件上,右键[inspect code]: 检查代码后就会知道 ...
- JavaScript WebSocket 使用总结
翻看之前写的 Highcharts使用总结 和 前后台交互之传参方式,想对 WebSocket 单独写一个使用总结. 一.认识 WebSocket . WebSocket 是 H5 新出的一种协议, ...