Question

我希望我的反应原生元素ListItem有更大的化身。但是当我增加化身的宽度和高度时，它变成了方形。如何使用ListItem的自定义宽度和高度来实现圆形化身？这是我的代码。

如何调整头像大小并呈圆形？

 render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.props.data}
          renderItem={({ item }) => (
            <ListItem
              roundAvatar={true}
              avatar={{ uri: item.picture.thumbnail }}
              avatarStyle={styles.avatar}
              avatarContainerStyle={styles.avatarContainer}
              title={`${item.name.first} ${item.name.last}`}
              titleStyle={styles.title}
              rightTitle="20 Minutes Ago"
              rightTitleStyle={styles.rightTitle}
              rightTitleContainerStyle={styles.rightTitleContainer}
              subtitle="This was posted by the developer"
              subtitleStyle={styles.subtitle}
              subtitleContainerStyle={styles.subtitleContainer}
              subtitleNumberOfLines={5}
              hideChevron={true}
              containerStyle={styles.listItemContainer}
            />
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  listItemContainer: {
    flex: 1,
    borderBottomWidth: 0
  },
  seperator: {
    height: 1,
    width: "86%",
    backgroundColor: "#CED0CE",
    marginLeft: "12%"
  },
  avatar: {
    width: 50,
    height: 50
  },
  title: {
    marginLeft: 5,
    fontSize: 16,
    fontWeight: "600",
    color: "black"
  },
  subtitle: {
    marginLeft: 5,
    fontSize: 14,
    fontWeight: "normal"
  },
  subtitleContainer: {
    marginTop: 0
  }
});

Answer 1

根据最新的稳定版文档docs，道具avatar表示可以将其用作组件。

正如index.d.ts档案

中所述

头像？：字符串| ImageURISource | JSX.Element;

有很多方法可以解决此问题，但方便的方法是使所有元素响应将使用头像组件< / strong>直接来自图书馆。

<ListItem avatar={<Avatar rounded large source={{uri: 'Your URI'}} height={`YOUR_HEIGHT`} width={`YOUR_WIDTH`}/>} title={`YOUR_TITLE`} titleStyle={styles.title} rightTitle="20 Minutes Ago" rightTitleStyle={styles.rightTitle} rightTitleContainerStyle={styles.rightTitleContainer} subtitle="This was posted by the developer" subtitleStyle={styles.subtitle} subtitleContainerStyle={styles.subtitleContainer} subtitleNumberOfLines={5} hideChevron={true} containerStyle={styles.listItemContainer} />

然后您可以根据要求自由应用Avatar组件的道具

希望它有所帮助！

Answer 2

尝试将头像样式修改为：

avatar: {
width: 50,
height: 50,
borderRadius: 25,
overflow:'hidden'
}

诀窍是使borderRadius宽度/高度的50％。 overflow:hidden用于将正方形缩小为圆形。希望能帮助到你。

如何使用react-native-elements的ListItem制作圆形头像

2 个答案: