反应原生圆形切口

Question

我试图在React Native中创建一个圆形切口，类似于下面的图像，浅灰色是透明的。

我可以使用绝对定位和固定背景颜色成功复制此设计，但我不确定如何在顶部透明的图像周围制作切口？

Answer 1

您可以将position:"absolute"设置为图像视图，并相应地设置其位置。

试试这个，

  <View
    style={{
      height:400,
      justifyContent: 'center',
      marginTop: 100,
    }}>
    <View
      style={{
        backgroundColor: 'grey',
        height: 80,
        width: 80,
        alignSelf: 'center',
        borderRadius: 40,
        borderColor: '#FFFFFF',
        borderWidth: 10,
        position: 'absolute',
        top: -40,
        zIndex: 1,
        alignItems:"center",
        justifyContent:"center"
      }}
    >
    <Text>Image</Text></View>
    <View
      style={{
        height: 400,
        margin: 20,
        backgroundColor: 'grey',
        borderRadius: 40,
      }}
    ></View>
  </View>

see working expo example here