时间戳

首页 > 解决方案 > 阴影不会出现在本机反应中

reactjs - 阴影不会出现在本机反应中

问题描述

我想给我的卡片组件添加一个阴影，但它既没有出现 ios 也没有出现 android，这是什么问题？

function Card(props) {
  return (
    <View style={styles.box}>
      <View style={styles.inner}>{props.children}</View> {// Takes an image}
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: "50%",
    height: "50%",
    padding: 15,
shadowColor: "#000", {// the shadow styles for android and ios}
shadowOffset: {
    width: 0,
    height: 6,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,

elevation: 12,
  },
  inner: {
    flex: 1,
    backgroundColor: "#eee",
    alignItems: "center",
    justifyContent: "center",
  },
});

注意：它需要一张图片，图片覆盖了我的整个卡片组件

另外这里是父组件样式：

 container: {
    width: "100%",
    height: "85%",
    padding: 10,
    flexDirection: "row",
    flexWrap: "wrap",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  imageStyle: {
    resizeMode: "stretch",
    width: "100%",
    height: "100%",
    borderRadius: 10,
    overflow: "hidden",
  },

父组件示例：

<View style={styles.container}>
      <Card>
        <Image
          style={styles.imageStyle}
          source={require("../assets/games/Among-us.png")}
        />
      </Card>
</View>

标签： reactjsreact-native

解决方案

问题在于您没有将 backgroundColor 应用于您的styles.box

更新您的styles.box以匹配此：

box: {
    width: "50%",
    height: "50%",
    padding: 15,
    shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 6,
    },
    shadowOpacity: 0.37,
    shadowRadius: 7.49,

    elevation: 12,
    backgroundColor: '#ffffff'
}

你会看到你的影子。

这是已知的错误，您可以在此处阅读Android - 如果没有 backgroundColor，海拔样式属性将不起作用

推荐阅读