android - zIndex 不适用于 android

Question

因为我想将此图标与其他两个 View 重叠，如图所示。此代码适用于 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'
  }
 }
});

Answer 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 以及顶部、左、右、底部 css 测试于:Zenfone 3、Android 7、React Native 0.55.4