在React Native中叠加视图

Question

我正在尝试制作一个类似于下图的下拉菜单，我想知道是否有可能这样做。那是因为：

• overflow在android上默认为hidden，因为zIndex不能很好地工作。
• zIndex确实工作得很好，视图必须以正确的顺序排列才能正常覆盖其他视图

我现在想到的唯一可行的方案是使用onLayout之类的东西，并手动计算下拉菜单需要显示的位置，然后将其显示在顶层绝对定位。我担心这看起来可能有点混杂，但还没有尝试过。

其他想法？

Answer 1

您为什么不使用本机下拉菜单，它可以正确呈现并在所有平台上正常工作？

无论哪种方式，您始终可以将其定位为绝对是。我已经做了类似的事情并且可以工作，但是如果列表变长并且需要滚动，则可能会出现一些故障。同样，您将必须实施适当的关闭（在外部单击主元素，然后在选择选项后关闭，等等）。

Answer 2

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

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

Here is a snack showcasing this with my own custom drop down