如何在React Native中显示多个用户头像

Question

如何在本机反应中显示这种类型的视图我已经尝试过这段代码，但没有得到任何结果。

import React from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';
const Avatar = ({ imageUrl }) => {
  return (
    <View style={styles.avatarContainer}>
      <Image source={{ uri: imageUrl }} style={styles.avatarImage} />
      {/* Add conditional logic to display count badge */}
      {/* For example, if more than 3 users, display count */}
    </View>
  );
};
const AvatarList = ({ users }) => {
  return (
    <View style={styles.avatarListContainer}>
      {users.map((user, index) => (
        <Avatar key={index} imageUrl={user.avatarUrl} />
      ))}
    </View>
  );
};
const styles = StyleSheet.create({
  avatarListContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatarContainer: {
    marginRight: 10,
  },
  avatarImage: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  countBadge: {
    backgroundColor: 'blue',
    borderRadius: 12,
    padding: 4,
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
});
export default AvatarList;

最后一个头像应该是其余用户的数量 任何人都可以帮助我任何包或代码可以帮助我实现这一目标

Answer 1

这是我找到的代码：

import { Text, SafeAreaView, StyleSheet,View } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <AvatarList/>
    </SafeAreaView>
  );
}
const Avatar = () => {
  return <View style={styles.avatar}></View>;
};

const AvatarList = () => {
  return (
    <View style={styles.avatarList}>
      <Avatar />
      <Avatar />
      <Avatar />
      <Avatar />
      <Avatar />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
avatarList: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    height: 50,
    width: 50,
    marginRight: -20,
    backgroundColor: 'gray',
    borderRadius: 25,
    borderWidth: 2,
    borderColor: 'white',
    shadowColor: '#999',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.3,
    shadowRadius: 15,
  },
});

可以将最后一个头像设为剩余数组的数量