web-dev-qa-db-fra.com

React native TouchableOpacity onPress ne fonctionne pas sur Android

TouchabelOpacity fonctionne bien sur iOS mais la méthode onPress ne fonctionne pas sur Android pour moi.

Ma version native de réaction: 0.57.4

Mon code:

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <Ionicons name="ios-menu" color="white" size={30} />
  </TouchableOpacity>
);
7
user3653164

J'ai eu le même problème, tous les boutons TouchableOpacity fonctionnaient bien dans la construction iOS, mais il y en avait un dans Android qui ne s'est pas déclenché. Je suis tombé sur cela réponse ici que a mentionné que position: absolute gâcherait le déclencheur. Cela a résolu mon problème.

1
Chris

Pour moi, j'utilisais NativeBase et j'avais la structure suivante, qui cassait sur Android:

<List>
    <TouchableOpacity>
       <ListItem>
          <Text>Button</Text>
       </ListItem>
    </TouchableOpacity>
</List>

Une fois que j'ai supprimé le ListItem et que je viens de faire du texte un enfant direct de TouchableOpacity, cela a fonctionné.

0
LukeVenter

envelopper l'icône dans une vue comme celle-ci.

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <View style={{padding:5}}>
        <Ionicons name="ios-menu" color="white" size={30} />
    </View>
  </TouchableOpacity>
);

puis si le problème persiste, stylisez l'icône avec backgroundColor et vous verrez qu'une moitié d'icône n'est pas stylisée avec backgroundColor, vous devez donc donner une plus grande quantité au rembourrage. Je ne sais pas, mais les icônes ont tendance à avoir des problèmes de volume, en particulier dans TouchableOpacity. C'est pourquoi je crée moi-même une vue parent avec un rembourrage pour les icônes. Quelque chose d'autre que d'autres ont également mentionné est la position: un accessoire "absolu" qui gâche le volume du composant.

0
Amir Gorji