Reagisci icona tangibile nativa
Voglio implementare un'icona del menu da MaterialIcon nella mia intestazione e quando tocco questa icona voglio aprire un menu. Il problema è che se aggiungo margine o qualcos'altro a questa icona per posizionare l'icona, Touchable onPress non funziona correttamente. Per prima cosa avevo il posizionamento assoluto con zIndex e onPress non veniva attivato ogni volta. Diciamo che toccando 100 volte onPress è stato attivato per 3 volte. Ho capito lo stesso comportamento con posizionamento e margine relativi. Ho anche provato a implementare Touchables da react-native-gesture o da react-native. Nel momento in cui rimuovo il margine, Touchable funziona correttamente. OnPress viene attivato ogni volta che premo questa icona. Molto curioso. Cosa c'è che non va? Qualcuno conosce questo problema?
Questo è il mio codice:
<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,
},
Risposte
Amir ha alcune buone informazioni di debug lì, e vale la pena conoscerle e usarle in futuro. Detto questo, solo perché puoi vedere dove sono le tue posizioni toccabili non significa che capirai cosa c'è che non va.
Personalmente non "so" cosa c'è che non va, ma la mia ipotesi è che aggiungendo un margine, stai spostando la tua icona fuori dal contenitore toccabile. Consiglierei di aggiungere i tuoi stili di posizionamento al TouchableOpacity
posto della tua icona. Questo dovrebbe spostare l'intero pulsante sopra, anziché solo il suo contenuto poiché è possibile spostare il contenuto all'esterno di un contenitore padre.
cara non modificherò i tuoi codici e voglio che tu lo faccia, quindi sarai anche in grado di eseguire il debug dei tuoi codici e trovare problemi e risolverli.
C'è un menu di debug nativo di reazione incorporato con le app native di reazione! per la tua situazione su Android ctrl(cmd) + M e su IOS ctrl(cmd) + D si aprirà il popup sottostante

quindi fai clic su mostra ispettore e dal menu scegli toccabile , quindi vedrai questa tua app simile a:

ora fai clic sulla parte in cui vuoi controllare il touchable e vedi dove si trova il tuo touchable! Sono sicuro che capirai e farai il resto