react-native - 堆叠顺序 : How to render component so it appears on top of parents' sibling who renders afterwards

Question

在为下拉列表(react-native-menu)设置样式时，我在 zIndex 和 position 方面遇到了一些问题。我想让下拉列表在单击时显示在此场景中所有其他组件的顶部。我正在尝试使用 zIndex 和 position 但可能没有正确使用？

在我的代码(如下)中，我渲染了一个层次结构，其中 Card > CardSection > 每个的各种子组件。下拉列表包含组件 MenuContext (配置)和 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 的子项.我已经让它出现在它自己的 parent 身上 CardSection但我无法让它出现在第二个 CardSection 之上之后呈现。所以我无法让它显示在它 parent 的 sibling 之上。

我不愿意使用一些插件或解决方法。

有任何想法吗？谢谢!!

Answer 1

因此，在 z 轴上的事物上方呈现弹出菜单如此困难的原因是它的父级的兄弟。所以帮助我得到我需要的结果的是看起来更宏观和更动人<ContextMenu/>在组件层次结构中更高，完全离开这个组件并进入它的父级。

我应该推断出这一点，因为我使用的原始软件包的文档有 ContextMenu在应用程序的入口点和评论中，例如:

 // 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. 

我的错误是迷失在 zIndex的微世界里和 position并假设应该使用样式解决方案解决看起来像样式问题的问题。我忘记了更大的图景。