React App中使用Avataaars自由设计头像

React App中使用Avataaars自由设计头像

本篇文章将使用 create-react-app 快速构建 React 开发环境，创建基于 Webpack  ES6的项目，导入Avataaars包去设计属于自己的可爱头像。
GitHub源码地址：

• 安装ode.js和npm

可参考：

• 安装Avataaars的组件包

npm install avataaars --save

• 安装使用 create-react-app 快速构建 React 开发环境

npm install -g create-react-app

• 自动构建React App项目

create-react-app my-app

• 打开App.js文件

cd /app/src #进入目录
vim App.js #打开文件

• 根据你的需求导入Avataaars组件包设计属于你的头像，以下代码是一个例子

#删除或修改原来App.js里的代码
#如果GitHub源码复制运行的时候会报错Unreachable code，请复制使用以下代码import * as React from 	react	
import Avatar from 	avataaars	export default class MyComponent extends React.Component {render () {return (<div>Your avatar:<Avatarstyle={{width: 	100px	, height: 	100px	}}avatarStyle=	Circle	topType=	LongHairMiaWallace	accessoriesType=	Prescription02	hairColor=	BrownDark	facialHairType=	Blank	clotheType=	Hoodie	clotheColor=	PastelBlue	eyeType=	Happy	eyebrowType=	Default	mouthType=	Smile	skinColor=	Light	/></div>)}
}

保存后，npm运行，打开浏览器输入 服务器IP地址:000，查看例子头像

npm start

• 还可以通过以下代码，显示组成头像的不同的独立构件

import * as React from 	react	
import {Piece} from 	avataaars	;export default class MyComponent extends React.Component {render () {return (<div><Piece pieceType=mouth pieceSize=100 mouthType=Eating/><Piece pieceType=eyes pieceSize=100 eyeType=Dizzy/><Piece pieceType=eyebrows pieceSize=100 eyebrowType=RaisedExcited/><Piece pieceType=accessories pieceSize=100 accessoriesType=Round/><Piece pieceType=top pieceSize=100 topType=LongHairFro hairColor=Red/><Piece pieceType=facialHair pieceSize=100 facialHairType=BeardMajestic/><Piece pieceType=clothe pieceSize=100 clotheType=Hoodie clotheColor=Red/><Piece pieceType=graphics pieceSize=100 graphicType=Skull /><Piece pieceType=skin pieceSize=100 skinColor=Brown /></div>)}
}