web-dev-qa-db-ja.com

反応ネイティブでzインデックスを使用する方法

私は次を達成したいと思います：

enter image description here

次の画像は私が今できることですが、それは私が望むものではありません。 scenarioA（scenarioB

私が今持っているコードのサンプル：

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は両方ともabsolutely配置され、要素Aと要素Bの両方がclickableでなければなりません... ！

javascriptreact-nativeflexbox
31
SudoPlz

最後に、Bを模倣する2番目のオブジェクトを作成することでこれを解決しました。

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

enter image description here

現在、B1（Aの親内）とB2がその外側にあります。

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

4
SudoPlz

正確に必要なものに基づいてこれを行うにはさまざまな方法があると思いますが、1つの方法は、要素AとBの両方を親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>
22
Matt Aft

更新：おそらく、zIndexがreact-nativeライブラリに追加されました。私は成功せずに機能するように努めてきました。修正の詳細については、 here を確認してください。

1
Mike S.

Z-indexは親要素にのみ関連するため、CSS z-indexでも目的のソリューションを実現することはできません。したがって、それぞれの子aとbを持つ親AとBがある場合、bのz-indexはBの他の子にのみ関連し、aのz-indexはAの他の子にのみ関連します。

AとBのz-indexは、同じ親要素を共有している場合は互いに相対的ですが、一方の子すべてがこのレベルで同じ相対z-indexを共有します。

0
1pocketaces1