web-dev-qa-db-fra.com

Contrôlez la zone tactile en natif réactif

J'ai un bouton carré TouchableOpacity, dont les graphiques ne sont qu'une petite icône de point au milieu, et le reste est un fond transparent. Je trouve que dans de nombreux appareils Android Android, il est assez difficile d'appuyer dessus, car apparemment, seule la zone opaque est tactile, et le reste ne l'est pas.

Existe-t-il un moyen de contrôler la zone tactile d'un TouchableOpacity ou de ses autres frères et sœurs de type bouton?

reactjsreact-native
23
mllm

Vous pouvez utiliser le View#hitSlop property pour augmenter la zone tactile. Cela peut être utile dans les scénarios où vous savez que la zone tactile augmentée ne se chevauchera pas avec d'autres touches.

Une solution plus robuste consiste à utiliser la propriété de style padding. La zone tactile du Touchable* components inclut le remplissage de l'élément.

30
jevakallio

J'ajoute juste du code pour un référencement facile:

<View style={Styles.buttonStyle}>
    <TouchableOpacity onPress={onBtn1Pressed} hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}>
        <Text style={Styles.textStyle}>
           Button text
         </Text>
    </TouchableOpacity>
</View>

Où le conteneur de bouton parent a le style suivant. Étant donné que la largeur est de 150, j'ai donné à gauche et à droite 50 pour augmenter la zone cliquable.

 buttonStyle:{
    alignItems:'center',
    backgroundColor: '#F92660',
    width:150,
    height:50,
    marginTop:20,
    marginBottom:10,
    marginRight:15,
    padding:5,
  },
20
Nicks