Question

我想将此图标与其他两个视图重叠，如图所示。这段代码在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'
  }
 }
});

enter image description here

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

Answer 2

此问题不是由zIndex引起的（尽管它确实在Android上引起了问题）。

您的图标位于上部容器视图内。 Android上的React Native不支持overflow: visible。这就是为什么您看到图标被裁剪到容器外部的原因。

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

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

zIndex不适用于android

2 个答案: