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

最新推荐文章于 2021-12-20 10:27:27 发布

李华明Himi

最新推荐文章于 2021-12-20 10:27:27 发布

阅读量1.6k

点赞数

分类专栏： ReactNative 文章标签： react react native Touchable Highlight Opacity

本文链接：https://blog.csdn.net/xiaominghimi/article/details/106554370

版权

在RN版本0.62.2中，使用react-native-scrollable-tab-view或react-native-swiper时，嵌套的TouchableHighlight、TouchableOpacity等组件会遇到onPress误触发的问题。文章通过示例代码展示了问题，并提出了解决方案，即更换Touch组件的导入源。

摘要由CSDN通过智能技术生成

当前使用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>
                    <TouchableHigh