React Native：TouchableNativeFeedback能否添加transform样式解决点击失效问题

在React Native 0.61.2中，TouchableNativeFeedback确实不支持直接给自身添加transform样式，这是旧版本组件的限制。你遇到的点击问题，本质是触摸热区和视觉位置不匹配：内部View通过transform平移后，TouchableNativeFeedback的触摸区域还是基于它原始的布局边界，没有跟着子视图移动，所以平移后的View上部区域不在触摸热区内，导致无法点击。

下面给你两种可行的解决办法：

方案一：给外层View添加transform（推荐） #

把平移样式加到TouchableNativeFeedback外层的容器View上，这样整个触摸组件的布局位置会跟着平移，触摸热区和视觉位置完全匹配：

function App() {
  return (
    <View>
      <View style={styles.touchableWrapper}>
        <TouchableNativeFeedback onPress={this._onButtonPress}>
          <View style={styles.app}></View>
        </TouchableNativeFeedback>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  touchableWrapper: {
    transform: [{ translateY: 25 }]
  },
  app: {
    height: 50,
    width: 50
  }
});

方案二：用hitSlop扩大触摸热区 #

如果必须在内部View上保留transform，可以通过设置TouchableNativeFeedback的hitSlop属性，扩大触摸热区范围，覆盖平移后的区域：

function App() {
  return (
    <View>
      <TouchableNativeFeedback 
        onPress={this._onButtonPress}
        hitSlop={{ top: 25, bottom: 0, left: 0, right: 0 }}
      >
        <View style={styles.app}></View>
      </TouchableNativeFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    height: 50,
    width: 50,
    transform: [{ translateY: 25 }]
  }
});

这个方法是通过扩展触摸区域来适配视觉位置，适合不需要改变整体布局的场景，但要注意不要过度设置hitSlop，避免影响周围组件的触摸交互。

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