132 lines
4.1 KiB
JavaScript
132 lines
4.1 KiB
JavaScript
import { View, Text, TouchableOpacity, Image, FlatList } from "react-native";
|
|
import React, { useState, useRef } from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { Icon, Badge } from "@rneui/themed";
|
|
import MessageCard from "../../components/MessageCard";
|
|
import Empty from "../../components/Empty";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { clearMessagesCache } from "../../utils/storeInfo";
|
|
import Toast from "react-native-toast-message";
|
|
|
|
export default function Messages() {
|
|
const navigation = useNavigation();
|
|
const tailwind = useTailwind();
|
|
const insets = useSafeAreaInsets();
|
|
//下拉刷新
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const handleRefresh = () => {
|
|
setRefreshing(true);
|
|
setTimeout(() => {
|
|
setRefreshing(false);
|
|
}, 2000);
|
|
};
|
|
//删除聊天框的时候禁用FlatList的滑动
|
|
const messageListRef = useRef(null);
|
|
//单个聊天框卡片
|
|
const renderItem = ({ item }) => (
|
|
<MessageCard data={item} listRef={messageListRef} />
|
|
);
|
|
|
|
const messagesList = [
|
|
{
|
|
head: "https://s2.loli.net/2023/09/14/7AoD2kQlrnNUPFS.jpg",
|
|
mid: 100002,
|
|
name: "波多野结衣",
|
|
latestContent: "开始上课！",
|
|
newMessagesNum: 2,
|
|
time: "17:28",
|
|
price: "100",
|
|
},
|
|
{
|
|
head: "https://s2.loli.net/2023/07/25/khuL1qfZAzbSCQa.png",
|
|
mid: 100003,
|
|
name: "拉姆蕾姆",
|
|
latestContent: "都是你爱看的！快来！",
|
|
newMessagesNum: 100,
|
|
time: "16:41",
|
|
price: "200",
|
|
},
|
|
];
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingTop: insets.top,
|
|
paddingBottom: insets.bottom,
|
|
paddingLeft: insets.left,
|
|
paddingRight: insets.right,
|
|
...tailwind("bg-white flex-1"),
|
|
}}
|
|
>
|
|
<View style={tailwind("p-4 flex-1")}>
|
|
<View style={tailwind("flex-row justify-between")}>
|
|
<Text style={tailwind("text-xl font-bold")}>消息</Text>
|
|
<TouchableOpacity>
|
|
<Icon
|
|
name="trash-outline"
|
|
type="ionicon"
|
|
color="#000000"
|
|
onPress={() => {
|
|
clearMessagesCache(999999);
|
|
Toast.show({
|
|
type: "success",
|
|
text1: "清除聊天记录成功",
|
|
topOffset: 60,
|
|
});
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={tailwind("flex-row justify-around my-4")}>
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
navigation.navigate("MessageDetail", {
|
|
mid: 10001,
|
|
name: "系统通知",
|
|
price: 0,
|
|
})
|
|
}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<Image
|
|
source={require("../../assets/images/icon_systemmessages.png")}
|
|
style={tailwind("w-14 h-14")}
|
|
/>
|
|
<Text style={tailwind("text-sm")}>系统通知</Text>
|
|
<Badge
|
|
status="error"
|
|
value={1}
|
|
containerStyle={{ position: "absolute", top: 0, right: 0 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
navigation.navigate("CallHistory", {
|
|
mid: 666666,
|
|
})
|
|
}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<Image
|
|
source={require("../../assets/images/icon_video.png")}
|
|
style={tailwind("w-14 h-14")}
|
|
/>
|
|
<Text style={tailwind("text-sm")}>视频记录</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={tailwind("flex-1")}>
|
|
<FlatList
|
|
ref={messageListRef}
|
|
data={messagesList}
|
|
renderItem={renderItem}
|
|
initialNumToRender={6}
|
|
refreshing={refreshing}
|
|
onRefresh={() => handleRefresh()}
|
|
ListEmptyComponent={<Empty type="message" />}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|