zIndex如何在react-native中工作?

时间:2017-11-28 21:06:31

标签: react-native z-index

此代码在iOS和Android上的工作方式不同 - 我不明白为什么? 我尝试进行自动完成,并在标题组件内部显示建议列表 - 但应该超过标题+内容

<View style={{flex: 1}}>
  <View style={{
      height: 50,
      backgroundColor: 'red',
      left: 0,
      position: 'absolute',
      right: 0,
      top: 0,
      zIndex: 1
  }}>
    <Text>Header</Text>
    <View style={{
        backgroundColor: '#3F9',
        left: 50,
        position: 'absolute',
        height: 100,
        right: 50,
        top: 25,
        zIndex: 1
    }}><Text>Should overlay Content</Text></View>
  </View>
  <View style={{flex: 1, backgroundColor: 'yellow'}} >
    <Text>Content</Text>
  </View>

2 个答案:

答案 0 :(得分:1)

最好远离&#34; zIndex&#34;因为它在Android中无法按预期工作。而是使用元素的顺序和位置:&#39;绝对&#39; 。它会正常工作。

参考 - How to overlap in react-native

答案 1 :(得分:0)

我想我发现了会发生什么。

正如我在Facebook上看到的文档

  

溢出样式属性默认为隐藏,无法在Android上更改