Как позволить изображению покрывать другое изображение?

Question

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

<View style={{ alignItems: 'center' }}>
  <Image
    source={CrownIcon}
    style={{ width: 28, height: 18, bottom: -7 }}
  />
  <Image
    source={{uri: image}}
    style={{ width: 28, height: 28 }}
  />
</View>

Но в результате фотография фото покрывает значок короны.

Поэтому я пытаюсь добавить <View /> и использовать position: 'absolute'

<View style={{ alignItems: 'center' }}>
  <View style={{ position: 'absolute', bottom: 32 }}>
    <Image
      source={CrownIcon}
      style={{ width: 28, height: 18 }}
    />
  </View>
  <Image
    source={{uri: image}}
    style={{ width: 28, height: 28 }}
  />
</View>

На фотоизображении все еще есть значок короны.

Как разрешить ли иконке короны покрывать фотографию?

Answer 1

Вы можете использовать ImageBackground

.eg

<ImageBackground
    source={{uri: image}}
    style={your-style}
>
    <Image
        source={{uri: image}}
        style={your-style}
    />
</ImageBackground>

Answer 2

Здесь проблема с перекрывающимся изображением

Просто добавьте zIndex: 5 к своему изображению

 <View style={{ alignItems: 'center' }}>
      <View style={{ position: 'absolute', bottom: 32 , zIndex: 5 }}> 
        <Image
          source={CrownIcon}
          style={{ width: 28, height: 18 }}
        />
      </View>
      <Image
        source={{uri: image}}
        style={{ width: 28, height: 28 }}
      />
    </View>