react-native 中的 z-index 问题

Question

如何将绝对定位的元素/组件置于之后呈现的其他组件之上。 我正在使用scrollview组件

style:
        width: 300,
        height: 100,
        position:'absolute',
        top:30,

但其他组件与滚动下拉菜单重叠。 我将顶部更改为底部，但滚动视图顶部的scrollview没有重叠。

由于我是这个 react-native 的新手并且不知道reactjs我无法找出解决方案和术语来表达我的问题请帮忙。 我在下图中附上了我的问题的屏幕截图我在scrollview组件中有一个社会下拉列表，区域是另一个可见并与第一个组件重叠的滚动视图

Answer 1

从 react-native 版本0.29.0 开始支持zIndex属性。 检查文档。

zIndex 控制哪些组件显示在其他组件之上。 通常，您不使用 zIndex。 组件根据它们在文档树中的顺序呈现，因此后面的组件会覆盖前面的组件。 如果您有动画或不希望出现这种行为的自定义模态界面，zIndex 可能会有用。

它的工作方式类似于 CSS z-index 属性 - 具有较大 zIndex 的组件将呈现在顶部。 将 z 方向想象成从手机指向您的眼球。 有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/z-index 。

在 iOS 上，zIndex 可能需要 Views 是彼此的兄弟姐妹才能按预期工作。

Answer 2

编辑：React Native 现在支持z-index属性！ https://facebook.github.io/react-native/docs/layout-props.html

== 旧答案 ==

React Native 没有z-index属性。 z 索引由组件的顺序决定。 例如：

<View>
    <Image />
    <Text />
</View>

<Text>将始终位于<Image>之上。

Answer 3

我有一个类似的问题，这是因为 zIndex 没有应用于正确的组件。 例如，如果您有以下内容：

class App extends Component {
    render () {
        return (
           <View style={styles.form}>
               <View style={styles.selectInput}>
                   <TextInput placeholder="Select something" />
                   <Dropdown />
               </View>
               <View style={styles.formInput}>
                   <TextInput placeholder="Stuff" />
               </View>
               <View style={styles.formInput}>
                   <TextInput placeholder="Other stuff" />
               </View>
           </View>
        );
    }
}

并且您希望您的Dropdown组件位于下面的 2 个表单输入之上，您需要将zIndex: 100添加到其 container ，即具有selectInput样式的 View 。

Answer 4

在单独的视图中添加两个下拉菜单，并将 zindex:1 指定给第一个视图，将 zIndex:-1 指定给第二个下拉菜单视图。 它对我有用！

Answer 5

根据我的经验，带position的zIndex将起作用，没有其中之一将不起作用。