112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
import { View, Text, RefreshControl, TouchableOpacity } from "react-native";
|
|
import React, { useState, useEffect, useCallback } from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import Toast from "react-native-toast-message";
|
|
import Empty from "../../../components/Empty";
|
|
import { FlashList } from "@shopify/flash-list";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import SpaceCard from "../../../components/SpaceCard";
|
|
|
|
export default function SpaceList() {
|
|
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
|
|
|
const tailwind = useTailwind();
|
|
const insets = useSafeAreaInsets();
|
|
|
|
const navigation = useNavigation();
|
|
|
|
const data = [
|
|
{
|
|
mid: 11,
|
|
},
|
|
{
|
|
mid: 22,
|
|
},
|
|
{
|
|
mid: 33,
|
|
},
|
|
{
|
|
mid: 44,
|
|
},
|
|
];
|
|
|
|
const renderItem = ({ item }) => <SpaceCard data={data} />;
|
|
|
|
//数据为空时的组件
|
|
const EmptyComponent = useCallback(() => {
|
|
return (
|
|
<View style={tailwind("flex flex-col justify-center items-center")}>
|
|
<Empty type="nospace" />
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("Search")}
|
|
style={{
|
|
width: 190,
|
|
height: 46,
|
|
...tailwind(
|
|
"flex items-center justify-center bg-[#2E2E2E] mt-3 rounded-full"
|
|
),
|
|
}}
|
|
>
|
|
<Text style={tailwind("text-white text-base font-medium")}>
|
|
搜索空间
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("Stream")}
|
|
style={{
|
|
width: 190,
|
|
height: 46,
|
|
...tailwind(
|
|
"flex items-center justify-center bg-[#2E2E2E] mt-2 rounded-full"
|
|
),
|
|
}}
|
|
>
|
|
<Text style={tailwind("text-white text-base font-medium")}>
|
|
查看推荐
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}, []);
|
|
|
|
//下拉刷新
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const handleRefresh = async () => {
|
|
setRefreshing(true);
|
|
setRefreshing(false);
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingBottom: insets.bottom,
|
|
paddingLeft: insets.left,
|
|
paddingRight: insets.right,
|
|
...tailwind("flex-1"),
|
|
}}
|
|
>
|
|
<View style={tailwind("flex-1 px-2")}>
|
|
<FlashList
|
|
data={data}
|
|
keyExtractor={(item) => item.mid}
|
|
renderItem={renderItem}
|
|
estimatedItemSize={287}
|
|
initialNumToRender={12}
|
|
numColumns={2}
|
|
refreshControl={
|
|
<RefreshControl
|
|
colors={["#FF669E"]}
|
|
tintColor="white"
|
|
refreshing={refreshing}
|
|
onRefresh={() => handleRefresh()}
|
|
/>
|
|
}
|
|
onEndReached={() => {}}
|
|
ListEmptyComponent={EmptyComponent}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|