【RN 小记】解决嵌套内的 TouchableHighlight 等组件onPress误触发Bug
当前使用RN版本号: 0.62.2 ,此版本中,对于使用 react-native-scrollable-tab-view 、react-native-swiper等组件嵌套View中使用 TouchableHighlight、TouchableOpacity 、 TouchableNativeFeedback等时,会出现其 onPress 误触发的情况。
`import React from 'react';
import {
View,
Text,
Image,
TouchableHighlight
} from 'react-native';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
render() {
return (
<ScrollableTabView prerenderingSiblingsNumber={1}>
<View tabLabel={"tab1"}>
<TouchableHighlight onPress={()=>{console.warn("触发-tab1-测试按钮1")}}>
<Text style={{padding:100,backgroundColor:"#aaa"}}>测试按钮1</Text>
</TouchableHighlight>
<TouchableHighlight onPress={()=>{console.warn("触发-tab1-测试按钮2")}}>
<Text style={{padding:100,backgroundColor:"gray"}}>测试按钮2</Text>
</TouchableHighlight>
</View>
<View tabLabel={"tab2"}>
<TouchableHighlight onPress={()=>{console.warn("触发-tab2-测试按钮1")}}>
<Text style={{padding:100,backgroundColor:"gray"}}>测试按钮1</Text>
</TouchableHighlight>
<TouchableHighlight onPress={()=>{console.warn("触发-tab2-测试按钮2")}}>
<Text style={{padding:100,backgroundColor:"#aaa"}}>测试按钮2</Text>
</TouchableHighlight>
</View>
</ScrollableTabView>
);
}`
动态效果图:https://img-blog.csdnimg.cn/20200604181021921.gif
看上面的运行效果,能看出来,其实我们在做的是个切换Tab的动作,但是仍旧事件被 TouchableHighlight 的onPress事件触发到了,这并不是我们想要的结果。旧版本不存在此问题,那么解决方案也比较简单。
针对此问题,我们可以将使用的 TouchableHighlight、TouchableOpacity 、 TouchableNativeFeedback 等RN组件换个方式(库)来导入使用:
import { View, Text, Image, TouchableHighlight } from 'react-native'; 改为: import { View, Text, Image, } from 'react-native'; import { TouchableHighlight } from 'react-native-gesture-handler'
ps.其他类似: import { TouchableHighlight,TouchableOpacity,TouchableNativeFeedback } from 'react-native-gesture-handler'
ok,我们继续看下修改后的正确效果:
动态效果图:https://img-blog.csdnimg.cn/20200604181536901.gif
- 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法
- Fragment嵌套使用存在的一些BUG以及解决方法
- ScrollView嵌套ListView的bug问题解决
- 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法
- 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法
- Asp.net_解决vs运行报在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题的bug方法
- 如何解决Android设备上touchend不能触发bug
- 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法
- PCI: BIOS Bug: MCFG area at e0000000 is not E820-reserved pci:not using mmconfig戴尔机器非标准组件导致红帽企业版linux启动失败的解决
- 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法
- ScrollView拦截所嵌套组件的onTouch()事件解决办法
- 项目调试时候,出现其中用到的一个组件“访问被拒绝”的解决方法(.net的一个BUG)
- 火狐textarea输入法的bug的触发及解决
- 解决在IE7下Ext表单(form)过长的时候fieldset内组件错位的BUG
- Android Fragment嵌套使用存在的一些BUG以及解决方法
- NZ-ZORRO组件库进度条颜色无法设置的bug解决
- HTML5:百度地图手机端单触点单击和长按事件,解决部分手机点地图击失效,多触点、拖动依然触发长按的bug
- 微软模态对话框解决Bootstrap模态对话框嵌套的一个bug
- 基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
- 关于viewpager里Fragment嵌套Fragment的一些列bug解决