tiefen_space_app/screeens/Messages/index.jsx

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>
);
}