React native 在React Native中覆盖视图

我试图做一个类似下图的下拉列表，我想知道这样的事情是否可能。这是因为：

• overflow

  在android上默认为

  hidden

  ，这是因为zIndex不太好用

• zIndex

  如果不能很好地工作，视图的顺序必须正确，才能正常地绘制其他视图

我现在能想到的唯一一种方法是使用类似于

onLayout

的方法，手动计算下拉列表需要显示的位置，然后在绝对位置的顶层进行渲染。我担心这可能看起来相当混杂，但还没有尝试过

其他想法

---

为什么不使用本机下拉列表，它可以正确渲染并在所有平台上正常工作

---

无论哪种方式，你都可以定位它绝对是的。我已经做了类似的事情，它的工作，但你可以有一些小故障，如果列表变得更长，它需要滚动。此外，您还必须实现正确的关闭（单击外部，在主元素上，选择选项后关闭，等等）

您完全可以使用zIndex来实现此行为，但zIndex必须应用于相邻视图才能跨平台工作：

render(){
  return (
    <View style={{ flex: 1, alignItems: 'flex-start' }}>
      <View style={{ zIndex: 2 }}>
        <YourDropdownButton />
      </View>
      <View style={{ zIndex: 1 }}>
        <YourNormalButton />
      </View>
    </View>
  )
}

render（）{
返回(
)
}

---

我不确定在React native的上下文中，本机下拉列表是什么。如果你说的是

选择器

，它有很多限制。另外一件事是，在我的用例中，元素之间发生了重叠，这不仅仅是一个虚无的下拉列表。如果事情没有按照非常特定的顺序呈现，RN中的zIndex就不能很好地工作。我已经成功地用一个单一的覆盖，比如一个对话+滚动，包括你提到的点击外部等，但是我在这里描述的场景非常不同，因为我在描述中添加了两个项目。你试过了吗？我想你可以检查以下实现不幸的是，就是这样，在这种情况下，视图不是相邻的，因为PickerItem元素嵌套在父元素中。如果你所说的邻接是指兄弟姐妹在同一个父代中，而不仅仅是在同一个深度层次上