碰到一个需求是做个轮播图带自动播放的,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 1593

    $Answer = A ^ B $ 的因子之和 将 $A$ 进行质因数分解$A = p_1 ^ {a_1} P_2 ^ {a_2} p_3 ^ {a_3} \cdots p_k ^ {a_k}$ $A ...

  2. 第12章、乐活人生的ABCDE

    目录 第12章.乐活人生的ABCDE 什么时候该乐观 让自己乐观的ABC 确认ABC 你的ABC记录 反驳和转移注意 转移注意 反驳 保持距离 学习与自己争辩 证据 其他可能性 暗示 用处 你的反驳记 ...

  3. TensorFlow(十二):使用RNN实现手写数字识别

    上代码: import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist ...

  4. windows server2012 搭建.netcore+nginx+nssm运行环境

    1.linux+.netcore+sqlserver的坑 linux不支持访问sqlserver2008及以下的版本(由于System.Data.SqlClient.dll的限制.windows上面访 ...

  5. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  6. 在 Arch 上Yaourt 使用这些替代品

    1. aurman aurman 是最好的 AUR 助手之一,也能胜任 Yaourt 替代品的地位.它有非常类似于 pacman 的语法,可以支持所有的 pacman 操作.你可以搜索 AUR.解决包 ...

  7. 关于long_query_time的设置,可不可以说是mysql的一个小小bug呢

    我们知道对对于MySQL的日志功能,我们可以完全自己控制到底写还是不写.一般来说,binlog我们一般会开启,而对于慢查询我们一般会在开发的时候调试和观察SQL语句的执行速度.但今天发现一个问题.在使 ...

  8. 2018-2019 20175234 实验三《敏捷开发与XP实践》实验报告

    目录 2018-2019 20175234 实验三<敏捷开发与XP实践>实验报告 实验内容 实验中的问题 码云链接 参考资料 2018-2019 20175234 实验三<敏捷开发与 ...

  9. [Android] i2c-toos 在 Android 上使用

    CPU:RK3399 系统:Android 7.1 i2c-tools 是一款免费开源的工具,可以检测 i2c 总线上的设备,可以读写寄存器等等 可以从下面路径下载需要的版本: https://www ...

  10. mybatis设置Map空值返回

    mybatis时,设置Map返回,当值为空时属性也会没有 在application.properties中加入下面配置,将会解决这个问题. #当查询数据为空时字段返回为null,不加这个查询数据为空时 ...