make image more suitable

Author: soliury

src/components/CommentHtml.js

@@ -7,7 +7,7 @@ import React, {
 import Html from './base/Html';
 
 
-const { height, width } = Dimensions.get('window');
+const {height, width} = Dimensions.get('window');
 
 
 class CommentHtml extends Component {
@@ -24,6 +24,7 @@ class CommentHtml extends Component {
 				content={this.props.content}
 				style={this.styles}
 				router={this.props.router}
+				maxImageWidth={width - 80 - 20}
 			/>
 		)
 	}
@@ -172,9 +173,10 @@ const styles = StyleSheet.create({
 		borderLeftWidth: 3
 	},
 	img: {
-		width: width - 80,
-		height: width - 80,
-		resizeMode: Image.resizeMode.contain
+		width: width - 80 - 20,
+		height: width - 80 - 20,
+		resizeMode: Image.resizeMode.contain,
+		margin: 10
 	}
 });
 

src/components/base/Html.js

@@ -5,18 +5,20 @@ import React, {
 	Dimensions,
 	PropTypes
 } from 'react-native';
+import _ from 'lodash';
 import HtmlRender from 'react-native-html-render';
-import { parseImgUrl, link } from '../../utils';
+import {parseImgUrl, link} from '../../utils';
 
 
-const { width, height } = Dimensions.get('window');
-
+const {width, height} = Dimensions.get('window');
+const defaultMaxImageWidth = width - 30 - 20;
 
 const regs = {
 	http: {
 		topic: /^https?:\/\/cnodejs\.org\/topic\/\w*/,
 		user: /^https?:\/\/cnodejs\.org\/user\/\w*/
-	}
+	},
+	gif: /.*\.gif$/
 };
 
 
@@ -27,6 +29,16 @@ class Html extends Component {
 	};
 
 
+	static defaultProps = {
+		maxImageWidth: defaultMaxImageWidth
+	};
+
+	constructor(props) {
+		super(props);
+		this._images = {};
+	}
+
+
 	_onLinkPress(url) {
 		let router = this.props.router;
 
@@ -64,6 +76,23 @@ class Html extends Component {
 	}
 
 
+	_onImageLoadEnd(uri, imageId) {
+		const {maxImageWidth} = this.props;
+		Image.getSize(uri, (w, h)=> {
+			if (w >= maxImageWidth) {
+				h = (maxImageWidth / w) * h;
+				w = maxImageWidth;
+			}
+			this._images[imageId] && this._images[imageId].setNativeProps({
+				style: {
+					width: w,
+					height: h
+				}
+			});
+		});
+	}
+
+
 	_renderNode(node, index, parent, type) {
 		const name = node.name;
 		const imgStyle = this.props.imgStyle || styles.img;
@@ -72,13 +101,16 @@ class Html extends Component {
 		if (node.type == 'block' && type == 'block') {
 			if (name == 'img') {
 				const uri = parseImgUrl(node.attribs.src);
-				if (/.*\.gif$/.test(uri)) return null;
+				if (regs.gif.test(uri)) return null;
+				const imageId = _.uniqueId('image_');
 				return (
 					<Image
-						key={index}
+						key={imageId}
+						ref={view=>this._images[imageId]=view}
 						source={{uri:uri}}
-						style={imgStyle}>
-					</Image>
+						style={imgStyle}
+						onLoadEnd={this._onImageLoadEnd.bind(this, uri, imageId)}
+					/>
 				)
 			}
 		}
@@ -100,9 +132,11 @@ class Html extends Component {
 
 const styles = StyleSheet.create({
 	img: {
-		width: width - 30,
-		height: width - 30,
-		resizeMode: Image.resizeMode.contain
+		width: defaultMaxImageWidth,
+		height: defaultMaxImageWidth,
+		resizeMode: Image.resizeMode.cover,
+		borderRadius: 5,
+		margin: 10
 	}
 });