【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