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 ...
随机推荐
- CF359D Pair of Numbers gcd+暴力
利用区间 gcd 个数不超过 log 种来做就可以了~ code: #include <bits/stdc++.h> #define N 300005 #define setIO(s) f ...
- cas系列-cas登出(四)
跟登陆一样,登出操作也很重要.由于是多应用间操作,状态保持也是一个要点,根据登出的影响范围,可以将登出操作分为两类: 单应用登出 单点登出(多应用登出) 顾名思义,单应用登出即登出只影响被操作的应用会 ...
- opencv VS C++ 配置
包含目录 $(OPENCV)\include\ $(OPENCV)\include\opencv\ $(OPENCV)\include\opencv2\ 即: D:\opencv\opencv\b ...
- CV_Learn
CV学习进度条记录,也是SRTP的进度记录. 阶段一(2019.4-2019.5): 1.opencv简单操作学习.(实现了一些基础操作,从颜色通道到边缘轮廓,2019.4.22完成) 2.linux ...
- Deep & Cross Network总结
一.介绍 CTR预估全称是Click Through Rate,就是展示给用户的广告或者商品,估计用户点击的概率.公司规模较大的时候,CTR直接影响的价值在数十亿美元的级别.广告支付一个非常流行的模型 ...
- new HttpClient().PostAsync封装参数
var data = Encoding.UTF8.GetBytes("{ \"y\": 5, \"x\": 3}"); var conten ...
- OpenJudge计算概论-奥运奖牌计数
/*===================================================================== 奥运奖牌计数 总时间限制: 1000ms 内存限制: 6 ...
- 数据库连接池配置(案例及排查指南) 原创: 有赞技术 有赞coder 4天前
数据库连接池配置(案例及排查指南) 原创: 有赞技术 有赞coder 4天前
- 连接池大小调优 原创: ImportNew ImportNew 2017-06-07
连接池大小调优 原创: ImportNew ImportNew 2017-06-07
- python 设计模式之中介者模式
#先啰嗦一下 至少半个多月的样子没写博客了,月初去了趟黄山,赏了美景,自然没时间也没条件敲博客了,一个多星期就这么过去了.返回深圳后,工作积压了一堆,然后白天就马不停蹄的忙工作,晚上回家伺候小娃,又想 ...