Question

我使用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 />，我有一个警告。 / p>

如果我删除样式中的elevation: 4,，则图像显示在 cardBox 的后面。

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

** 编辑 **

我将<Image />包装在<View />中，然后将elevation属性放到包装器中，并且可以使用。

我认为elevation是用于Android的boxShadow，但它会影响zIndex。

Answer 1

我正在小吃博览会上尝试使用您的代码，该博览会使用最新的本机版本（55.4）。将高程应用于“图像”属性没有任何警告，它只能正常工作并且图像也位于卡的上方。如果您的本机版本发出警告，则将其包装在视图中并将高程应用于该视图。另外，请记住zIndex受视图高程的影响（仅适用于Android）。由于已对卡盒应用了高程：4，因此必须为图像组件设置高程> = 4，否则它将绘制在卡盒下方。

小吃示例：https://snack.expo.io/B14UPA9Bm

您还可以通过更改组件的顺序来避免使用Zindex，

$(document).ready(function() {
  $(".myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

检查并确定它是否适用于Android和iOS。谢谢

Reat Native-绝对位置不显示在视图顶部

1 个答案: