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;