React Native 可触摸图标

Question

我想在我的 Header 中实现 MaterialIcon 的菜单图标，当我点击这个图标时，我想打开一个菜单。问题是，如果我向此图标添加边距或其他内容来定位图标，则 Touchable onPress 无法正常工作。首先，我使用 zIndex 进行绝对定位，并且不会每次都触发 onPress。假设点击 100 次 onPress 被触发了 3 次。我发现了相对定位和边距的相同行为。我还尝试从 react-native-gestures 或 react-native 实现 Touchables。在我删除边距的那一刻，Touchable 工作正常。每次按下此图标时都会触发 onPress。非常好奇。怎么了？有人知道这个问题吗？

这是我的代码：

<StatusBar barStyle="light-content" />
<ScreenCmpt style={styles.container}>
   <View style={styles.headerContainer}>
     <TouchableOpacity onPress={() => console.log("test")}>
       <View style={styles.menuContainer}>
          <MaterialIcons style={styles.menu} name="menu" size={30} />
       </View>
     </TouchableOpacity>
    ....

headerContainer: {
    flexDirection: "row",
    alignSelf: "center",
  },
  header: {
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 15,
    fontFamily: "CinzelDecorative_400Regular",
    marginBottom: 20,
  },
  menuContainer: {
    marginLeft: height * -0.13,
  },
  menu: {
    color: colors.primary,
    alignSelf: "center",
    // marginLeft: height * -0.13,
  },

Answer 1

亲爱的，我不会编辑你的代码，我希望你自己去做，这样你也可以调试你的代码，发现问题并解决它们。

React Native 应用程序中嵌入了 React Native 调试菜单！对于 Android ctrl(cmd) + M 和 IOS ctrl(cmd) + D 上的情况将打开弹出下面的弹出窗口

然后点击 show inspector 然后从菜单中选择 touchable 然后你会看到你的应用看起来像这样：

现在点击你想要检查可触摸的部分，看看你的可触摸位于哪里！我相信你会理解并完成剩下的事情

Answer 2

Amir那里有一些很好的调试资料，值得以后了解和使用。话虽这么说，仅仅因为你可以看到你的可触摸位置并不意味着你会明白哪里出了问题。

我个人不 'know' 有什么问题，但我的猜测是通过添加边距，您会将图标移出可触摸容器。我建议将您的定位样式添加到 TouchableOpacity 而不是您的图标。这应该移动整个按钮，而不仅仅是它的内容，因为可以将内容移到父容器之外。

React Native 可触摸图标

React Native Touchable Icon

react-native

react-native-gesture-handler