Merge pull request '搜索功能支持搜索空间' (#13) from zone_search into main
Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_app/pulls/13
This commit is contained in:
commit
0772c7ecf3
|
|
@ -1,4 +1,4 @@
|
|||
import { View, Text, FlatList, Image as NativeImage } from "react-native";
|
||||
import { View, Text, Image as NativeImage, ScrollView } from "react-native";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useTailwind } from "tailwind-rn";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
|
@ -8,17 +8,17 @@ import Empty from "../../components/Empty";
|
|||
import Toast from "react-native-toast-message";
|
||||
import baseRequest from "../../utils/baseRequest";
|
||||
import { generateSignature } from "../../utils/crypto";
|
||||
import MyDivider from "../../components/MyDivider/index";
|
||||
|
||||
export default function Search({ navigation, route }) {
|
||||
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
||||
|
||||
const tailwind = useTailwind();
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const searchRef = useRef(null);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [result, setResult] = useState([]);
|
||||
const [streamers, setStreamers] = useState([]);
|
||||
const [zones, setZones] = useState([]);
|
||||
const [isloading, setIsloading] = useState(false);
|
||||
const updateSearch = (search) => {
|
||||
setSearch(search);
|
||||
|
|
@ -34,7 +34,8 @@ export default function Search({ navigation, route }) {
|
|||
//搜索框文本变化时进行搜索
|
||||
useEffect(() => {
|
||||
if (!search) {
|
||||
setResult([]);
|
||||
setStreamers([]);
|
||||
setZones([]);
|
||||
return;
|
||||
}
|
||||
const isNumeric = (str) => {
|
||||
|
|
@ -82,7 +83,11 @@ export default function Search({ navigation, route }) {
|
|||
return;
|
||||
}
|
||||
if (!ignore) {
|
||||
setResult(data.data.list);
|
||||
const zonesData = data.data.list.filter(
|
||||
(item) => item.zones.length > 0
|
||||
);
|
||||
setStreamers(data.data.list);
|
||||
setZones(zonesData);
|
||||
}
|
||||
setIsloading(false);
|
||||
} catch (error) {
|
||||
|
|
@ -96,8 +101,157 @@ export default function Search({ navigation, route }) {
|
|||
};
|
||||
}, [search]);
|
||||
|
||||
//搜索项组件
|
||||
const renderItem = ({ item }) => {
|
||||
//空间组件
|
||||
const ZoneItem = ({ item }) => {
|
||||
return (
|
||||
<ListItem
|
||||
onPress={() =>
|
||||
navigation.navigate("SpaceIntroduce", { mid: item?.mid })
|
||||
}
|
||||
containerStyle={tailwind("p-0 bg-[#07050A]")}
|
||||
>
|
||||
<View style={tailwind("flex flex-col flex-1")}>
|
||||
<View style={tailwind("flex-row py-3")}>
|
||||
<Image
|
||||
style={tailwind("w-12 h-12 rounded-full")}
|
||||
source={item?.avatar?.images[0]?.urls[0]}
|
||||
contentFit="cover"
|
||||
cachePolicy="disk"
|
||||
/>
|
||||
<View style={tailwind("ml-2 justify-around flex-1")}>
|
||||
<View style={tailwind("flex flex-row items-center")}>
|
||||
<Text
|
||||
style={tailwind("text-base text-white font-medium")}
|
||||
numberOfLines={1}
|
||||
ellipsizeMode="tail"
|
||||
>
|
||||
{item?.name}
|
||||
</Text>
|
||||
<View
|
||||
style={tailwind(
|
||||
"flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
|
||||
)}
|
||||
>
|
||||
<NativeImage
|
||||
source={require("../../assets/icon/12DP/ID.png")}
|
||||
/>
|
||||
<Text
|
||||
style={tailwind("text-white text-xs font-medium ml-0.5")}
|
||||
>
|
||||
{item?.user_id}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={tailwind("text-sm text-[#FFFFFF80]")}
|
||||
numberOfLines={1}
|
||||
ellipsizeMode="tail"
|
||||
>
|
||||
{item.zones[0].profile}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{zones.length === 1 && (
|
||||
<View
|
||||
style={tailwind("flex flex-col bg-[#FFFFFF1A] rounded-xl mb-2")}
|
||||
>
|
||||
<Text
|
||||
style={tailwind(
|
||||
"text-[#FFFFFF80] text-sm font-medium mt-2 ml-2"
|
||||
)}
|
||||
>
|
||||
Ta的动态·
|
||||
{item.zones[0].zone_moment_count > 99
|
||||
? "99+"
|
||||
: item.zones[0].zone_moment_count}
|
||||
{item.zones[0].image_count > 0 &&
|
||||
` | 图片·${
|
||||
item.zones[0].image_count > 99
|
||||
? "99+"
|
||||
: item.zones[0].image_count
|
||||
}`}
|
||||
{item.zones[0].video_count > 0 &&
|
||||
` | 视频·${
|
||||
item.zones[0].video_count > 99
|
||||
? "99+"
|
||||
: item.zones[0].video_count
|
||||
}`}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
aspectRatio: "1/1",
|
||||
...tailwind("flex flex-row"),
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexBasis: "66.66%",
|
||||
paddingTop: 8,
|
||||
paddingRight: 8,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
style={tailwind("rounded-xl w-full h-full")}
|
||||
source={item?.shorts?.videos[0]?.cover_urls[0]}
|
||||
contentFit="cover"
|
||||
cachePolicy="disk"
|
||||
/>
|
||||
<View
|
||||
style={tailwind(
|
||||
"flex absolute w-full h-full left-0 top-0 z-10 justify-center items-center"
|
||||
)}
|
||||
>
|
||||
<NativeImage
|
||||
source={require("../../assets/icon/others/play.png")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={tailwind("flex flex-col basis-1/3")}>
|
||||
<View
|
||||
style={{
|
||||
aspectRatio: "1/1",
|
||||
paddingRight: 0,
|
||||
paddingTop: 8,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
style={tailwind("rounded-xl w-full h-full")}
|
||||
source={item?.cover?.images[0]?.urls[0]}
|
||||
contentFit="cover"
|
||||
cachePolicy="disk"
|
||||
/>
|
||||
</View>
|
||||
{item.album.images.map((_item, index) => {
|
||||
if (index > 1) return;
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
aspectRatio: "1/1",
|
||||
paddingRight: 0,
|
||||
paddingTop: 8,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
style={tailwind("rounded-xl w-full h-full")}
|
||||
source={_item?.urls[0]}
|
||||
contentFit="cover"
|
||||
cachePolicy="disk"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ListItem>
|
||||
);
|
||||
};
|
||||
|
||||
//主播组件
|
||||
const StreamerItem = ({ item }) => {
|
||||
return (
|
||||
<ListItem
|
||||
onPress={() =>
|
||||
|
|
@ -105,7 +259,6 @@ export default function Search({ navigation, route }) {
|
|||
mid: item.mid,
|
||||
})
|
||||
}
|
||||
bottomDivider
|
||||
containerStyle={tailwind("p-0 bg-[#07050A]")}
|
||||
>
|
||||
<View style={tailwind("flex-1")}>
|
||||
|
|
@ -113,7 +266,6 @@ export default function Search({ navigation, route }) {
|
|||
<Image
|
||||
style={tailwind("w-12 h-12 rounded-full")}
|
||||
source={item?.avatar?.images[0]?.urls[0]}
|
||||
placeholder={blurhash}
|
||||
contentFit="cover"
|
||||
transition={1000}
|
||||
cachePolicy="disk"
|
||||
|
|
@ -190,14 +342,28 @@ export default function Search({ navigation, route }) {
|
|||
value={search}
|
||||
/>
|
||||
</View>
|
||||
<View style={tailwind("flex-1 px-4")}>
|
||||
<FlatList
|
||||
data={result}
|
||||
renderItem={renderItem}
|
||||
initialNumToRender={20}
|
||||
ListEmptyComponent={<Empty type={search ? "search" : "nodata"} />}
|
||||
/>
|
||||
</View>
|
||||
<ScrollView style={tailwind("flex-1 px-4")}>
|
||||
{zones.length > 0 && (
|
||||
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
||||
空间
|
||||
</Text>
|
||||
)}
|
||||
{zones?.map((item, index) => (
|
||||
<ZoneItem key={index} item={item} />
|
||||
))}
|
||||
{zones.length > 0 && <MyDivider style={tailwind("my-2")} />}
|
||||
{streamers.length > 0 && (
|
||||
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
||||
用户
|
||||
</Text>
|
||||
)}
|
||||
{streamers?.map((item, index) => (
|
||||
<StreamerItem key={index} item={item} />
|
||||
))}
|
||||
{zones.length === 0 && streamers.length === 0 && (
|
||||
<Empty type={search ? "search" : "nodata"} />
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue