ReactNative之Image在Android设置圆角图片变形问题_react native 图片拉伸变形-优快云博客

本文详细介绍了在ReactNative中使用Image组件时遇到的圆角显示问题及解决方案，包括通过外层View设置圆角和使用overlayColor属性来避免图片在Android设备上的颜色溢出问题。

ReactNative中的Image使用时比较简单的，比如下面这样：

<Image
            resizeMode='contain'
            defaultSource={require('images/avatar_placeholder.png')}
            source={{ uri: 
                    'http://img1.qimingpian.com/product/raw/2b7285ee83af426c321002e27247377a.jpg' }}
            style={{width: 50, height: 50}}
        />

效果就是这样了

问题来了，如果给Image设置了圆角了话，Android上就显示有问题了，

<Image
            resizeMode='contain'
            defaultSource={require('images/avatar_placeholder.png')}
            source={{ uri:
                    'http://img1.qimingpian.com/product/raw/2b7285ee83af426c321002e27247377a.jpg' }}
            style={{
              width: 50, height: 50,
              borderWidth: StyleSheet.hairlineWidth,
              borderRadius: 3,
              borderColor: color.STARUP.LINE_BACKGROUND}}
        />

就会出现下面的图片变形问题，图片在安卓手机上会出现多余的颜色

怎么解决他呢？
如果需要给图片加圆角，解决方案如下：

1.Image不设置圆角，外面用View包裹一下，设置View的圆角

<View style={{
            width: 50, height: 50,
            borderWidth: StyleSheet.hairlineWidth,
            borderRadius: 3,
            borderColor: color.STARUP.LINE_BACKGROUND}}>
          <Image
              resizeMode='contain'
              defaultSource={require('images/avatar_placeholder.png')}
              source={{ uri:
                      'http://img1.qimingpian.com/product/raw/2b7285ee83af426c321002e27247377a.jpg' }}
              style={{width: 50, height: 50,}}
          />
        </View>

##2.设置overlayColor的颜色

<Image
            resizeMode='contain'
            defaultSource={require('images/avatar_placeholder.png')}
            source={{ uri:
                    'http://img1.qimingpian.com/product/raw/2b7285ee83af426c321002e27247377a.jpg' }}
            style={{
              width: 50, height: 50,
              borderWidth: StyleSheet.hairlineWidth,
              borderRadius: 3,
              borderColor: color.STARUP.LINE_BACKGROUND,
              overlayColor: '#ffffff'
            }}
        />

ok,就酱自了。

都怪自己读书少，没好好看文档：