反应本机可触摸图标

如何解决反应本机可触摸图标

我想从Header中的MaterialIcon中实现一个菜单图标，当我点击该图标时，我想打开一个菜单。问题是，如果我在此图标上添加边距或其他内容以放置图标，则Touchable onPress无法正常工作。首先，我使用zIndex进行了绝对定位，并且不会每次都触发onPress。比方说，轻按100次onPress会触发3次。我已经弄清楚了相对的行为和相对定位和边距。我还尝试通过react-native手势或react-native来实现Touchable。当我删除边距时，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,// marginLeft: height * -0.13,

解决方法

亲爱的我不会编辑您的代码，我希望您自己去做，因此您也可以调试代码并查找问题并解决它们。

React本机应用程序内嵌了React Native调试菜单！根据您在Android ctrl（cmd）+ M 和IOS ctrl（cmd）+ D 上的情况，将弹出以下弹出窗口

然后单击 显示检查器 ，然后从菜单中选择 可触摸 ，然后您将看到此应用看起来像：

现在单击要检查可触摸部分，然后查看您的可触摸位置在！我相信您会理解并做其余的事情

,

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

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