从列表到配置文件屏幕,整个ui设计中都可以找到化身。它们通常用于代表用户,并且可以包含照片,图标甚至文本。
react-native-elements官网介绍了4种
第一种 用户头像 采用source 引了一个uri
<Avatar rounded source={{uri:'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',}}/>
第二种 用title Avatar里显示title内容
<Avatar rounded title="MD" />
第三种 icon
<Avatar rounded icon={{name:'home'}} />
第四种 头像加编辑图标
<Avatar source={{uri:'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',}} showEditButton/>
activeOpacity:num 按下时的不透明度 默认 0.2
avatarStyle:obj avatar里image的样式
containerStyle:obj 外容器的样式
editButton:iconprops 默认{ name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' }
icon:显示图标作为头像的主要内容。不能与title一起使用。与source道具一起使用时,它将用作占位符。 对象{名称:字符串,颜色:字符串,大小:数字,类型:字符串(默认为材料,或从受支持的图标集中选择),iconStyle:对象(样式)}
iconStyle:obj icon 图标组件的额外样式(可选)
imageProps:传递给image头像的可选属性 image props
onEditPress:callback 当按edit Button时
onLongPress:callback 当长按组件时
onPress:callback 当按下组件时
overlayContainerStyle:obj image或者icon avatar 外部View的样式
placeholderStyle:obj 给占位符添加样式 默认{ backgroundColor: '#BDBDBD' }
rounded:头像变圆形 布尔
size:头像大小 string(small, medium, large, xlarge) or number 默认 small
showEditButton:布尔 在头像上显示一个编辑按钮
source:image source
title:头像里显示string
titleStyle:样式
renderPlaceholderContent:自定义占位符元素 react组件或者元素
Component:function 封装元素的组件 默认TouchableHighlight
ImageComponent:自定义ImageComponent react组件或者元素 默认image