代码之家 › 专栏 › 技术社区 › Vincent Decaux

RET本机-绝对位置不显示在视图顶部

react-native

1

Vincent Decaux · 技术社区 · 7 年前

我使用React Native 0.55,我想在a上显示一种图标,如下所示: http://b3.ms/qpknagGre9BR

现在,我用这个:

<View style={styles.cardContainer}>
    <Image source={iconPlayers} style={styles.iconTop} />
    <View style={styles.cardBox}>
        <View style={styles.container}>
            <Text style={styles.txtTitle}>
                My title
            </Text>
        </View>
    </View>
</View>

还有我的风格:

cardBox: {
    borderRadius: 20,
    backgroundColor: "#FFF",
    padding: 5,
    marginBottom: 10,
    borderColor: "#DDD",
    elevation: 4,
    paddingTop: 40,
},
cardContainer: {
    marginTop: 40,
},
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
txtTitle: {
    color: "#000",
    textAlign: "center",
    fontWeight: "bold",
},
iconTop: {
    width: 60,
    height: 60,
    zIndex: 999,
    position: "absolute",
    top: -30,
    elevation: 4,
    alignSelf: "center",
},

elevation: 4 论服装的风格 <Image /> 元素,我有一个警告 .

如果我移除 elevation: 4, 在我的风格中,图像显示在 名片盒 .

我如何在没有任何警告的情况下实现我想要的?谢谢

** 编辑 **

我用包装纸包装 <图像/> 在一个 <View /> ,我把 elevation 属性添加到包装器,并且它可以工作。

我想 高程 是针对android的boxShadow,但它会影响zIndex。

1 回复 | 直到 7 年前

1

0

Ravi Raj 7 年前

我正在零食博览会上试用你的代码,它使用最新的react原生版本(55.4)。将高程应用于图像属性时没有警告,它只是工作正常,图像也在卡的上方。如果您的react原生版本发出警告,只需将其包装在视图中,并对该视图应用高程。此外,请记住zIndex会受到视图高度的影响(仅限Android)。由于已将标高:4应用于卡盒,因此必须给出标高>=4.对于图像组件,否则将在卡盒下方绘制。

零食示例: https://snack.expo.io/B14UPA9Bm

也可以通过更改组件的顺序来避免Zindex,

// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
    <View style={styles.cardBox}>
        <View style={styles.container}>
            <Text style={styles.txtTitle}>
                My title
            </Text>
        </View>
    </View>
    <Image source={iconPlayers} style={styles.iconTop} />
</View>

cardBox: {
    borderRadius: 20,
    backgroundColor: "#FFF",
    padding: 5,
    marginBottom: 10,
    borderColor: "#DDD",
    elevation: 4,
    paddingTop: 40,
},
cardContainer: {
    marginTop: 40,
},
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
txtTitle: {
    color: "#000",
    textAlign: "center",
    fontWeight: "bold",
},
iconTop: {
    width: 60,
    height: 60,
    //zIndex: 999, not required now
    position: "absolute",
    top: -30,
    elevation: 4,
    alignSelf: "center",
},

检查并告知它是否在Android和iOS中工作。谢谢