您好,欢迎来到海洋目录网!网站收录,值得选择!长期招友情链接 QQ10212321

快审
当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

【RN 小记】解决嵌套内的 TouchableHighlight 等组件onPress误触发Bug

来源:网站目录 浏览:225次 时间:2020-12-09

 当前使用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>
);
}`

【RN 小记】解决嵌套内的 TouchableHighlight 等组件onPress误触发Bug
动态效果图: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

【RN 小记】解决嵌套内的 TouchableHighlight 等组件onPress误触发Bug

推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • 伍佰目录伍佰目录

    伍佰网站目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向伍佰目录推荐、提交优秀网站。

    www.wbwb.net