为什么Android上的阴影被其他组件覆盖？

Question

我在Android中设置阴影时遇到问题。 当在阴影元素之后恰好添加元素时，阴影将被它们覆盖。我在iOS中没有这个问题。 我将发布一些代码和屏幕截图以说明这种情况。

这是在iOS上的外观：

这是在Android上的外观：

这是我在“屏幕”组件中的渲染功能：

     render() {
    const ticket = this.props.navigation.getParam("ticket", {});

    return (
      <Fragment>
        <SafeAreaView style={{ flex: 0 }} />
        <SafeAreaView style={{ flex: 1 }}>
          <View style={{ flex: 0.6 }}>
            <TopSmallCroppedComponent />
          </View>
          <ScrollView style={styles.overlayComponent}>
            <Text style={baseStyles.screenTitle}>
              {strings.YouSetPaymentPickUp}
            </Text>

            <TicketCardComponent ticket={ticket} />
          </ScrollView>

          <View
            style={[
              baseStyles.bottom,
              {
                flex: 0.4,
                marginLeft: 35,
                marginRight: 35,
                bottom: 10
              }
            ]}
          >
            <Text style={styles.notAtHomeText}>{strings.NotBeAtHome}</Text>
            <ButtonGreenComponent
              text={strings.PayOnlineButton}
              pressed={() => this._onPressPayOnlineButton(ticket)}
            />
          </View>
          <LoadingView
            size="large"
            spinnerColor={theme.WHITE_COLOR}
            backgroundColor="#0000005f"
            visible={this.state.modalVisible}
          />
        </SafeAreaView>
      </Fragment>
    );
  }

屏幕组件样式：

    export default StyleSheet.create({
  overlayComponent: {
    position: "absolute",
    top: 0,
    bottom: 0,
    width: "100%",
    height: "100%",
    alignSelf: "center"
  },
  notAtHomeText: {
    alignSelf: "center",
    fontFamily: theme.FONT_REGULAR,
    color: theme.LABEL_COLOR,
    fontSize: theme.FONT_SIZE_LARGE,
    marginBottom: 10
  }
});

TicketCardComponent：

      render() {
    const { ticket } = this.props;

    return (
      <View style={[styles.cardBox, baseStyle.shadow]}>
        <View
          style={[styles.cardBoxEventOverlayIcon, baseStyle.shadow]}
          elevation={5}
        >
          <Image
            source={this.cardImages.eventIcon}
            style={{ height: 30, width: 30, alignSelf: "center" }}
          />
        </View>
        <View style={[styles.cardBoxUserTicket]}>
          <Text style={styles.cardBoxTicketUserLabel}>
            {strings.YourPaymentCollector}
          </Text>
          <View style={styles.cardBoxUserInfoWrapper}>
            <Image
              source={this.cardImages.userIcon}
              style={styles.cardUserIcon}
            />
            <View style={styles.cardUserInfoTextsWrapper}>
              <Text style={styles.userNameText}>
                {this._renderTicketAssignee(ticket)}
              </Text>
              <Text style={styles.ticketCreationTimeText}>
                {this._renderRelativeDate(ticket.creationDate)}
              </Text>
            </View>
          </View>
        </View>
      </View>
    );
  }

TicketCardComponent样式：

    export default StyleSheet.create({
  cardBox: {
    backgroundColor: theme.WHITE_COLOR,
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,
    borderBottomRightRadius: 6,
    borderBottomLeftRadius: 6,
    paddingLeft: 22,
    paddingRight: 22,
    paddingTop: 35,
    marginLeft: 35,
    marginRight: 35
  },
  cardBoxEventOverlayIcon: {
    width: 56,
    height: 56,
    position: "absolute",
    backgroundColor: "white",
    top: -(56 / 2),
    left: 56 / 2,
    justifyContent: "center",
    borderRadius: 56 / 2
  },
  cardHeading: {
    fontSize: theme.FONT_SIZE_LARGER,
    fontFamily: theme.FONT_MEDIUM
  },
  cardBoxUserTicket: {
    paddingTop: 10,
    paddingBottom: 20
  },
  cardBoxTicketUserLabel: {
    fontFamily: theme.FONT_MEDIUM,
    color: theme.LABEL_COLOR,
    fontSize: theme.FONT_SIZE_MEDIUM_LARGE
  },
  cardBoxUserInfoWrapper: {
    flexWrap: "wrap",
    alignItems: "flex-start",
    flexDirection: "row",
    height: 50,
    marginTop: 15,
    marginBottom: 15
  },
  cardUserIcon: {
    width: 50,
    height: 50,
    flexDirection: "column"
  },
  cardUserInfoTextsWrapper: {
    height: 50,
    flexDirection: "column",
    marginLeft: 10,
    justifyContent: "space-between",
    paddingTop: 4,
    paddingBottom: 4
  },
  userNameText: {
    fontFamily: theme.FONT_BLACK,
    color: theme.LABEL_COLOR,
    fontSize: theme.FONT_SIZE_LARGE
  },
  ticketCreationTimeText: {
    fontFamily: theme.FONT_MEDIUM,
    color: theme.LABEL_COLOR,
    fontSize: theme.FONT_SIZE_SMALL
  }
});