无法使用react-native在具有绝对位置的Android上渲染视图 [英] Cannot render View with position absolute on Android with react-native

问题描述

我花了很多时间试图弄清楚为什么在Android上我不能在父视图中完全渲染带有图像的视图.

I'm loosing hours trying to figure out why on Android i cannot render a View with an Image absolutely, in a parent View.

这是我要渲染的卡，可以在iOS上正确显示.
我突出显示了要使用 position渲染的两个元素:"absolute" ，左上角的"GIFT CARD"横幅和父级中心的一行点.

Here is the card I like to render, that is correctly displayed on iOS.
I've highlighted the two elements I want to render with position: 'absolute', a "GIFT CARD" banner on the top left corner and a line of dots in the center of the parent.

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

On Android those two elements are redered behind the white card as you can see here (I've increased the border-radius to show it better):

以下是视图的代码:

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;

推荐答案

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

zIndex only works on IOS, for Android you need to set elevation

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

这篇关于无法使用react-native在具有绝对位置的Android上渲染视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！