如何让颜色覆盖背景颜色？

Question

我试过rgba(156, 39, 176, 1)但是它没有覆盖下面的颜色。怎样才能让紫色的色圈遮住背景铃的部分？

Answer 1

您可以使用react-native-icon-badge创建这个带计数的通知图标符号。

<View style={styles.container}>
  <IconBadge
    MainElement={
      <View>
        <Image
          style={{width:60,height:60,margin:3}}
          source={bell}
        />
      </View>
    }
    BadgeElement={
      <Text style={{color:'#FFFFFF'}}>3</Text>
    }
    IconBadgeStyle={
      {width:30,
      height:30,
      backgroundColor: '#9c27b0'}
    }
    Hidden={this.state.BadgeCount==0}
    />
</View>

Answer 2

首先尝试在徽章上设置 zIndex 以使其呈现在顶部。但是 Android 有一些 zIndex 问题，所以如果这不起作用，那么您必须在之后渲染它。所以你现在有这个：

<View>
   <Badge>
   <Image>
</View>

您需要做的：

<View>
   <Image>
   <Badge>
</View>

如何让颜色覆盖背景颜色？

how to make color cover the background color?

opacity

react-native