ReactNative之Image在Android设置圆角图片变形问题

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

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

效果就是这样了

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

<ImageresizeMode='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}}><ImageresizeMode='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的颜色

<ImageresizeMode='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,就酱自了。

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

转载于:https://juejin.im/post/5beb99ed51882508851b4971

ReactNative之Image在Android设置圆角图片变形问题相关推荐

Android 圆形/圆角图片的方法
Android 圆形/圆角图片的方法眼下网上有非常多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这样的结束也是Android开发必 ...
android 简单实现圆角,Android 实现圆角图片的简单实例
Android 实现圆角图片的简单实例实现效果图: 本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出.于是自己自定义了个View,实现图片的圆角以及圆形效 ...
# Android 设置PNG图片的打印分辨率 dpi (pHYs)
Android 设置PNG图片的打印分辨率dpi(pHYs) 1.了解png的原文件数据,头文件IHDR,控制物理密度的pHYs, 关于png的头文件IHDR: https://blog.csdn.n ...
android thumb大小,Android 设置thumb图片大小
xml: android:thumb="@drawable/seekbar_thumb" seekbar_thumb.xml: 修改为: private int seekWidth ...
android.9背景图变形,Android聊天背景图片变形解决方案
Android聊天背景图片变形,一般是由于键盘引起的.可以参看StackOverFlow解决的地址:外链网址已屏蔽我这里用的也是参考这里的方法: 解决方法很简单: 1.在AndroidManifes ...
Android聊天背景图片变形解决方案
2019独角兽企业重金招聘Python工程师标准>>> Android聊天背景图片变形,一般是由于键盘引起的(这个是自己调戏糖宝app中出现的问题,今天抽时间解决下).可以参看Sta ...
Android ImageView到底怎么设置圆角图片？背景圆角？控件圆角？图片圆角？占位图圆角？
前言在我们实际开发应用的过程中,我想大家或多或少都遇到过需要加载圆角图片的场景,还有一些图片是四周圆角不对称,异性圆角等等情况. 我们可能会去网上或Github上搜索一些RoundImageView ...
IOS启程06—iOS设置圆角图片
iOS设置圆角的三种方式 1 方法一通过设置layer的属性 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMak ...
IOS中设置圆角图片
2019独角兽企业重金招聘Python工程师标准>>> ##iOS设置圆角的三种方式 <hr/> 1 方法一通过设置layer的属性 UIImageView *imag ...
android设置本地图片,Android设置头像，手机拍照或从本地相册选取图片作为头像...
[Android设置头像,手机拍照或从本地相册选取图片作为头像] 像微信.QQ.微博等社交类的APP,通常都有设置头像的功能,设置头像通常有两种方式: 1,让用户通过选择本地相册之类的图片库中已 ...

ReactNative之Image在Android设置圆角图片变形问题

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

ReactNative之Image在Android设置圆角图片变形问题相关推荐

最新文章

热门文章