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 ...
随机推荐
- Windows10下安装Ubuntu18.04LTS详细教程
这篇文章分享自己在Windows10系统下安装VMware虚拟机,然后在VMware中安装Ubuntu 18.04 LTS的详细过程.之所以选择在虚拟机中安装Ubuntu,主要是可以不影响自己电脑的正 ...
- python常用函数2
2.reduce()函数 reduce() 函数也是python内置的一个高阶函数.reduce()函数接收的参数和 map()相似,一个函数 f ,一个list,但行为和 map()不同,re ...
- create an oauth app
github可以对自己的服务进行oauth认证,创建oauth认证的方式如下: github -> Settings -> Developer settings -> Develop ...
- xiugai grub
https://wiki.gentoo.org/wiki/Flicker_Free_Boot#Getting_the_custom_version_of_grub
- 十一月百度杯pwnme 详细wp
目录 程序基本信息 程序溢出点 整体思路 exp脚本 成功获得flag 参考 程序基本信息 可以看到开启了栈不可执行和got表不可写保护. 程序溢出点 在函数sub_400AF7中,v8可以读入0x1 ...
- firewall-cmd命令详解
https://blog.csdn.net/GMingZhou/article/details/78090963 实例 # 安装firewalld yum install firewalld fire ...
- Flutter移动电商实战 --(48)详细页_详情和评论的切换
增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/material.dart'; i ...
- 组合数学---P1358 扑克牌
P1358 扑克牌 题解 组合数学 Π c[剩余未选牌数][ai] ( i = 1,2,...,m ) 注意 组合数也要取模,不然数字太大会炸 组合数的具体实现就是Dp啊 代码 #include< ...
- 一个项目里,httpclient竟然出现了四种
有网友提问: 今年年初,到一家互联网公司实习,该公司是国内行业龙头.不过技术和管理方面,却弱爆了.那里的程序员,每天都在看邮件,查问题工单.这些问题,多半是他们设计不当,造成的.代码写
- Hive中导入Oracle数据错误:Listener refused the connection with the following error: ORA-12505
问题: 今天往Hive中导入Oracle数据的时候碰到了如下错误:Listener refused the connection with the following error: ORA-12505 ...