碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域。

这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换。

原先采取过的方法是在对应的触摸事件 执行return false ,但是这个局限于轮播图得是红色区域的父组件。不然触摸无法冒泡上去。

发现有个好用的属性,以前从来没用过。pointerEvents

看看官网的介绍:

  用于控制当前视图是否可以作为触控事件的目标。

  • auto:视图可以作为触控事件的目标。
  • none:视图不能作为触控事件的目标。
  • box-none:视图自身不能作为触控事件的目标,但其子视图可以

<View pointerEvents = 'none'></View>

这样就能完美的解决冲突了,直接不用管啥层级问题,冒泡捕获啥的都忽略。

React native 禁止手势触摸 pointerEvents的更多相关文章

  1. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  2. 【React Native】进阶指南之二(手势响应系统)

    移动设备上的手势识别要比在 web 上复杂得多.用户的一次触摸操作的真实意图是什么,App 要经过好几个阶段才能判断.比如 App 需要判断用户的触摸到底是在滚动页面,还是滑动一个 widget,或者 ...

  3. react native 触摸Touchable***的区别(TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback)

    一.问题背景: react native的跨平台开发没有button的概念,而是使用touchable系列实现点击触发效果. 而touchable系列就有四个之多,而且相互之间仍有较大差别,这就给我们 ...

  4. react native 手势响应

    参考地址:https://www.jianshu.com/p/935e5c6a5064 官方文档地址:https://facebook.github.io/react-native/docs/panr ...

  5. React Native 之 Touchable 介绍与使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. React Native APP结构探索

    APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...

  8. React Native移动框架功能研究

    React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...

  9. React Native常用组件之ScrollView

    1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...

随机推荐

  1. [Luogu] 奶酪

    https://www.luogu.org/problemnew/show/3958 #include <iostream> #include <cstdio> #includ ...

  2. P3802 小魔女帕琪 期望

    P3802 小魔女帕琪 期望 题面 题意稍微不清楚,题中的a[i]指的是属性i的魔法有a[i]个. 题目大意:有7种魔法,每种数量a[i],每次随机放出一个魔法,问放完为止出现7次魔法都不相同的期望次 ...

  3. [线性代数] 线性代数入门A Gentle Introduction

    An Overview: System of Linear Equations Basically, linear algebra solves system of linear equations ...

  4. Linux常用命令大全(最完整)

    要学习Linux语法最好到专门的网站 常用语法大全:https://www.runoob.com/linux/linux-command-manual.html (菜鸟教程) 另外提供一个总结的不错的 ...

  5. CF293E Close Vertice

    如果没有边数限制就是裸的淀粉质,如果有了加上一个树状数组记边数就行了. #include<stdio.h> #include<stdlib.h> #include<str ...

  6. 微信小程序 wxParse插件显示视频

    修改wxParse/html2json.js 文件 ,在 html2json(html, bindName) 方法里 var node = { node: 'element', tag: tag, } ...

  7. AWS 配置IPv6

  8. C++利用openssl进行公钥解密

    私钥加密的部分内容,需要用公钥解密下面的实例代码,由于私钥加密后的字符串有不可打印字符,所以程序里面进行了base64,要用的时候先解dec base64 再传递给函数 进行解密 #include & ...

  9. 26Flutter 日期 和时间戳/格式化日期库/flutter异步/ 官方自带日期组件showDatePicker、时间组件showTimePicker以及国际化

    /* 一.Flutter日期和时间戳 日期转换成时间戳 var now=newDateTime.now(); print(now.millisecondsSinceEpoch); //单位毫秒,13位 ...

  10. mysql通过binlog恢复删除数据

    删除误操作有时会意外出现,如果你有备份表数据的好习惯,那么至少你可以追回备份前的那些数据.如果我们打开了mysql的binlog,那么可以通过它的增量操作日志来恢复数据.怎么打开binlog前篇已有说 ...