Stacking Order：親の兄弟の上に表示されるようにコンポーネントをレンダリングする方法

Question

zIndexに問題があり、ドロップダウンリスト（反応ネイティブメニュー）をスタイリングしています。このシーンの他のすべてのコンポーネントの上にドロップダウンリストが表示されるようにしたいと思います。私はzIndexと位置を使用しようとしていますが、正しく実行していない可能性がありますか？

私のコードでは、Card>CardSection>それぞれのさまざまなサブコンポーネントが階層化されています。ドロップダウンリストは、コンポーネントMenuContext（config）とTopNavigation（メインドロップダウンリスト）で構成されています。

return (
<Card> 
    <CardSection style={{zIndex: 2}}> 
    <View style={thumbnailContainerStyle}> 
     <Image style={thumbnailStyle} 
     source={{ uri: "" }} 
     /> 
    </View> 
    <View style={headerContentStyle}> 
     <Text style={headerTextStyle}>Tam</Text> 
     <Text>tam@tam</Text> 
    </View> 
    <MenuContext style={{ flex:1, zIndex:6, position:'absolute', flexDirection: 'column', alignItems: 'flex-end' }} > 
     <TopNavigation/> //this is 
    </MenuContext> 
    </CardSection> 
    <CardSection style={{zIndex: 1}}> 
    <Text style={{zIndex: 2}}>{props.post.body}</Text> 
    </CardSection> 
</Card> 
) 

したがって、ドロップダウンは最初のCardSectionの子です。私はそれがそれ自身の親の上に現れるようにしましたCardSectionしかし、私はそれがレンダリングする2番目のCardSectionの上に現れるようにすることはできません。だから私は親の兄弟の上にそれを表示することはできません。

私はいくつかのプラグインまたは回避策を使用することを躊躇しています。

アイデア？ありがとう!!

Answer 1

それで、z軸上のものの上にポップアップメニューを表示するのが難しくなったのは、その親の兄弟でした。だから、私が必要とした結果を得るのを助けたのは、このコンポーネントとその親の中で、より多くのマクロを見て、コンポーネント階層内のより高い部分に移動することでした。

アプリとのようなコメントにエントリポイントでContextMenuを持っていた私は、私が使用したオリジナルのパッケージのドキュメントので、これを推論している必要があります。私のミスがzIndexのミクロの世界で迷子になった

// You need to place a MenuContext somewhere in your application,usually at the root. 
    // Menus will open within the context, and only one menu can open at a time per context. 

スタイリングの問題のように見えるものがスタイリングの解決策で解決されるはずであると仮定します。私は大きな絵を忘れていた。