Ícone tocável do React Native

Question

Quero implementar um ícone de menu de MaterialIcon em meu cabeçalho e, quando toco nesse ícone, quero abrir um menu. O problema é que, se eu adicionar margem ou qualquer outra coisa a este ícone para posicionar o ícone, o Touchable onPress não funcionará corretamente. Primeiro, tive posicionamento absoluto com zIndex e o onPress não foi acionado todas as vezes. Digamos que ao tocar 100 vezes o onPress foi acionado 3 vezes. Eu descobri o mesmo comportamento com posicionamento relativo e margem. Eu também tentei implementar Touchables de gestos react-native ou react-native. No momento em que removo a margem, o Touchable funciona corretamente. O onPress é acionado toda vez que pressiono este ícone. Muito curioso. O que há de errado? Alguém conhece esta questão?

Este é o meu código:

<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 tem algumas boas informações de depuração lá, e vale a pena conhecer e usar no futuro. Dito isto, só porque você pode ver onde estão seus locais tocáveis, não significa que você entenderá o que está errado.

Pessoalmente, não 'sei' o que está errado, mas meu palpite é que, ao adicionar uma margem, você está movendo seu ícone para fora do contêiner tocável. Eu recomendaria adicionar seus estilos de posicionamento ao TouchableOpacityinvés de seu ícone. Isso deve mover todo o botão, em vez de apenas seu conteúdo, pois é possível mover o conteúdo para fora de um contêiner pai.

Answer 2

querido, não vou editar seus códigos e quero que você faça isso, então você também poderá depurar seus códigos, encontrar problemas e resolvê-los.

Há um menu de depuração nativo de reação incorporado com aplicativos nativos de reação! para sua situação no Android ctrl(cmd) + M e no IOS ctrl(cmd) + D abrirá o pop-up abaixo

em seguida, clique em mostrar inspetor e, no menu, escolha palpável , então você verá que seu aplicativo se parece com:

agora clique na parte que deseja verificar o touchable e veja onde está localizado o seu touchable! Tenho certeza que você vai entender e fazer o resto