tiefen_space_app/screeens/Messages/index.jsx

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