反应原生的z-index问题

时间:2016-01-13 10:37:30

标签: reactjs react-native

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

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

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

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

enter image description here

4 个答案:

答案 0 :(得分:3)

iOS的反应原生版 0.29.0 支持

zIndex属性。

答案 1 :(得分: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>

答案 2 :(得分:1)

我遇到了类似的问题,这是因为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风格。

答案 3 :(得分:0)

根据我的经验,

zIndexposition可以工作,没有其中一个将不能工作。