90 行
4.0 KiB
TypeScript
90 行
4.0 KiB
TypeScript
|
import React, { useEffect, useState } from 'react'
|
|||
|
|
import {
|
|||
|
|
View, Text, FlatList, StyleSheet, TouchableOpacity, SafeAreaView,
|
|||
|
|
TextInput, Alert,
|
|||
|
|
} from 'react-native'
|
|||
|
|
import { useNavigation } from '@react-navigation/native'
|
|||
|
|
import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
|
|||
|
|
import type { RootStackParams } from '../../navigation/types'
|
|||
|
|
import { demoApi, type UserProfile } from '../../api/demo'
|
|||
|
|
import { load, save, K } from '../../utils/storage'
|
|||
|
|
|
|||
|
|
type Nav = NativeStackNavigationProp<RootStackParams>
|
|||
|
|
|
|||
|
|
function ContactRow({ user, onPress }: { user: UserProfile; onPress(): void }) {
|
|||
|
|
const letter = (user.nickname || user.userId).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}>{user.nickname}</Text>
|
|||
|
|
<Text style={styles.uid}>@{user.userId}</Text>
|
|||
|
|
</View>
|
|||
|
|
<Text style={styles.arrow}>›</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ContactsScreen() {
|
|||
|
|
const navigation = useNavigation<Nav>()
|
|||
|
|
const [contacts, setContacts] = useState<UserProfile[]>([])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
load<UserProfile[]>(K.CONTACTS).then(c => { if (c) setContacts(c) })
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const openChat = (user: UserProfile) => {
|
|||
|
|
navigation.navigate('SingleChat', { targetId: user.userId, targetName: user.nickname, targetAvatar: user.avatar })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<SafeAreaView style={styles.root}>
|
|||
|
|
<View style={styles.header}>
|
|||
|
|
<Text style={styles.title}>通讯录</Text>
|
|||
|
|
<View style={styles.headerActions}>
|
|||
|
|
<TouchableOpacity onPress={() => navigation.navigate('GroupList')} style={styles.headerBtn}>
|
|||
|
|
<Text style={styles.headerBtnText}>群聊</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
<TouchableOpacity onPress={() => navigation.navigate('UserSearch')} style={styles.headerBtn}>
|
|||
|
|
<Text style={styles.headerBtnText}>添加</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
<FlatList
|
|||
|
|
data={contacts}
|
|||
|
|
keyExtractor={u => u.userId}
|
|||
|
|
renderItem={({ item }) => <ContactRow user={item} onPress={() => openChat(item)} />}
|
|||
|
|
ItemSeparatorComponent={() => <View style={styles.sep} />}
|
|||
|
|
ListEmptyComponent={
|
|||
|
|
<View style={styles.empty}>
|
|||
|
|
<Text style={styles.emptyText}>还没有联系人</Text>
|
|||
|
|
<TouchableOpacity onPress={() => navigation.navigate('UserSearch')}>
|
|||
|
|
<Text style={styles.emptyLink}>搜索添加</Text>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
</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: 20, fontWeight: '700', color: '#111' },
|
|||
|
|
headerActions: { flexDirection: 'row', gap: 12 },
|
|||
|
|
headerBtn: { paddingHorizontal: 12, paddingVertical: 6, backgroundColor: '#07C160', borderRadius: 6 },
|
|||
|
|
headerBtnText: { color: '#fff', fontSize: 13, fontWeight: '600' },
|
|||
|
|
row: { flexDirection: 'row', alignItems: 'center', padding: 12, backgroundColor: '#fff' },
|
|||
|
|
avatar: { width: 46, height: 46, borderRadius: 8, backgroundColor: '#07C160', alignItems: 'center', justifyContent: 'center', marginRight: 12 },
|
|||
|
|
avatarText: { color: '#fff', fontSize: 18, fontWeight: '600' },
|
|||
|
|
body: { flex: 1 },
|
|||
|
|
name: { fontSize: 16, fontWeight: '500', color: '#111' },
|
|||
|
|
uid: { 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 },
|
|||
|
|
emptyLink: { color: '#07C160', fontSize: 14, marginTop: 12 },
|
|||
|
|
})
|
