zIndex 在安卓上不起作用答案

【问题标题】：zIndex is not working on androidzIndex 在安卓上不起作用
【发布时间】：2018-01-10 11:05:19
【问题描述】：

因为我想将此图标与其他两个视图重叠，如图所示。此代码适用于 IOS 平台，但不适用于 android。请建议是否有任何适用于 Android 的解决方案。

   var tabs = ['Activity', 'Files', 'People'];
   this.state = {
    tabs
  };
return (
  <Container style={{backgroundColor: '#F5F5F5'}}>
      <View style={styles.topStrip}>
          {
            this.state.tabs.map((tab, index) => (
              <View key={index} >
                <TouchableOpacity>
                  <Text style={styles.streamName}>{tab}</Text>
                </TouchableOpacity>
              </View>
            ))
          }
        <View style={{position: 'absolute', backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center', zIndex: 5, elevation: 24, marginTop: 15, marginLeft: 300}}>
          <EIcon size={40} color='#2196f3' name={'circle-with-plus'} />
         </View>
       </View>
     <View style={{zIndex: -1}}></View>
   </Container>
  );
 }
}
  const styles = StyleSheet.create({
   topStrip: {
    alignItems: 'center',
  },
 streamName: {
   marginTop: 7,
   marginBottom: 6,
   flexDirection: 'row',
   alignSelf: 'center'
  }
 }
});

【问题讨论】：

z-index 不是 zIndex
@hanslutterf。这是一个 React Native 应用程序，您必须使用 camelCase 而不是连字符来编写 CSS 属性

标签： android css react-native overlap

【解决方案1】：

<View
      style={{
        paddingLeft: ITEM_HEIGHT * 3,
        flex: 1,
        position: "absolute",
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        zIndex: -1
      }}
    >
      <Image
        style={styles.centerCircle}
        resizeMode="contain"
        source={Images.ballSmall}
      />
    </View>

在 android 中，要使用 zIndex，您需要具有位置属性的 css，其中包含 top、left、right、bottom css 测试平台：Zenfone 3、Android 7、React Native 0.55.4

【讨论】：

【解决方案2】：

这个问题不是由zIndex引起的（虽然它确实会在Android上引起问题）。

您的图标被放置在上层容器视图中。 Android 上的 React Native 不支持 overflow: visible。这就是为什么您会看到您的图标被剪裁在容器外的原因。

您可以将图标放在“页面”组件级别来解决此问题。

您也可以参考https://stackoverflow.com/a/50991892/6025730。

【讨论】：