反应原生的垃圾桶图标周围创建一个圆圈？

Question

如何在这个图标周围创建一个圆圈。请给我建议..如何添加圆圈。

现在我的图标像this.

如何创建像this这样的圆圈

<Animated.View
  ref={view => view && (this.iconRef = view._component)}
  onLayout={() =>
    this.iconRef &&
    this.iconRef.measure((x, y, width, height, pageX, pageY) =>
      this.props.onMeasure({
        x: pageX,
        y: pageY,
        width,
        height,
      })
    )
  }
  style={[
    styles.iconContainer,
    {
      opacity: this.props.opacity,
      transform: [
        {
          scale: Animated.multiply(
            this.props.opacity.interpolate({
              inputRange: [0, 1],
              outputRange: [0.5, 1],
            }),
            this.props.scale
          ),
        },
      ],
    },
  ]}
>
  <Icon name="trash-o" color="white" style={styles.icon} />
</Animated.View>

Answer 1

将属性borderRadius: 100添加到它的容器中，就像

<View style={{borderRadius: 100}}>
  <Icon name="trash-o" color="white" style={styles.icon} />
</View>

---

NOTE: borderRadius value is proportional to your container's size.

Answer 2

你可以这样做，

<View style={styles.iconWrapper}>
   <Icon name="trash-o" color="white" style={styles.icon} />
</View>

iconWrapper风格

iconWrapper: {
 width: 30,
 borderRadius: 15,
 backgroundColor: 'black',
 padding: 10
}