代码之家 › 专栏 › 技术社区 › Return-1

在React Native中覆盖视图

react-native

0

Return-1 · 技术社区 · 7 年前

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

overflow 默认为 hidden 在安卓系统上,因为zIndex没有那么好用。
zIndex 虽然效果很好,但观点需要有正确的顺序,才能正常地吸引其他人

我现在能想到的唯一一种方法就是使用 onLayout 手动计算下拉列表需要显示的位置,然后在绝对位置的顶层渲染。我担心这可能看起来很混杂,但还没有尝试过。

还有其他想法吗?

2 回复 | 直到 7 年前

1

Robbie Milejczak Diego Felipe 7 年前

当然可以使用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

2

0

Sebastijan DumanÄiÄ 7 年前

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

无论哪种方式,你都可以定位它绝对是的。我做过类似的事情,但如果列表变长,需要滚动,可能会出现一些小故障。此外,您还必须实现正确的关闭(单击外部,并在主元素上,选择选项后关闭,等等)。