UnClickAble TouchableHighlight问题求助：绑定函数后仍无按钮效果

嘿，我来帮你拆解一下遇到的这两个问题，一步步排查：

1. 箭头函数导致的undefined is not an object报错 #

当你用类字段形式定义箭头函数（MyClick = () => {}）时出现这个错误，大概率是因为你的项目编译配置没跟上——类属性（class properties）是ES的提案特性，需要Babel插件@babel/plugin-proposal-class-properties支持才能正确编译。如果你的React Native版本较旧，或者没有在babel配置里启用这个插件，箭头函数的this绑定就会失效，导致你在函数里访问this.props或this.state时拿到undefined。

解决这个问题的话，要么在babel.config.js里添加这个插件，要么就继续用构造函数绑定的方式（你现在用的这种），后者其实是更兼容旧版本的写法，也没问题。

2. TouchableHighlight无点击效果、underlayColor不生效 #

报错消失但按钮没反应，通常不是函数绑定的问题了，而是组件渲染或样式的问题，给你几个排查方向：

• 确认点击区域存在：TouchableHighlight的点击区域完全由它的子元素决定，如果子元素是空视图、没有宽高/内边距，那实际点击区域就是0，自然没反应。比如给子View加个样式：

  <TouchableHighlight onPress={this.MyClick} underlayColor="#ccc">
    <View style={{ padding: 12, backgroundColor: '#fff' }}>
      <Text>点击测试</Text>
    </View>
  </TouchableHighlight>
  

• 检查是否有元素覆盖：看看父组件里有没有其他绝对定位的元素，或者z-index更高的组件，把TouchableHighlight挡住了——这种情况下触摸事件会被上层元素吃掉。
• 排查pointerEvents属性：如果TouchableHighlight或者它的父元素设置了pointerEvents: 'none'，会直接禁用触摸交互，记得去掉这个样式。
• underlayColor不生效的特殊情况：如果子元素的backgroundColor是不透明的，会完全覆盖TouchableHighlight的underlay效果。可以试试去掉子元素的背景色，或者把TouchableHighlight的背景色设为透明，让underlay能显示出来。

如果按照这些步骤排查后还是有问题，把你的组件代码贴出来，我再帮你精准定位！

内容的提问来源于stack exchange，提问作者David Futera