javascript - 反应原生默认背景颜色

Question

我想根据应用程序的全局背景颜色更改我的卡片颜色。因为我想消失用白色标记的背景颜色。我用#F2F2F2 #eee 和#ffffff 尝试了backgroundColor，但总是存在一些差异。那么如何将背景颜色更改为与默认背景颜色相同。

这是我的代码：

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

const styles = StyleSheet.create({
  box: {
    width: "45%",
    height: "50%",
    padding: 5,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 6,
    },
    shadowOpacity: 0.39,
    shadowRadius: 8.3,
    backgroundColor: "#ffffff",
    elevation: 13,

    margin: 5,
  },
  inner: {
    flex: 1,
    backgroundColor: "transparent",
    alignItems: "center",
    justifyContent: "center",
  },
});

如果我不应用阴影，它的背景很好但是。当我将阴影应用到我的卡片组件时，我的应用程序和卡片组件的背景颜色总是不同

没有阴影的应用照片：（这是我想要的背景颜色）

带阴影的应用照片：（我想删除卡片的白色部分。当我应用阴影时，总是存在一些色差。）

标签： javascriptreactjsreact-native

Answer 1

您可以通过将阴影属性和backgroundColor( #ffffff) 应用于<Image/>.

通过这样做，您将不会在图像周围有白色边框背景。

我创建了示例Expo — 带阴影的图像卡