0
点赞
收藏
分享

微信扫一扫

【React Native 小记】解决嵌套内的 TouchableHighlight、TouchableOpacity 等组件onPress误触发


 

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

                                                 

【React Native 小记】解决嵌套内的 TouchableHighlight、TouchableOpacity 等组件onPress误触发_react

 

     看上面的运行效果,能看出来,其实我们在做的是个切换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'

其他类似: import { TouchableHighlight,TouchableOpacity,TouchableNativeFeedback } from 'react-native-gesture-handler'

  ok,我们继续看下修改后的正确效果:

                                                 

【React Native 小记】解决嵌套内的 TouchableHighlight、TouchableOpacity 等组件onPress误触发_Touchable_02

 

 

 

 

举报

相关推荐

0 条评论