web-dev-qa-db-fra.com

React Native - TouchableOpacity ne fonctionne pas à l'intérieur d'une vue positionnée absolue

J'ai une vue positionnée absolue qui contient 3 composants TouchableOpacity et les 3 ne répondent pas, ils ne fonctionnent tout simplement pas du tout, ce qui ne va pas ici, aidez-moi :)

Code 

<View style={[styles.highNormalLowDocListHeaderStateContainer, {width: this.windowWidth, height: this.headerSmallHeight, position: 'absolute', left: 0, top: floatedHeaderTitleTop, elevation: 2}]}>
    <TouchableOpacity onPress={() => this.getDocuments('high')} style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}>HIGH</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('normal')} style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('low')} style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}>
        <Text style {[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text>
    </TouchableOpacity>
</View>

Capture d'écran

enter image description here

androidreact-native
18
Ibrahim Ahmed

Regardez votre importation. Si vous importez {TouchableOpacity} à partir de 'react-native-gesture-handler'; ne fonctionne pas. Vous devez l'importer depuis 'react-native'

26
Thiago Leite

Même si la barre d'onglets semble visuellement être au-dessus du contenu de la liste, les événements tactiles de la liste peuvent la recevoir avant la barre d'onglets. Ajoutez un zIndex à la barre d'onglets pour lui permettre de recevoir les événements tactiles en premier.

12
mienaikoe

Mec allez simplement ajouter zIndex: 1 à la vue contenant les boutons et le boom que vous avez terminé dans la plupart des cas. Notez également que l'ajout d'élévation ajoute une ombre à Android et parfois l'élévation peut également être un problème s'il est ajouté au parent et non ajouté à l'enfant, le bouton enfant peut ne pas fonctionner. (Cas rare)

par exemple:

buttonContainers:
  {
    zIndex: 1,
    alignSelf: 'flex-end',
    position: 'absolute',
    top:5,
    right: 5,
    height: 40,
    borderWidth: 1,
    justifyContent: 'center',
    alignContent: 'center',
    width: 80
  },
10
Rishav Kumar

Souvent, lorsque vous effectuez un positionnement absolu, vous devez mettre un zIndex car la vue d'interface utilisateur absolue reportée est parfois rendue derrière une autre vue

1
Walter Shub

Si onPress of TouchableOpacity ne fonctionne pas, dans ce cas, TouchableNativeFeedback fonctionnera

Exemple:

{ Platform.OS === 'ios' ?
  <TouchableOpacity onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>  
  </TouchableOpacity>
  :
  <TouchableNativeFeedback onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>
  </TouchableNativeFeedback>
}
1
Apurva Aggarwal

Votre élément absolu est probablement placé dans un élément relatif. Si vous souhaitez cliquer dessus, vous devez supprimer la règle relative parent.

0
Serdar Değirmenci