tiefen_space_app/screeens/StreamerPosts/index.jsx

import { View, Text, RefreshControl, TouchableOpacity } from "react-native";
import React, { useState, useEffect } from "react";
import Empty from "../../components/Empty";
import { useTailwind } from "tailwind-rn";
import baseRequest from "../../utils/baseRequest";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../utils/crypto";
import { FlashList } from "@shopify/flash-list";
import Post from "../../components/Post";

export default function StreamerPosts({ navigation, route }) {
  //获取当前时间
  const [currentTime, setCurrentTime] = useState();
  const getCurrentTime = async () => {
    setCurrentTime(Math.floor(new Date().getTime() / 1000));
  };

  //获取截止当前时间的动态数据
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
  const getData = async (type) => {
    if (!currentTime) return;

    //防止重复加载
    if (data.length === 0 && type === "bottom") return;
    if (type === "bottom" && offset === 0) return;

    if (!more) return;
    try {
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        mid: route.params.mid,
        ct_upper_bound: currentTime,
        offset: offset,
        limit: 4,
        ...base,
      });
      const _response = await fetch(
        `${apiUrl}/api/moment/list_by_mid?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            mid: route.params.mid,
            ct_upper_bound: currentTime,
            offset: offset,
            limit: 4,
            ...base,
          }),
        }
      );
      const _data = await _response.json();
      if (_data.ret === -1) {
        Toast.show({
          type: "error",
          text1: _data.msg,
          topOffset: 60,
        });
        return;
      }
      if (type === "top") {
        setData((prev) => _data.data.list);
      } else {
        setData((prev) => [...prev, ..._data.data.list]);
      }
      setOffset(_data.data.offset);
      setMore(_data.data.more);
    } catch (error) {
      console.error(error);
    }
  };

  //查看是否需要blur并获取当前时间和会员价格
  useEffect(() => {
    getCurrentTime();
  }, []);

  //当时间改变，获取新数据
  useEffect(() => {
    getData("top");
  }, [currentTime]);

  const tailwind = useTailwind();
  const renderItem = ({ item }) => (
    <View>
      <Post
        data={item}
        isOwn={true}
        tagElement={
          <View>
            {(item?.status === 3 || item?.status === 4) && (
              <View style={tailwind("flex flex-col items-start mt-2")}>
                <View
                  style={{
                    backgroundColor: "#3B69B8",
                    ...tailwind("py-1 px-2 rounded"),
                  }}
                >
                  <Text style={tailwind("text-white text-sm")}>审核中</Text>
                </View>
              </View>
            )}
            {(item?.status === 5 || item?.status === 6) && (
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("EditStreamerPost", { id: item.id })
                }
                style={tailwind("flex flex-col items-start mt-2")}
              >
                <View style={tailwind("py-1 px-2 bg-[#F53030] rounded")}>
                  <Text style={tailwind("text-white text-sm")}>
                    审核未通过，请
                    <Text style={{ textDecorationLine: "underline" }}>
                      重新编辑
                    </Text>
                  </Text>
                </View>
              </TouchableOpacity>
            )}
          </View>
        }
      />
    </View>
  );
  const [refreshing, setRefreshing] = useState(false);
  //下拉刷新
  const handleRefresh = async () => {
    setRefreshing(true);
    setOffset(0);
    setMore(1);
    await getCurrentTime();
    setRefreshing(false);
  };

  return (
    <View style={tailwind("flex-1")}>
      <FlashList
        data={data}
        renderItem={renderItem}
        estimatedItemSize={310}
        initialNumToRender={4}
        refreshControl={
          <RefreshControl
            colors={["#FF669E"]}
            tintColor="white"
            refreshing={refreshing}
            onRefresh={() => handleRefresh()}
          />
        }
        onEndReached={() => getData("bottom")}
        ListEmptyComponent={<Empty type="nodata" />}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}