Icône tactile native React

Question

Je souhaite implémenter une icône de menu à partir de MaterialIcon dans mon en-tête et lorsque j'appuie sur cette icône, je souhaite ouvrir un menu. Le problème est que si j'ajoute une marge ou autre chose à cette icône pour positionner l'icône, Touchable onPress ne fonctionne pas correctement. J'ai d'abord eu un positionnement absolu avec zIndex et onPress n'a pas été déclenché à chaque fois. Disons qu'en tapant 100 fois, onPress a été déclenché 3 fois. J'ai compris le même comportement avec un positionnement relatif et une marge. J'ai également essayé d'implémenter Touchables à partir de react-native-gestures ou de react-native. Au moment où je supprime la marge, le Touchable fonctionne correctement. Le get onPress se déclenche à chaque fois que j'appuie sur cette icône. Très curieux. Qu'est-ce qui ne va pas? Est-ce que quelqu'un connait ce problème ?

Ceci est mon code :

<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 contient de bonnes informations de débogage, et cela vaut la peine de les connaître et de les utiliser à l'avenir. Cela étant dit, ce n'est pas parce que vous pouvez voir où se trouvent vos emplacements touchables que vous comprendrez ce qui ne va pas.

Personnellement, je ne "sais" pas ce qui ne va pas, mais je suppose qu'en ajoutant une marge, vous déplacez votre icône hors du conteneur tactile. Je recommanderais d'ajouter vos styles de positionnement au TouchableOpacitylieu de votre icône. Cela devrait déplacer tout le bouton, au lieu de simplement son contenu, car il est possible de déplacer le contenu en dehors d'un conteneur parent.

Answer 2

cher, je ne modifierai pas vos codes et je veux que vous le fassiez, vous pourrez donc également déboguer vos codes et trouver des problèmes et les résoudre.

Il y a un menu de débogage natif réactif intégré avec des applications natives réactives! pour votre situation sur Android ctrl(cmd) + M et sur IOS ctrl(cmd) + D ouvrira la fenêtre contextuelle ci-dessous

puis cliquez sur afficher l'inspecteur et dans le menu, choisissez touchable , vous verrez votre application ressembler à :

cliquez maintenant sur la partie où vous voulez vérifier le touchable et voyez où se trouve votre touchable ! Je suis sûr que vous comprendrez et ferez le reste