1

我想在我的 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,
  },
4

2 回答 2

2

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

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

调试模式看起来像这样

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

可触摸调试模式

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

于 2020-08-20T17:04:01.323 回答
2

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

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

于 2020-08-20T17:08:18.473 回答