Comment utiliser zIndex dans react-native

J'ai envie d'atteindre les objectifs suivants:

Comment utiliser zIndex dans react-native

Les images ci-dessous sont ce que je peux faire maintenant, mais ce n'est PAS ce que je veux.
Comment utiliser zIndex dans react-nativeComment utiliser zIndex dans react-native

Exemple de code que j'ai droit:

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>
    );
}

Mettre en mots, je veux

  • Parent: à être en dessous de tout.
  • Élément B: être au-dessus de tout parent d'Un, mais au-dessous de l'élément de A.
  • Élément A: au-dessus de tout.

Noter que Parent d'Un et Élément B les deux doivent être absolument positionné, et les deux éléments A et des éléments de B doivent être cliquable...!

source d'informationauteur SudoPlz