import {
View,
RefreshControl,
ActivityIndicator,
Animated,
Easing,
TouchableOpacity,
} from "react-native";
import React, { useState, useRef, useEffect } from "react";
import StreamerCard from "../../../components/StreamerCard";
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 { Svg, Path } from "react-native-svg";
export default function FeedStream() {
//获取新数据
const [data, setData] = useState([]);
const [isActivityIndicatorShow, setIsActivityIndicatorShow] = useState(true);
const [isFetching, setIsFetching] = useState(false);
const getData = async (type = 0) => {
//type 0-上滑 1-下拉 2-初始化
if (isFetching) return;
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
setIsFetching(true);
try {
const base = await baseRequest();
const signature = await generateSignature({
op_type: type,
...base,
});
const _response = await fetch(
`${apiUrl}/api/streamer/recomm_list?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
op_type: type,
...base,
}),
}
);
const _data = await _response.json();
if (_data.ret === -1) {
Toast.show({
type: "error",
text1: _data.msg,
topOffset: 60,
});
return;
}
if (type === 1) {
setData((prev) => _data.data.recomm_list);
setIsActivityIndicatorShow(true);
} else {
setData((prev) => [...prev, ..._data.data.recomm_list]);
if (_data.data.recomm_list.length === 0)
setIsActivityIndicatorShow(false);
}
} catch (error) {
console.error(error);
} finally {
setIsFetching(false);
}
};
//初始化加载
useEffect(() => {
getData(2);
}, []);
const tailwind = useTailwind();
const renderItem = ({ item }) => ;
const [refreshing, setRefreshing] = useState(false);
//刷新动画
const flatListRef = useRef(null);
const [rotateValue] = useState(new Animated.Value(0));
const startRotation = () => {
Animated.timing(rotateValue, {
toValue: 1,
duration: 500,
easing: Easing.linear,
useNativeDriver: true,
}).start(() => {
rotateValue.setValue(0);
});
};
const spin = rotateValue.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
//下拉刷新
const handleRefresh = async () => {
startRotation();
flatListRef.current.scrollToOffset({ animated: false, offset: 0 });
setRefreshing(true);
await getData(1);
setRefreshing(false);
};
return (
item.mid}
renderItem={renderItem}
estimatedItemSize={287}
initialNumToRender={4}
refreshControl={
handleRefresh()}
/>
}
onEndReached={() => getData(0)}
ListEmptyComponent={}
ListFooterComponent={
{isActivityIndicatorShow && data.length !== 0 && (
)}
}
/>
);
}