android - 无法使用 react-native 在 Android 上呈现具有绝对位置的 View

Question

我浪费了很多时间试图弄清楚为什么在 Android 上我无法在父 View 中绝对渲染带有图像的 View 。

这是我喜欢渲染的卡片，它在 iOS 上正确显示。
我用 position: 'absolute' 突出显示了我要渲染的两个元素，左上角有一个“GIFT CARD”横幅，父元素中心有一行点。

在 Android 上，这两个元素被重新显示在白卡后面，您可以在此处看到(我增加了 border-radius 以更好地显示它):

这是 View 的代码:

import React from 'react';
import {
  TouchableWithoutFeedback,
  ImageBackground,
  View,
  Image,
  Text,
} from 'react-native';
import PropTypes from 'prop-types';
import { Colors, Metrics, Images, Fonts } from '../../Themes';

const VoucherCard = ({
  active,
  logo,
  onPress,
  value,
  credits,
  style,
  redeemed
}) => {
  let logoUrl = { uri: logo };

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={[styles.container, style]}>
        <View style={styles.logoContainer}>
          <View
            style={{ flex: 1, borderRadius: 50, backgroundColor: Colors.transparent }}>
            <Image
              source={logoUrl}
              style={{ flex: 1, height: 80 }}
              imageStyle={{ borderRadius: 50 }}
              resizeMode={'contain'}
              defaultSource={Images.voucherPlaceholder}
            />
          </View>
        </View>
        <View style={{ ...styles.infoContainer, backgroundColor: Colors.white, }}>
          <View style={{ flex: 1, backgroundColor: redeemed ? Colors.backgroundSecondary : Colors.white, borderRadius: 5, justifyContent: 'center', }}>
            <Text style={{...Fonts.style.subTitle, textAlign: 'center', fontSize: 25, height: 30, color: redeemed ? Colors.grey : Colors.text}}>{`${credits}`}</Text>
            <Text style={{...Fonts.style.section, textAlign: 'center', color: redeemed ? Colors.grey : Colors.text}}>{`CREDITS`}</Text>
            <Text style={{...Fonts.style.miniText, textAlign: 'center', color: redeemed ? Colors.grey : Colors.text  }}>{`value ${value} €`}</Text>
          </View>
        </View>
        <View style={styles.dotsContainer}>
          <Image resizeMode='stretch' style={styles.dots} source={ Images.dots} />
        </View>
        <View style={{  position: 'absolute', top: 0, left: 0, zIndex: 100, }}>
          <Image
            source={Images.giftCardBanner}
            style={{ borderColor: 'blue', borderWidth: 2, }}
            />
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = {
  container: {
    flexDirection: 'row',
    height: 90,
    flex: 1,
  },
  logoContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: Colors.white,
    borderRadius: 50,
    elevation: 3,
    shadowColor: "grey",
    shadowOpacity: 0.2,
    shadowRadius: 2,
    shadowOffset: { height: 4, width: -2 },
    backgroundColor: Colors.white,
  },
  dotsContainer: {
    borderColor: 'red',
    borderWidth: 2,
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dots: {
    height: 90,
    width: 3,
  },
  infoContainer: {
    flex: 1,
    backgroundColor: Colors.white,
    borderRadius: 5,
    elevation: 3,
    shadowColor: "grey",
    shadowOpacity: 0.2,
    shadowRadius: 2,
    shadowOffset: { height: 4, width: 2 },
  },
}

export default VoucherCard;

Answer 1

zIndex仅适用于 IOS，对于 Android，您需要设置 elevation

<View style={{  position: 'absolute', top: 0, left: 0, zIndex: 100, elevation: 100 }}>
   <Image
      source={Images.giftCardBanner}
      style={{ borderColor: 'blue', borderWidth: 2, }}
    />
</View>