[解決済み] react-nativeでzIndexを使用する方法

質問

次のようなことを実現したい。

以下の画像は、私が今できることですが、これは私が欲しいものではありません。

今あるコードのサンプルです。

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

言い換えれば、私が欲しいのは

• 親Aさん。 を全て下にする。
• 要素B。 を親Aより上、要素Aより下にする。
• 要素A。 すべての上に

注意事項 親A と 要素B は両方とも 絶対に が配置され、要素 A と要素 B の両方が クリッカブル ...!

解決方法は？

Bを模倣した2つ目のオブジェクトを作ることでようやく解決しました。

私のスキーマは次のようになりました。

今、私はB1（Aの親内）とB2（その外側）を持っています。

B1とB2は隣り合っているので、肉眼ではあたかも1つのオブジェクトのように見えます。