防止图像在圆形视图内缩放大小时溢出答案

【问题标题】：Prevent image from overflowing when scaling it's size inside circular view防止图像在圆形视图内缩放大小时溢出
【发布时间】：2018-06-14 12:32:03
【问题描述】：

我正在尝试使用以下代码创建圆形轮廓图像。挑战是我需要在圆形视图内放大图像。在 IOS 上这可以正常工作，因为额外的图像被包含视图切断，但在 Android 上它只是溢出。

import React, { Component } from 'react'
import { View, Image } from 'react-native'

class Example extends Component {
  render () {
    return (
      <View
        style={{
          borderRadius: 150,
          borderWidth: 10,
          borderColor: 'red',
          width: 300,
          height: 300,
        }}
      >
        <Image
          style={{
            borderRadius: 150,
            width: 280,
            height: 280,
            transform: [{
              scale: 1.3,
            }],
          }}
          resizeMode='contain'
          source={{ uri: 'http://blog.ramboll.com/fehmarnbelt/wp-content/themes/ramboll2/images/profile-img.jpg' }}
        />
      </View>
    )
  }
}

它在 Android 上的比例：

没有比例的样子：

我希望它的比例如何：

【问题讨论】：

删除： transform: [ { scale: 1.3 } ] 它适用于 Android 比 .
对不起，我解释得不好？关键是我想缩放图像，但我不想让图像溢出图像所在的视图。

标签： javascript android image react-native jsx

【解决方案1】：

将溢出：'隐藏'作为父视图的样式将解决问题。

<View
        style={{
          borderRadius: 150,
          borderWidth: 10,
          borderColor: 'red',
          overflow: 'hidden',
          width: 300,
          height: 300,
        }}
      >

【讨论】：