0.1.1 • Published 7 years ago
nuke-picture v0.1.1
Picture
- category: UI
- chinese: 图片组件
- type: UI组件
注意：nuke-picture 不在 nuke 大包中，需小包方式引入
注意：lazyload 仅h5有效，要开启 lazyload 功能，Web 端需引入//g.alicdn.com/kg/appear/0.1.2/appear.min.js
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| source | {uri: ''} | object | |
| style | 样式，必须设置 {width:'500',height:'500' | object | 无 |
| resizeMode | 组件尺寸和图片尺寸不成比例时如何调整图片的大小。可用值：cover,contain,stretch | string | stretch |
| forceUpdate | shouldComponentUpdate 是否强制更新 | Boolean | false |
| lazyload（仅h5） | 根据图像是否在可视范围内延迟加载图像 | Boolean | false |
| autoPixelRatio（仅h5） | 在高分辨率下使用二倍图 | Boolean | false |
| placeholder（仅h5） | lazyload 时显示的背景图 URL | string | 一张1px base64图 |
| autoRemoveScheme（仅h5） | 图像 URL 自动删除协议头 | Boolean | false |
| autoReplaceDomain（仅h5） | 图像 URL 域名替换成 gw.alicdn.com | Boolean | false |
| autoScaling（仅h5） | 为图像 URL 添加缩放后缀，将会根据 style 内的 width 属性添加缩放后缀 | Boolean | false |
| autoCompress（仅h5） | 添加质量压缩后缀 | Boolean | false |
| compressSuffix（仅h5） | 图像质量压缩后缀规则 | array | 'Q75', 'Q50' |
| highQuality（仅h5） | 使用高质量的压缩后缀 | Boolean | false |
| ignoreGif（仅h5） | 所有针对 URL 的优化是否忽略 gif 格式的图像，默认忽略 | Boolean | true |
示例
<Picture
source={{uri: 'https://gw.alicdn.com/tfscom/tuitui/TB2MuUPpVXXXXc6XXXXXXXXXXXX_!!2741895938.jpeg'}}
style={{
width: '620rem',
height:'400rem'
}}
lazyload={true}
/>resizeMode
- cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
- contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
- stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
设置 resizeMode 的前提是你设置了 style.width && style.height
forceUpdate
Picture 是一个 PureComponent ，它的 shouldComponentUpdate 决定了当且仅当 porps.source.uri 有变化时才会重新 render。
如果你想忽略它的 shouldComponentUpdate，则传入 forceUpdate={true}
lazyload
开启 lazyload 功能，Wed 端需在 HTML 内引入
<script src="//g.alicdn.com/kg/appear/0.1.2/appear.min.js"></script>0.1.1
7 years ago