反應原生默認背景顏色

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",
  },
});

如果我不應用陰影，它的背景很好但是。 當我將陰影應用到我的卡片組件時，我的應用程序和卡片組件的背景顏色總是不同

沒有陰影的應用照片：（這是我想要的背景顏色）

帶陰影的應用照片：（我想刪除卡片的白色部分。當我應用陰影時，總是存在一些色差。）

Answer 1

您可以通過將陰影屬性和backgroundColor ( #ffffff ) 應用到<Image/>的第一個父項來獲取帶有陰影的圖像。

通過這樣做，您將不會在圖像周圍有白色邊框背景。

我創建了示例Expo — 帶陰影的圖像卡

Answer 2

我認為您的問題與此問題非常相似。

此外，如果您嘗試在瀏覽器中找出 HTML 元素的顏色，您可以輕松地使用Chrome DevTools並檢查相應的元素。

希望這能讓您走上正確的道路。