SingleImage.js
3.21 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
100
101
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class SingleImage extends React.Component {
constructor(props) {
super(props);
this.state = {
width: Dimensions.get('window').width,
height: 0,
};
}
shouldComponentUpdate(nextProps,nextState){
if (Immutable.is(nextProps.resource, this.props.resource) && nextState.height==this.state.height) {
return false;
} else {
return true;
}
}
componentDidMount() {
let {resource} = this.props;
let template_name = resource.get('data');
let src = template_name.get('src');
let imageHeight = template_name.get('height');
let imageWidth = template_name.get('width');
if (!imageHeight || !imageWidth) {
Image.getSize(src, (width, height) => {
if (this.imageView) {
this.setState({width, height});
}
});
}
}
render() {
let {resource} = this.props;
let template_name = resource.get('data');
let src = template_name.get('src');
let linkUrl = template_name.get('url');
let imageHeight = template_name.get('height');
let imageWidth = template_name.get('width');
if (imageHeight && imageWidth) {
return (
<View style={{width: screenWidth,height: (imageHeight/imageWidth)*screenWidth}}>
{linkUrl?<TouchableOpacity activeOpacity={0.5} onPress={() => {
this.props.onPressLink && this.props.onPressLink(linkUrl);
}}>
<Image
source={{uri: src}}
style={{width: screenWidth,height: (imageHeight/imageWidth)*screenWidth}}
/>
</TouchableOpacity>:<Image
source={{uri: src}}
style={{width: screenWidth,height: (imageHeight/imageWidth)*screenWidth}}
/>}
</View>
);
}else {
return (
<View style={{width: screenWidth,height: (this.state.height/this.state.width)*screenWidth}}>
{linkUrl?<TouchableOpacity activeOpacity={0.5} onPress={() => {
this.props.onPressLink && this.props.onPressLink(linkUrl);
}}>
<Image
ref={(ref)=>this.imageView=ref}
source={{uri: src}}
style={{width: screenWidth,height: (this.state.height/this.state.width)*screenWidth}}
/>
</TouchableOpacity>:<Image
ref={(ref)=>this.imageView=ref}
source={{uri: src}}
style={{width: screenWidth,height: (this.state.height/this.state.width)*screenWidth}}
/>}
</View>
);
}
}
};
let screenWidth = Dimensions.get('window').width;
let imageView = null;
let styles = StyleSheet.create({
});