反应原生圆形切口

Question

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

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

Answer 1

您可以创建框的左上角和右上角，然后将图像切口以半圆形状放置在中间，以使圆适合。

 <View style={styles.container}>
    <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
      <View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopLeftRadius: 45}}></View>
      <View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopRightRadius: 45}}></View>
    </View>
   <View style={{backgroundColor: 'grey', height: 300, width:308, borderBottomLeftRadius: 45, borderBottomRightRadius: 45}}></View>
   <View style={{position: 'absolute', alignSelf: 'center', top: 145}}>
     <ImageBackground
        style={{width: 60, height: 50}}
        source={{uri: "https://i.imgur.com/ncjPX1k.png"}}>
        <View style={{backgroundColor: 'grey',width:50, height: 50, borderRadius: 27.5, top: -30, alignSelf: 'center'}}></View>
      </ImageBackground>
    </View>
 </View>

See the snack (styling is a bit off):

Answer 2

您可以将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