f8app代码学的要点(4)-ProfilePicture组件

/*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;

推荐阅读更多精彩内容

  • ListContianer.js组件囊括了剩下的其他组件,组成了app的主页面部分主页面从上向下有头部的标题视差滚...
    smartphp阅读 155评论 0 0
  • 函数的形参一共分为两种: 当形参类型是引用类型的时候,我们说它对应的实参被引用传递或者说函数被传引用调用。 当形参...
    Troll__Zhao阅读 59评论 0 0
  • 情人节前,看到这款小鹿形状的巧克力,超级可爱,立马被这颜值征服,看着就很有食欲好吗。包装也好看,把鹿角收起来秒表胖...
    我就是小彭彭阅读 87评论 0 0
  • 河流终究只在夜的深处行军往前或是往后蝴蝶都无处可栖腐烂成绵软的云任风摆布扯开面被踩烂的旗帜我要游遍所有能及和不能及...
    Biobot阅读 15评论 0 0