反应原生默认背景颜色答案

【问题标题】：react native default backgroundcolor反应原生默认背景颜色
【发布时间】：2021-01-05 07:11:13
【问题描述】：

我想根据应用的全局背景颜色更改我的卡片颜色。因为我想消失用白色标记的背景颜色。我用#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",
  },
});

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

App photo 没有阴影：（这是我想要的背景颜色）

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

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您可以通过将阴影属性和backgroundColor (#ffffff) 应用于<Image/> 的第一个父项来获得带有阴影的图像。

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

我已经创建了示例Expo — Image Card With Shadow

【讨论】：

【解决方案2】：

我认为您的问题与this one 非常相似。

此外，如果您尝试在浏览器中找出 HTML 元素的颜色，您可以轻松使用 Chrome DevTools 并检查相应的元素。

希望这能让你走上正轨。

【讨论】：