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

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

安装Node.js和npm

可参考：https://blog.csdn.net/cww468/article/details/122384339

安装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地址:3000，查看例子头像

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>)}
}

React App中使用Avataaars自由设计头像相关推荐

tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？
tailwind css CSS is a technology that can be your best or worst friend. While it's incredibly flexib ...
APP中的悬浮球设计总结
本文为PMCAFF专栏作者836488572出品如果问我过去一段时间最令人印象深刻的交互方式有哪些?我想说的有两个:一个是微信的文章浮窗,在阅读文章时,如果有紧急信息需要处理,可以把文章加入浮窗,想 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
App中微信分享代付功能业务设计与代码实现
先上图场景本例的代付场景是,开发一款APP应用,APP中具有支付能力,按照微信支付对接要求已经完成APP支付的对接.现在要玩点新花样,找人代付订单.用户在APP中下单后选择找人代付,将分享H5 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
Delphi FMX正确设计和加载图片满足分布式跨平台App的性能需求-分布式跨平台App中美工图片的处理、上传下载、并发及客户端显示技术架构
Delphi FMX正确设计和加载图片满足分布式跨平台App的性能需求分布式跨平台App中美工图片的处理.上传下载.并发及客户端显示技术架构 [综合:客户端(内存耗用.设备屏幕的自动适配).服务端( ...

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

React App中使用Avataaars自由设计头像相关推荐

最新文章

热门文章