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

`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

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

原文：https://blog.51cto.com/xiaominghimi/2501529