tiefen_space_app/screeens/Search/index.jsx

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";
import { SearchBar, ListItem, Icon } from "@rneui/themed";
import { Image } from "expo-image";
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 tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  const searchRef = useRef(null);

  const [search, setSearch] = useState("");
  const [streamers, setStreamers] = useState([]);
  const [zones, setZones] = useState([]);
  const [isloading, setIsloading] = useState(false);
  const updateSearch = (search) => {
    setSearch(search);
    if (!search) return;
    setIsloading(true);
  };

  //进入页面默认focus
  useEffect(() => {
    searchRef.current.focus();
  }, []);

  //搜索框文本变化时进行搜索
  useEffect(() => {
    if (!search) {
      setStreamers([]);
      setZones([]);
      return;
    }
    const isNumeric = (str) => {
      return /^\d+$/.test(str);
    };
    const getResult = async () => {
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const isSearchInt = isNumeric(search);
      let api;
      let querryParams;
      if (isSearchInt) {
        api = "/api/streamer/list_ext_fuzzily_by_user_id";
        querryParams = { user_id: parseInt(search, 10) };
      } else {
        api = "/api/streamer/list_ext_fuzzily_by_name";
        querryParams = { name: search };
      }
      try {
        const base = await baseRequest();
        const signature = await generateSignature({
          ...base,
          ...querryParams,
          offset: 0,
          limit: 20,
        });
        const response = await fetch(`${apiUrl}${api}?signature=${signature}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...base,
            ...querryParams,
            offset: 0,
            limit: 20,
          }),
        });
        const data = await response.json();
        if (data.ret === -1) {
          Toast.show({
            type: "error",
            text1: data.msg,
            topOffset: 60,
          });
          return;
        }
        if (!ignore) {
          const zonesData = data.data.list.filter(
            (item) => item.zones.length > 0
          );
          setStreamers(data.data.list);
          setZones(zonesData);
        }
        setIsloading(false);
      } catch (error) {
        console.error(error);
      }
    };
    let ignore = false;
    getResult();
    return () => {
      ignore = true;
    };
  }, [search]);

  //空间组件
  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={() =>
          navigation.navigate("StreamerProfile", {
            mid: item.mid,
          })
        }
        containerStyle={tailwind("p-0 bg-[#07050A]")}
      >
        <View style={tailwind("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"
              transition={1000}
              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.bio}
              </Text>
            </View>
          </View>
        </View>
      </ListItem>
    );
  };

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <View style={tailwind("flex-row px-2 items-center")}>
        <Icon
          type="ionicon"
          name="chevron-back"
          size={32}
          color="white"
          onPress={() => navigation.goBack()}
        />
        <SearchBar
          ref={searchRef}
          containerStyle={tailwind("flex-1 bg-[#07050A]")}
          inputContainerStyle={tailwind("h-10 bg-[#FFFFFF1A]")}
          inputStyle={tailwind("text-white")}
          placeholder="搜索Ta的昵称或id"
          platform="ios"
          cancelButtonProps={tailwind("text-[#FF669E]")}
          cancelButtonTitle="清空"
          clearIcon={() => <></>}
          searchIcon={() => <></>}
          showLoading={isloading}
          onChangeText={updateSearch}
          value={search}
        />
      </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>
  );
}