React Native 可触摸图标

Question

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

这是我的代码：

<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

Amir 那里有一些很好的调试信息，值得将来了解和使用。话虽如此，仅仅因为你可以看到你的可触摸位置并不意味着你就会明白哪里出了问题。

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

Answer 2

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

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

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

现在单击您要检查可触摸的部分并查看可触摸的位置！我相信你会理解并做剩下的