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

问题描述

我想为我的 React-native-elements ListItem 设置一个更大的头像.但是当我增加头像的宽度和高度时，它变成了正方形.如何使用 ListItem 的自定义宽度和高度实现圆形头像?这是我的代码.

I want to have a bit bigger avatar for my ListItem of react-native-elements. But when I increase the width and height of the avatar, it becomes square. How can I achieve a rounded avatar with custom width and height of ListItem? This is my code.

如何调整头像的大小并获得圆形?

How can I resize the avatar and have the round shape?

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

推荐答案

根据最新稳定版文档 文档，道具 avatar 说它可以用作组件.

According to the latest stable version docs docs, the prop avatar says that it can be used as component.

如index.d.ts 文件

头像?:字符串 |ImageURISource |JSX.Element;

有很多方法可以解决这个问题，但最方便的方法是让所有元素响应式 使用头像组件 直接来自图书馆.

There are many ways to resolve this issue, but the convenient way, such that all the elements are responsive would be using Avatar component directly from the library.

 <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 组件的 props 根据要求

Then you get the liberty to apply the Avatar component's props as per the requirement

希望有帮助！

这篇关于如何使用 React-native-elements 的 ListItem 制作圆形头像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！