web-dev-qa-db-fra.com

Comment utiliser z Index dans react-native

Je veux atteindre les objectifs suivants:

 enter image description here

Les images suivantes sont ce que je peux faire pour le moment, mais ce n’est PAS ce que je veux .  scenarioA  scenarioB

Exemple de code que j'ai maintenant:

renderA() {
    return (
        <View style={ position: 'absolute', zIndex: 0 }>    // parent of A
            <View style={ zIndex: 2 }>  // element A
            </View>
            <View style={ zIndex: 2 }>  // element A
            </View>
        </View>
    );
}

renderB() {
    return (
        <View style={ position: 'absolute', zIndex: 1 }>    // element B
        </View>
    );
}


render() {
    return (
        <View>
            {this.renderA()}
            {this.renderB()}
        </View>
    );
}

Pour le mettre en mots, je veux 

  • Parent A: être en dessous de tout.
  • Elément B: pour être au parent ci-dessus A mais en dessous de l'élément A.
  • Elément A: au dessus de tout.

Notez que Parent A et Element B doivent tous deux être absolument positionnés, et que les éléments A et B doivent être clickables ...!

javascriptreact-nativeflexbox
21
SudoPlz

J'ai finalement résolu ce problème en créant un deuxième objet qui imite B.

Mon schéma ressemble maintenant à ceci:

 enter image description here

J'ai maintenant B1 (dans le parent de A) et B2 en dehors de celui-ci.

B1 et B2 sont juste à côté l'un de l'autre, donc à l'œil nu, on dirait qu'il ne s'agit que d'un objet.

4
SudoPlz

Je pense qu'il y a différentes façons de procéder en fonction de ce dont vous avez exactement besoin, mais une solution serait de simplement insérer les deux éléments A et B dans le parent A.

    <View style={{ position: 'absolute' }}>    // parent of A
        <View style={{ zIndex: 1 }} />  // element A
        <View style={{ zIndex: 1 }} />  // element A
        <View style={{ zIndex: 0, position: 'absolute' }} />  // element B
    </View>
13
Matt Aft

UPDATE: supposément, zIndex a été ajouté à la bibliothèque react-native. J'ai essayé de le faire fonctionner sans succès. Vérifiez ici pour plus de détails sur le correctif.

1
Mike S.

Vous ne pouvez pas non plus obtenir la solution souhaitée avec z-index CSS, car z-index est uniquement relatif à l'élément parent. Donc, si vous avez les parents A et B avec les enfants respectifs a et b, l'indice z de b est uniquement relatif par rapport aux autres enfants de B et l'indice z de a est uniquement relatif aux autres enfants de A.

Les z-index de A et B sont relatifs l'un par rapport à l'autre s'ils partagent le même élément parent, mais tous les enfants de l'un partagent le même z-index relatif à ce niveau.

0
1pocketaces1