react-native-border-radius-image

This is a image component that can be rounded

Usage no npm install needed!

<script type="module">
  import reactNativeBorderRadiusImage from 'https://cdn.skypack.dev/react-native-border-radius-image';
</script>

README

这是一个可以设置圆角的Image组件，兼容Android和IOS,解决Android端设置圆角出现的问题

overlayColor: string (Android)

当图片有圆角的时候，指定一个颜色用于填充圆角处的空白。虽然一般情况下圆角处是透明的，但在某些情况下，Android 并不支持圆角透明，比如：

某些 resize 模式比如'contain' GIF 动画常见的用法就是在不能圆角透明时，设置overlayColor和背景色一致。

安装

yarn add react-native-border-radius-image

使用方法

// 导入包
import RoundImage from 'react-native-border-radius-image'

// 页面中引用, render 方法中
// Icon 为设置的默认logo


render() {
    const imgUrl = itemData.logo_url ? {uri: itemData.logo_url} : Icon;
    return(
        <RoundImage
            source={imgUrl}
            size={40}
            style={{alignSelf: 'flex-start',
            marginTop: 2,}}
        />
    )
}

属性

size 设置image的width,height
style 自定义image的样式
source image的数据源，图片地址
rounded 是否设置为圆形图片
resizeMode 设置图片的缩放模式