/*f8app/js/common/ProfilePicture.js*/
//这个组件是最简单的一个,只要从父组件接受userID和size就可以
//动态获取图片了。
'use strict';
var Image = require('Image');
var React = require('React');
var PixelRatio = require('PixelRatio');
class ProfilePicture extends React.Component {
props: {
userID: string;
size: number;
};
render() {
const {userID, size} = this.props;
const scaledSize = size * PixelRatio.get();
// uri是es6中动态拼接字符串的方法,变量用${variable}动态获取
const uri = `http://graph.facebook.com/${userID}/picture?width=${scaledSize}&height=${scaledSize}`;
//style里borderRadius让图片变园
return (
<Image
source={{uri}}
style={{
width: size,
height: size,
borderRadius: size / 2,
}}
/>
);
}
}
module.exports = ProfilePicture;
f8app代码学的要点(4)-ProfilePicture组件
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- ListContianer.js组件囊括了剩下的其他组件,组成了app的主页面部分主页面从上向下有头部的标题视差滚...