css - 使用 CSS 使环的中间透明

Question

我想要完成的是在 iPhone 记录中找到一个类似的按钮。

如下图所示，我目前拥有的是一枚戒指，但并不是我想要的。

我希望稍后完成一个环形外圈，有一些透明（移动相机时见背景），然后是一个红点。

希望得到一些建议，因为我无法使用透明，因为它只会从容器中呈现白色的颜色。

代码

                        <View
                            style={{
                                borderRadius: 40,
                                width: 80,
                                height: 80,
                                backgroundColor: 'white',
                                overflow: 'hidden'
                            }}
                        >
                            <View
                                style={{
                                    borderRadius: 35,
                                    width: 70,
                                    height: 70,
                                    margin: 5,
                                    backgroundColor: 'black'
                                }}
                            >
                                <Text>HELLO</Text>
                            </View>
                        </View>

Answer 1

这样的事情应该可以解决问题：

<View style={{ flex: 1, backgroundColor: 'blue' }}>
  <View
    style={{
        borderRadius: 40,
        borderWidth: 2,
        width: 80,
        height: 80,
        borderColor: 'white',
        overflow: 'hidden'
    }}
  >
    <View
        style={{
            borderRadius: 35,
            width: 70,
            height: 70,
            margin: 5,
        }}
    >
      <Text>HELLO</Text>
    </View>
</View>