Question

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

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

但其他组件与滚动下拉列表重叠。我将top更改为Bottom，但scrollview顶部的组件没有重叠。

由于我是新手，反应原生且不知道reactjs我无法找出解决方案和条款来表达我的问题，请帮忙。我在下面的图像中附加了我的问题的屏幕截图我在scrollview组件中有社会下拉列表，区域是另一个可见并与第一个组件重叠的滚动视图

Answer 1

iOS的反应原生版 0.29.0 支持

zIndex属性。

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添加到其容器，视图带selectInput风格。

Answer 4

根据我的经验，

zIndex和position可以工作，没有其中一个将不能工作。

反应原生的z-index问题

4 个答案: