react-native - 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,
  },

标签： react-nativereact-native-gesture-handler

Answer 1

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

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

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

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