【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