如何为react-native-elements的ListItem设置自定义尺寸圆形头像

我之前也碰到过这个情况，其实原因很直白：roundAvatar属性是跟着ListItem默认的头像尺寸走的，当你手动增大头像宽高后，原来的圆角半径没同步调整，自然就变成方形了。这里给你两个实用的解决方案：

方案一：用Avatar组件替代默认头像（推荐） #

react-native-elements的Avatar组件本身就支持灵活的尺寸控制，而且rounded属性会自动根据你设置的尺寸生成完美的圆形，不用自己算圆角半径。直接把ListItem的默认头像替换成Avatar组件就行，代码示例如下：

render() {
  return (
    <View style={styles.container}>
      <FlatList
        data={this.props.data}
        renderItem={({ item }) => (
          <ListItem>
            {/* 使用Avatar组件自定义圆形头像 */}
            <Avatar
              rounded
              source={{ uri: item.picture.thumbnail }}
              size={80} // 这里设置你想要的任意尺寸
            />
            <ListItem.Content>
              <ListItem.Title>{item.name.first}</ListItem.Title>
              <ListItem.Subtitle>{item.email}</ListItem.Subtitle>
            </ListItem.Content>
          </ListItem>
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

这种方式最省心，Avatar组件会自动处理圆角，不管你设置多大的size，头像都会保持圆形。

方案二：自定义头像样式，手动设置圆角半径 #

如果你还是想用ListItem自带的avatar属性，那可以通过avatar.style来手动设置宽高和对应的圆角半径（圆角半径必须是宽高的一半才能实现圆形），同时记得去掉roundAvatar属性，避免冲突。代码示例：

render() {
  return (
    <View style={styles.container}>
      <FlatList
        data={this.props.data}
        renderItem={({ item }) => (
          <ListItem
            // 自定义头像样式，设置宽高和圆角
            avatar={{
              uri: item.picture.thumbnail,
              style: { width: 80, height: 80, borderRadius: 40 } // 圆角=宽高/2
            }}
            title={item.name.first}
            subtitle={item.email}
            // 这里不要加roundAvatar属性，避免覆盖自定义样式
          />
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

这里的核心是把borderRadius设为宽高的一半，比如宽高是80，圆角就设为40，这样不管尺寸多大，头像都会是标准的圆形。

内容的提问来源于stack exchange，提问作者Shashika Virajh