YH_Image.js
2.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react';
import ReactNative from 'react-native';
const {
Component,
} = React;
const {
View,
Image,
PixelRatio,
Platform,
StyleSheet,
} = ReactNative;
const YH_ImageView = ReactNative.requireNativeComponent('YH_ImageView', null);
/**
* 原生图片
* 圆角设置规则：
* ios写法： masksToBounds={true} style中设置borderRadius圆角值
* android写法： radius={{'topLeft':'20','topRight':'20','bottomRight':'20','bottomLeft':'20'}}
*
* 图片伸缩属性 resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') 同RN Image属性，
* 注意要添加style属性的值 resizeMode: 'stretch'
*
*
**/
export default class YH_Image extends Component {
constructor(props) {
super (props);
}
static getSlicedUrl(src, width, height, mode = 1) {
if (!src) {
return '';
}
width = PixelRatio.getPixelSizeForLayoutSize(width);
height = PixelRatio.getPixelSizeForLayoutSize(height);
let newSrc = src;
if (src.indexOf('imageView') === -1 && src.indexOf('imageMogr') === -1) {
newSrc = src + '?imageView2/' + mode + '/w/' + width + '/h/' + height;
} else {
newSrc = src.replace('{mode}', mode)
.replace(/{width}/g, width)
.replace(/{height}/g, height);
}
return newSrc;
}
render() {
if (Platform.OS === 'ios') {
let children = this.props.children;
if (children) {
return (
<Image
style={this.props.style}
source={{uri: this.props.url}}
>
{this.props.children}
</Image>
);
}
return (
<Image
style={this.props.style}
source={{uri: this.props.url}}
/>
);
}
else{
let children = this.props.children;
if(children){
let style = StyleSheet.flatten(this.props.style);
let {width, height} = style;
return (
<View style = {this.props.style}>
<YH_ImageView style = {[this.props.style,{position: 'absolute', left: 0, top: 0, zIndex: -999, width, height}]}
url = {this.props.url} />
{children}
</View>
);
}
else{
return (
<YH_ImageView
{...this.props}
/>
);
}
}
}
}