Ícono táctil nativo de React

Aug 21 2020

Quiero implementar un ícono de menú de MaterialIcon en mi encabezado y cuando toco este ícono, quiero abrir un menú. El problema es que, si agrego un margen o algo más a este ícono para colocarlo, Touchable onPress no funciona correctamente. Primero tenía Posicionamiento absoluto con zIndex y onPress no se activaba cada vez. Digamos que al tocar 100 veces, onPress se activó 3 veces. He descubierto el mismo comportamiento con el posicionamiento relativo y el margen. También traté de implementar Touchables desde react-native-gestures o desde react-native. En el momento que elimino margen el Touchable funciona correctamente. El onPress get se activa cada vez que presiono este icono. Muy curioso. ¿Qué ocurre? ¿Alguien sabe este problema?

Este es mi 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,
  },

Respuestas

2 DougWatkins Aug 21 2020 at 00:08

Amir tiene buena información de depuración allí, y vale la pena conocerla y usarla en el futuro. Dicho esto, el hecho de que pueda ver dónde están sus ubicaciones táctiles no significa que comprenderá qué está mal.

Personalmente, no 'sé' qué está mal, pero supongo que al agregar un margen, está moviendo su ícono fuera del contenedor táctil. Recomendaría agregar sus estilos de posicionamiento en TouchableOpacitylugar de su icono. Esto debería mover todo el botón, en lugar de solo su contenido, ya que es posible mover el contenido fuera de un contenedor principal.

2 AmirDoreh Aug 21 2020 at 00:04

Estimado, no editaré sus códigos y quiero que lo haga usted mismo, por lo que también podrá depurar sus códigos y encontrar problemas y resolverlos.

¡Hay un menú de depuración nativo de reacción integrado con aplicaciones nativas de reacción! para su situación en Android ctrl(cmd) + M y en IOS ctrl(cmd) + D se abrirá la siguiente ventana emergente

luego haga clic en mostrar inspector y desde el menú, elija táctil , luego verá que su aplicación se ve así:

¡Ahora haga clic en la parte en la que desea verificar el toque y vea dónde se encuentra su toque! Estoy seguro de que lo entenderás y harás el resto.