069f3454fe
- 实现完整的聊天界面UI组件，支持文本、图片、视频、音频、文件等多种消息类型 - 集成IM消息收发功能，实现消息气泡显示和用户头像占位符 - 添加媒体文件选择和拍摄功能，支持相册图片、视频及相机拍照录像 - 实现语音录制和播放功能，包含按住说话交互和权限处理 - 添加群组提及功能，支持@用户和提及候选列表显示 - 实现消息回复和引用功能，支持消息长按回复操作 - 添加本地消息搜索功能，支持搜索当前会话的历史消息 - 实现文件上传下载功能，集成FileSDK进行文件传输管理 - 添加应用更新检查功能，集成UpdateSDK支持版本更新 - 实现消息状态显示，包括发送、送达、已读等状态标识 - 添加群组已读人数统计，显示消息在群聊中的阅读情况 - 实现草稿保存和恢复功能，支持断点续聊体验 - 添加连接状态横幅，实时显示IM服务连接状态 - 实现滚动加载更多历史消息，优化大量消息的性能表现 - 添加多媒体文件下载保存功能，支持保存到应用专属目录
124 行
4.8 KiB
TypeScript
124 行
4.8 KiB
TypeScript
import React, { useCallback, useRef, useState } from 'react'
|
||
import {
|
||
View, Text, TextInput, FlatList, StyleSheet, TouchableOpacity, SafeAreaView,
|
||
ActivityIndicator,
|
||
} from 'react-native'
|
||
import { useNavigation, useFocusEffect } from '@react-navigation/native'
|
||
import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
|
||
import { ImSDK } from '@xuqm/rn-sdk'
|
||
import type { ImGroup } from '@xuqm/rn-sdk'
|
||
import type { RootStackParams } from '../../navigation/types'
|
||
|
||
type Nav = NativeStackNavigationProp<RootStackParams>
|
||
|
||
function parseMemberIds(memberIds: string): string[] {
|
||
try { return JSON.parse(memberIds || '[]') }
|
||
catch { return memberIds ? memberIds.split(',').filter(Boolean) : [] }
|
||
}
|
||
|
||
function GroupRow({ group, onPress }: { group: ImGroup; onPress(): void }) {
|
||
const letter = (group.name || 'G').charAt(0).toUpperCase()
|
||
return (
|
||
<TouchableOpacity style={styles.row} onPress={onPress} activeOpacity={0.7}>
|
||
<View style={styles.avatar}><Text style={styles.avatarText}>{letter}</Text></View>
|
||
<View style={styles.body}>
|
||
<Text style={styles.name}>{group.name}</Text>
|
||
<Text style={styles.memberCount}>{parseMemberIds(group.memberIds).length} 人</Text>
|
||
</View>
|
||
<Text style={styles.arrow}>›</Text>
|
||
</TouchableOpacity>
|
||
)
|
||
}
|
||
|
||
export default function GroupListScreen() {
|
||
const navigation = useNavigation<Nav>()
|
||
const [groups, setGroups] = useState<ImGroup[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [keyword, setKeyword] = useState('')
|
||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||
|
||
const fetchGroups = useCallback(async (text = keyword) => {
|
||
setLoading(true)
|
||
try {
|
||
const list = text.trim()
|
||
? await ImSDK.searchGroups(text.trim())
|
||
: await ImSDK.listGroups()
|
||
setGroups(list)
|
||
} catch {
|
||
/* silently fail */
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [keyword])
|
||
|
||
const handleSearch = useCallback((text: string) => {
|
||
setKeyword(text)
|
||
if (debounceRef.current) clearTimeout(debounceRef.current)
|
||
debounceRef.current = setTimeout(() => {
|
||
fetchGroups(text)
|
||
}, 300)
|
||
}, [fetchGroups])
|
||
|
||
useFocusEffect(useCallback(() => {
|
||
fetchGroups()
|
||
}, [fetchGroups]))
|
||
|
||
return (
|
||
<SafeAreaView style={styles.root}>
|
||
<View style={styles.header}>
|
||
<Text style={styles.title}>群聊</Text>
|
||
<TouchableOpacity style={styles.createBtn} onPress={() => navigation.navigate('CreateGroup')}>
|
||
<Text style={styles.createBtnText}>+ 创建</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View style={styles.searchBar}>
|
||
<TextInput
|
||
style={styles.searchInput}
|
||
placeholder="搜索群名称或群号"
|
||
value={keyword}
|
||
onChangeText={handleSearch}
|
||
clearButtonMode="while-editing"
|
||
/>
|
||
</View>
|
||
{loading
|
||
? <ActivityIndicator style={styles.loading} color="#07C160" />
|
||
: (
|
||
<FlatList
|
||
data={groups}
|
||
keyExtractor={g => g.id}
|
||
renderItem={({ item }) => (
|
||
<GroupRow
|
||
group={item}
|
||
onPress={() => navigation.navigate('GroupChat', { groupId: item.id, groupName: item.name })}
|
||
/>
|
||
)}
|
||
ItemSeparatorComponent={() => <View style={styles.sep} />}
|
||
ListEmptyComponent={<View style={styles.empty}><Text style={styles.emptyText}>还没有群聊</Text></View>}
|
||
/>
|
||
)
|
||
}
|
||
</SafeAreaView>
|
||
)
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
root: { flex: 1, backgroundColor: '#f5f5f5' },
|
||
header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16, backgroundColor: '#fff', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#e0e0e0' },
|
||
title: { fontSize: 18, fontWeight: '700', color: '#111' },
|
||
createBtn: { paddingHorizontal: 12, paddingVertical: 6, backgroundColor: '#07C160', borderRadius: 6 },
|
||
createBtnText: { color: '#fff', fontSize: 13, fontWeight: '600' },
|
||
searchBar: { margin: 12, backgroundColor: '#fff', borderRadius: 8, paddingHorizontal: 12, borderWidth: 1, borderColor: '#e0e0e0' },
|
||
searchInput: { fontSize: 15, paddingVertical: 10 },
|
||
loading: { flex: 1 },
|
||
row: { flexDirection: 'row', alignItems: 'center', padding: 12, backgroundColor: '#fff' },
|
||
avatar: { width: 46, height: 46, borderRadius: 8, backgroundColor: '#5856d6', alignItems: 'center', justifyContent: 'center', marginRight: 12 },
|
||
avatarText: { color: '#fff', fontSize: 18, fontWeight: '600' },
|
||
body: { flex: 1 },
|
||
name: { fontSize: 16, fontWeight: '500', color: '#111' },
|
||
memberCount: { fontSize: 13, color: '#888', marginTop: 2 },
|
||
arrow: { color: '#ccc', fontSize: 20 },
|
||
sep: { height: StyleSheet.hairlineWidth, backgroundColor: '#e0e0e0', marginLeft: 70 },
|
||
empty: { alignItems: 'center', paddingTop: 80 },
|
||
emptyText: { color: '#bbb', fontSize: 15 },
|
||
})
|
