tiefen_space_app/screeens/Posts/index.jsx

import {
  View,
  TouchableOpacity,
  useWindowDimensions,
  Image as NativeImage,
  Animated,
} from "react-native";
import React, { useState, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import FeedPosts from "./FeedPosts";
import FollowPosts from "./FollowPosts";
import { get, save } from "../../utils/storeInfo";
import { useFocusEffect } from "@react-navigation/native";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
import Toast from "react-native-toast-message";
import { TabView, SceneMap, TabBar } from "react-native-tab-view";

export default function Posts({ navigation }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  //每次focus都更新一次数据，查看会员状态是否改变
  const [blur, setBlur] = useState(true);
  useFocusEffect(
    useCallback(() => {
      const getData = async () => {
        //获取环境变量
        const apiUrl = process.env.EXPO_PUBLIC_API_URL;
        const account = await get("account");
        const base = await baseRequest();
        const signature = await generateSignature({
          ...base,
          mid: account.mid,
        });
        try {
          //获取账号基本信息
          const accountResponse = await fetch(
            `${apiUrl}/api/account/list_by_mid?signature=${signature}`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                ...base,
                mid: account.mid,
              }),
            }
          );
          const accountData = await accountResponse.json();
          if (accountData.ret === -1) {
            Toast.show({
              type: "error",
              text1: accountData.msg,
              topOffset: 60,
            });
            return;
          }
          const role = accountData.data.account.role;
          const isVip = accountData.data.account.is_a_member;
          if (role !== 0 || isVip === 1) {
            setBlur(false);
          } else {
            setBlur(true);
          }
          await save("account", accountData.data.account);
        } catch (error) {
          console.error(error);
        }
      };
      getData();
    }, [])
  );

  //tab组件相关
  const layout = useWindowDimensions();
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    { key: "feed", title: "推荐" },
    { key: "follow", title: "关注" },
  ]);

  const renderScene = useCallback(
    SceneMap({
      feed: () => <FeedPosts blur={blur} />,
      follow: () => <FollowPosts blur={blur} />,
    }),
    [blur]
  );

  const renderIndicator = useCallback((props) => {
    const { position, navigationState, getTabWidth } = props;
    const inputRange = [0, 1];
    const translateX = position.interpolate({
      inputRange: inputRange,
      outputRange: inputRange.map((x) => {
        return x * getTabWidth(navigationState.index);
      }),
    });
    return (
      <Animated.View
        style={{
          width: `${100 / navigationState.routes.length}%`,
          transform: [
            {
              translateX,
            },
          ],
          paddingBottom: 5,
          ...tailwind("flex flex-1 items-center justify-end"),
        }}
      >
        <NativeImage
          source={require("../../assets/icon/others/tabindicator.png")}
        />
      </Animated.View>
    );
  }, []);

  const renderTabBar = useCallback(
    (props) => (
      <View style={tailwind("flex flex-row items-center")}>
        <TabBar
          {...props}
          activeColor="#FFFFFF"
          inactiveColor="#FFFFFF80"
          style={tailwind("bg-transparent flex-1")}
          labelStyle={tailwind("text-2xl font-medium")}
          tabStyle={{ width: "auto" }}
          renderIndicator={renderIndicator}
        />
        <TouchableOpacity
          style={tailwind(
            "flex items-center justify-center w-9 h-9 mr-4 bg-[#FFFFFF1A] rounded-full"
          )}
          onPress={() => navigation.navigate("Search")}
        >
          <NativeImage source={require("../../assets/icon/32DP/search.png")} />
        </TouchableOpacity>
      </View>
    ),
    []
  );

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex flex-1"),
      }}
    >
      <TabView
        navigationState={{ index, routes }}
        swipeEnabled={true}
        renderScene={renderScene}
        renderTabBar={renderTabBar}
        onIndexChange={setIndex}
        initialLayout={{ width: layout.width }}
      />
    </View>
  );
}