碰到一个需求是做个轮播图带自动播放的,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. epoll事件模型

    事件模型 EPOLL事件有两种模型: Edge Triggered (ET) 边缘触发只有数据到来才触发,不管缓存区中是否还有数据. Level Triggered (LT) 水平触发只要有数据都会触 ...

  2. 【原创】go语言学习(八)切片

    目录: 切片定义 切片基本操作 切片传参 make和new的区别 切片定义 1. 切片是基于数组类型做的一层封装.它非常灵活,可以自动扩容. var a []int //定义一个int类型的空切⽚ 2 ...

  3. CUDA编程前言

    GPU架构 GPU特别适用于 密集计算,高度可并行计算,图形学 晶体管主要被用于 执行计算,而不是缓存数据,控制指令流 GPU计算的历史 2001/2002 -- 研究人员把GPU当做数据并行协处理器 ...

  4. Log4j2 - 日志框架中isDebugEnabled()的作用

    为什么要使用isDebugEnabled() 之前在系统的代码中发现有时候会在打印日志的时候先进行一次判断,如下: if (LOGGER.isDebugEnabled()) { LOGGER.debu ...

  5. SQL中AVG()、COUNT()、SUM()等函数对NULL值处理

    一.AVG() 求平均值 注意AVE()忽略NULL值,而不是将其作为“0”参与计算 二.COUNT() 两种用法 1.COUNT(*) 对表中行数进行计数 不管是否有NULL 2.COUNT(字段名 ...

  6. jQuery中ajax如何返回值到上层函数

    jQuery中ajax如何返回值到上层函数 一.总结 一句话总结: ajax的同步操作即可,设置 async: false, 二.jquery的同步操作 var can_submit=true; $. ...

  7. pytorch基础学习(二)

    在神经网络训练时,还涉及到一些tricks,如网络权重的初始化方法,优化器种类(权重更新),图片预处理等,继续填坑. 1. 神经网络初始化(Network Initialization ) 1.1 初 ...

  8. vue-cli及vue-router

    1.单文件组件 (1)问题:    使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素.当在更复杂的项 ...

  9. vlookup实战_英语单词更新

    https://study.163.com/provider/400000000398149/index.htm?share=2&shareId=400000000398149( 欢迎关注博主 ...

  10. [Java复习] 分布式高可用-Hystrix

    什么是Hystrix? Hystrix 可以让我们在分布式系统中对服务间的调用进行控制,加入一些调用延迟或者依赖故障的容错机制. Hystrix 的设计原则 对依赖服务调用时出现的调用延迟和调用失败进 ...