反应原生默认背景颜色

Question

I want to change my card color according to the app's global background color. Because I want to disappear the background color that a marked with white. I tried the backgroundColor with #F2F2F2 #eee and #ffffff but always a little difference exist. So how can i change de back ground color for same as the default backgroundColor.

Here is my code:

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

If i don't apply the shadow its background is good but. when i applied shadow to my card component always backgroud color of my app and card component are different

App photo without shadow: (That is the back ground color that i want)

App photo with shadow: (I want to remove the white part of my card. When i applied shadow always some color difference exist.)

Answer 1

You can get image with the shadow underneath by applying shadow properties and backgroundColor ( #ffffff ) to the first parent of the <Image/> .

By doing so, you'll not have white border-ish background around image.

I've created example Expo — Image Card With Shadow

Answer 2

I think your question is very similiar to this one.

Also if you try to find out a Color of a HTML-Element in the Browser, you can easily use ie the Chrome DevTools and inspect the corresponding Element.

Hope this brings you to the right track.