Реагируйте на собственный рендеринг изображения borderRadius в iOS

Question

Изображения отображаются в различных аспектах в iOS и Android с использованием компонента изображения из Reaction-native.Я пытаюсь отобразить изображение с углом среза 45 градусов на каждом углу.

Я пытался использовать крышку, содержимое и центр крышки реквизита resizeMode, которая заполняет изображение внутри представления, давая срез на 45 градусов, но обрезает либоширина или высота.

Центр не обрезает изображение, но если изображение не имеет такого же соотношения, как вид, то угол обзора 45 градусов не обрезается, однако Android делает это хорошо.

<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

  <View style={styles.imageWrapView}>

    <Image source={{uri: ‘file://’ + item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} />

  </View>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

</View>

Хотите получить необрезанные изображения на ios, у которых угол среза составляет 45 градусов.То же, что и на изображениях для Android.Вот изображения с устройства Android, которые отображаются правильно.

Вот изображения, сделанные на ios с использованием центра и обложки

Это отображается с использованием содержимого на IOS

Как получить изображения, отображаемые с45 градусов отсечки на устройстве IOS, как это на устройстве Android?

Answer 1

Попробуйте это

<View
  style={{
    width: 250,
    height: 150,
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
    borderBottomLeftRadius: 50,
    borderBottomLeftRadius: 50,
    overflow: 'hidden'
  }}
>
  <Image
    source={{ uri: imageUri }}
    style={{
      width: 250,
      height: 150
    }}
  />
</View>

Вы можете использовать следующие подпорки для 45-градусного отсечения угла на каждом углу.

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomLeftRadius