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 ...
随机推荐
- Python多线程笔记(三),queue模块
尽管在Python中可以使用各种锁和同步原语的组合编写非常传统的多线程程序,但有一种首推的编程方式要优于其他所有编程方式即将多线程程序组织为多个独立人物的集合,这些任务之间通过消息队列进行通信 que ...
- [Codevs] 一塔湖图
http://codevs.cn/problem/1024/ floyd 走起 #include <iostream> #include <cstdio> #include & ...
- P1899 魔法物品
题目描述 //又是一个好(nan)题好(nan)题 //首先,普通物品一开始就卖掉就可以,因为它不会增值 //至于魔法物品 //如果一个魔法物品使用了卷轴后的价值减去买卷轴的钱还不如鉴定前的价值高,那 ...
- (3)打鸡儿教你Vue.js
vue.js是一套构建用户界面的渐进式框架 vue关注视图层,采用自底向上增量开发的设计 <div id="app"> <p>{{ message }}&l ...
- [bzoj 5332][SDOI2018]旧试题
传送门 Description \[ \sum_{i=1}^A\sum_{j=1}^B\sum_{k=1}^Cd(ijk) (\mathrm{mod\:} 10^9+7) \] 其中 \(d(ijk) ...
- LogStash安装使用
1.下载LogStash的rpm包: wget https://artifacts.elastic.co/downloads/logstash/logstash-7.4.2.rpm 2. 安装elas ...
- 【原】Python基础-类
class CPerson: name = "default" __name2 = "inaccessable name" #类作用域内的变量可以被所有实例访问 ...
- 2018-2019-2 20165114《网络对抗技术》 Exp 8 Web基础
Exp 8 Web基础 目录 一.实验内容 二.基础问题回答 (1)什么是表单 (2)浏览器可以解析运行什么语言. (3)WebServer支持哪些动态语言 三.实践过程记录 3.1Web前端HTML ...
- Alpha项目冲刺! Day3-产出
各个成员今日完成的任务 林恩:任务分工,博客撰写,完善设置等模块 杨长元:安卓本地数据库基本建立 李震:完成注册页面 胡彤:完善服务端 寇永明:画图,学习 王浩:画图,学习 李杰:画图,学习 各个成员 ...
- SQL-W3School-函数:SQL LAST() 函数
ylbtech-SQL-W3School-函数:SQL LAST() 函数 1.返回顶部 1. LAST() 函数 LAST() 函数返回指定的字段中最后一个记录的值. 提示:可使用 ORDER BY ...