fd1ebbfdca
- MessageBubble: IMAGE renders actual <Image> with aspect ratio clamping (min 80, max screenW-120) - MessageBubble: VIDEO shows thumbnail with play overlay; AUDIO shows waveform + play/stop - MessageBubble: per-message sender avatar (letter fallback when no uri) - ConversationItem: show real avatar when available; pinned indicator; muted dot badge - ConversationListScreen: sort pinned conversations to top; long-press for pin/mute actions - ContactsScreen, UserSearchScreen, GroupMembersScreen: real avatar images with fallback - ProfileScreen: show real avatar image, tap to edit - EditProfileScreen: avatar upload via uploadFile() to file-service before saving profile - GroupSettingsScreen: real leaveGroup() call via SDK, removes user from group server-side - GroupListScreen, GroupMembersScreen: parse memberIds as JSON array (was comma-split) - SingleChatScreen: remove redundant handleLongPress (now handled inside MessageBubble) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
91 行
3.5 KiB
TypeScript
91 行
3.5 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react'
|
|
import {
|
|
View, Text, FlatList, StyleSheet, TouchableOpacity, SafeAreaView, ActivityIndicator, Alert, Image,
|
|
} from 'react-native'
|
|
import { useNavigation, useFocusEffect } from '@react-navigation/native'
|
|
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
|
|
import { ImSDK } from '@xuqm/rn-sdk'
|
|
import { demoApi, type UserProfile } from '../../api/demo'
|
|
import type { RootStackParams } from '../../navigation/types'
|
|
|
|
type Props = NativeStackScreenProps<RootStackParams, 'GroupMembers'>
|
|
|
|
export default function GroupMembersScreen({ route }: Props) {
|
|
const { groupId, groupName } = route.params
|
|
const navigation = useNavigation()
|
|
const [members, setMembers] = useState<UserProfile[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true)
|
|
try {
|
|
const groups = await ImSDK.listGroups()
|
|
const group = groups.find(g => g.id === groupId)
|
|
if (!group) return
|
|
let ids: string[]
|
|
try { ids = JSON.parse(group.memberIds || '[]') }
|
|
catch { ids = group.memberIds ? group.memberIds.split(',').filter(Boolean) : [] }
|
|
const profiles = await Promise.all(
|
|
ids.map(async id => {
|
|
const res = await demoApi.searchUsers(id)
|
|
return res.find(u => u.userId === id) ?? { userId: id, nickname: id, avatar: '', gender: 'UNKNOWN' as const, status: '' }
|
|
})
|
|
)
|
|
setMembers(profiles)
|
|
} catch {
|
|
/* silently fail */
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [groupId])
|
|
|
|
useFocusEffect(useCallback(() => { load() }, [load]))
|
|
|
|
return (
|
|
<SafeAreaView style={styles.root}>
|
|
{loading
|
|
? <ActivityIndicator style={{ flex: 1 }} color="#07C160" />
|
|
: (
|
|
<FlatList
|
|
data={members}
|
|
keyExtractor={u => u.userId}
|
|
renderItem={({ item }) => {
|
|
const letter = (item.nickname || item.userId).charAt(0).toUpperCase()
|
|
return (
|
|
<View style={styles.row}>
|
|
{item.avatar ? (
|
|
<Image source={{ uri: item.avatar }} style={styles.avatar} />
|
|
) : (
|
|
<View style={[styles.avatar, styles.avatarFallback]}>
|
|
<Text style={styles.avatarText}>{letter}</Text>
|
|
</View>
|
|
)}
|
|
<View style={styles.body}>
|
|
<Text style={styles.name}>{item.nickname}</Text>
|
|
<Text style={styles.uid}>@{item.userId}</Text>
|
|
</View>
|
|
</View>
|
|
)
|
|
}}
|
|
ItemSeparatorComponent={() => <View style={styles.sep} />}
|
|
ListHeaderComponent={<Text style={styles.count}>{members.length} 名成员</Text>}
|
|
/>
|
|
)
|
|
}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
root: { flex: 1, backgroundColor: '#f5f5f5' },
|
|
count: { padding: 12, fontSize: 13, color: '#888', backgroundColor: '#f5f5f5' },
|
|
row: { flexDirection: 'row', alignItems: 'center', padding: 12, backgroundColor: '#fff' },
|
|
avatar: { width: 44, height: 44, borderRadius: 8, marginRight: 12 },
|
|
avatarFallback: { backgroundColor: '#5856d6', alignItems: 'center', justifyContent: 'center' },
|
|
avatarText: { color: '#fff', fontSize: 17, fontWeight: '600' },
|
|
body: { flex: 1 },
|
|
name: { fontSize: 16, fontWeight: '500', color: '#111' },
|
|
uid: { fontSize: 13, color: '#888', marginTop: 2 },
|
|
sep: { height: StyleSheet.hairlineWidth, backgroundColor: '#e0e0e0', marginLeft: 68 },
|
|
})
|
