Реагировать на родной круговой вырез - PullRequest
Новая
       17

Реагировать на родной круговой вырез

0 голосов
/ 01 мая 2019

Я пытаюсь создать круглый вырез в React Native, что-то похожее на изображение ниже, где светло-серый прозрачен .

cutout

Я могу успешно продублировать этот дизайн, используя абсолютное позиционирование и фиксированные цвета фона, но не уверен, как бы я сделал прорезь вокруг изображения сверху прозрачным?

1 Ответ

0 голосов
/ 01 мая 2019

Вы можете установить 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>

см. Пример рабочей экспозиции здесь

...