更换所有Tab组件；将所有缺省图设置为nodata；删除旧缺省图

2024-04-24 18:58:29 +08:00 · 2024-04-24 18:58:29 +08:00 · 41f355c540
parent d74ed4298d
commit 41f355c540
16 changed files with 486 additions and 435 deletions
--- a/assets/images/icon_emptydata.png
+++ b/assets/images/icon_emptydata.png
--- a/assets/images/icon_emptyinternet.png
+++ b/assets/images/icon_emptyinternet.png
--- a/assets/images/icon_emptylocation.png
+++ b/assets/images/icon_emptylocation.png
--- a/assets/images/icon_emptymessage.png
+++ b/assets/images/icon_emptymessage.png
--- a/assets/images/icon_emptypost.png
+++ b/assets/images/icon_emptypost.png
--- a/assets/images/icon_emptysearch.png
+++ b/assets/images/icon_emptysearch.png
--- a/components/Empty/index.jsx
+++ b/components/Empty/index.jsx
@ -7,17 +7,17 @@ export default function Empty({ type }) {
  const source = (type) => {
    switch (type) {
      case "post":
-        return require("../../assets/images/icon_emptypost.png");
+        return require("../../assets/icon/others/nodata.png");
      case "friendship":
-        return require("../../assets/images/icon_emptypost.png");
+        return require("../../assets/icon/others/nodata.png");
      case "location":
-        return require("../../assets/images/icon_emptylocation.png");
+        return require("../../assets/icon/others/nodata.png");
      case "message":
-        return require("../../assets/images/icon_emptymessage.png");
+        return require("../../assets/icon/others/nodata.png");
      case "search":
-        return require("../../assets/images/icon_emptysearch.png");
+        return require("../../assets/icon/others/nodata.png");
      case "internet":
-        return require("../../assets/images/icon_emptyinternet.png");
+        return require("../../assets/icon/others/nodata.png");
      case "nodata":
        return require("../../assets/icon/others/nodata.png");
      case "nospace":
@ -27,11 +27,11 @@ export default function Empty({ type }) {
  const text = (type) => {
    switch (type) {
      case "post":
-        return "还没有动态哦～快去邂逅女神吧！";
+        return "还没有动态哦～快去与Ta邂逅吧！";
      case "friendship":
        return "Ta都等急了！行动起来！";
      case "location":
-        return "打开位置权限，邂逅同城女神吧～";
+        return "打开位置权限，邂逅同城的Ta吧～";
      case "message":
        return "犹豫就会败北！爱要勇敢说出来！";
      case "search":
--- a/screeens/Login/index.jsx
+++ b/screeens/Login/index.jsx
@ -3,23 +3,81 @@ import {
  Keyboard,
  TouchableWithoutFeedback,
  Dimensions,
+  Animated,
+  useWindowDimensions,
+  Image as NativeImage,
 } from "react-native";
-import React, { useState, useEffect } from "react";
-import { Tab, TabView } from "@rneui/themed";
+import React, { useState, useCallback } from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTailwind } from "tailwind-rn";
 import PasswordLogin from "./PasswordLogin";
 import PhoneNumLogin from "./PhoneNumLogin";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";

 export default function Login() {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
-  const [index, setIndex] = useState(0);

-  //修复ios使用了tab组件闪退问题
-  const [indicatorX, setIndicatorX] = useState(0);
-  const windowWidth = Dimensions.get("window").width;
-  const tabWidth = windowWidth / 2;
+  //tab组件相关
+  const layout = useWindowDimensions();
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: "phoneNumLogin", title: "验证码登录" },
+    { key: "passwordLogin", title: "账号密码登陆" },
+  ]);
+
+  const renderScene = useCallback(
+    SceneMap({
+      phoneNumLogin: () => <PhoneNumLogin />,
+      passwordLogin: () => <PasswordLogin />,
+    }),
+    []
+  );
+
+  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-xl font-medium")}
+          renderIndicator={renderIndicator}
+        />
+      </View>
+    ),
+    []
+  );

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
@ -32,56 +90,15 @@ export default function Login() {
          ...tailwind("flex flex-1"),
        }}
      >
-        {/* tab栏 */}
-        <Tab
-          value={index}
-          onChange={(e) => {
-            Keyboard.dismiss();
-            setIndex(e);
-            setIndicatorX(e * tabWidth);
-          }}
-          dense
-          indicatorStyle={{
-            ...tailwind("bg-[#FF7DCB] h-1 w-20 ml-[3.2rem] rounded-full"),
-            transform: [{ translateX: indicatorX }],
-          }}
-          style={tailwind("mt-32")}
-        >
-          <Tab.Item
-            titleStyle={
-              index === 0
-                ? tailwind("text-white font-medium text-xl")
-                : tailwind("text-[#FFFFFF80] text-xl font-medium")
-            }
-          >
-            验证码登陆
-          </Tab.Item>
-          <Tab.Item
-            titleStyle={
-              index === 1
-                ? tailwind("text-white font-medium text-xl")
-                : tailwind("text-[#FFFFFF80] text-xl font-medium")
-            }
-          >
-            账号密码登陆
-          </Tab.Item>
-        </Tab>
        <TabView
-          value={index}
-          onChange={(e) => {
-            setIndex(e);
-            setIndicatorX(e * tabWidth);
-          }}
-          animationType="spring"
-          disableSwipe
-        >
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <PhoneNumLogin />
-          </TabView.Item>
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <PasswordLogin />
-          </TabView.Item>
-        </TabView>
+          navigationState={{ index, routes }}
+          swipeEnabled={true}
+          renderScene={renderScene}
+          renderTabBar={renderTabBar}
+          onIndexChange={setIndex}
+          initialLayout={{ width: layout.width }}
+          style={tailwind("mt-32")}
+        />
      </View>
    </TouchableWithoutFeedback>
  );
--- a/screeens/My/index.jsx
+++ b/screeens/My/index.jsx
@ -433,27 +433,6 @@ export default function My({ navigation }) {
                  />
                </TouchableOpacity>
              )}
-              {/* {data?.streamer_ext?.zones && (
-                <TouchableOpacity
-                  onPress={() =>
-                    navigation.navigate("StreamerSpace", { mid: data?.mid })
-                  }
-                  style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
-                >
-                  <NativeImage
-                    source={require("../../assets/icon/others/space.png")}
-                  />
-                  <Text style={tailwind("text-base text-white ml-2 flex-1")}>
-                    我的空间
-                  </Text>
-                  <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
-                    创作者功能
-                  </Text>
-                  <NativeImage
-                    source={require("../../assets/icon/32DP/smalllink.png")}
-                  />
-                </TouchableOpacity>
-              )} */}
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("StreamerPosts", { mid: data?.mid })
--- a/screeens/Posts/index.jsx
+++ b/screeens/Posts/index.jsx
@ -1,13 +1,13 @@
 import {
  View,
  TouchableOpacity,
+  useWindowDimensions,
  Image as NativeImage,
-  Dimensions,
+  Animated,
 } from "react-native";
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Tab, TabView } from "@rneui/themed";
 import FeedPosts from "./FeedPosts";
 import FollowPosts from "./FollowPosts";
 import { get, save } from "../../utils/storeInfo";
@ -15,29 +15,11 @@ 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();
-  const [index, setIndex] = useState(0);
-
-  //修复ios使用了tab组件闪退问题
-  const [indicatorX, setIndicatorX] = useState(0);
-  const windowWidth = Dimensions.get("window").width;
-  const tabWidth = windowWidth / 5;
-
-  //根据用户是否是主播来决定是否展示发帖按钮
-  const [isStreamer, setIsStreamer] = useState(false);
-  useEffect(() => {
-    const checkRole = async () => {
-      const account = await get("account");
-      const role = account.role;
-      if (role === 3) {
-        setIsStreamer(true);
-      }
-    };
-    checkRole();
-  }, []);

  //每次focus都更新一次数据，查看会员状态是否改变
  const [blur, setBlur] = useState(true);
@ -84,11 +66,6 @@ export default function Posts({ navigation }) {
            setBlur(true);
          }
          await save("account", accountData.data.account);
-          if (role === 3) {
-            setIsStreamer(true);
-          } else {
-            setIsStreamer(false);
-          }
        } catch (error) {
          console.error(error);
        }
@ -97,6 +74,76 @@ export default function Posts({ navigation }) {
    }, [])
  );

+  //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={{
@ -106,67 +153,14 @@ export default function Posts({ navigation }) {
        ...tailwind("flex flex-1"),
      }}
    >
-      <View style={tailwind("flex pb-1 flex-row justify-between items-center")}>
-        <View style={tailwind("flex w-2/5")}>
-          <Tab
-            value={index}
-            onChange={(e) => {
-              setIndex(e);
-              setIndicatorX(e * tabWidth);
-            }}
-            dense
-            indicatorStyle={{
-              ...tailwind("h-1 w-10 ml-4 rounded-full"),
-              backgroundColor: "#FF7DCB",
-              transform: [{ translateX: indicatorX }],
-            }}
-          >
-            <Tab.Item
-              titleStyle={
-                index === 0
-                  ? tailwind("text-white text-2xl font-medium")
-                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
-              }
-            >
-              推荐
-            </Tab.Item>
-            <Tab.Item
-              titleStyle={
-                index === 1
-                  ? tailwind("text-white text-2xl font-medium")
-                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
-              }
-            >
-              关注
-            </Tab.Item>
-          </Tab>
-        </View>
-        <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>
-      <View style={tailwind("flex flex-1 w-full")}>
-        <TabView
-          value={index}
-          onChange={(e) => {
-            setIndex(e);
-            setIndicatorX(e * tabWidth);
-          }}
-          animationType="spring"
-        >
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <FeedPosts blur={blur} />
-          </TabView.Item>
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <FollowPosts blur={blur} />
-          </TabView.Item>
-        </TabView>
-      </View>
+      <TabView
+        navigationState={{ index, routes }}
+        swipeEnabled={true}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={setIndex}
+        initialLayout={{ width: layout.width }}
+      />
    </View>
  );
 }
--- a/screeens/Relationship/index.jsx
+++ b/screeens/Relationship/index.jsx
@ -1,19 +1,81 @@
-import { View, Dimensions } from "react-native";
-import React, { useState } from "react";
+import {
+  View,
+  Animated,
+  useWindowDimensions,
+  Image as NativeImage,
+} from "react-native";
+import React, { useState, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Tab, TabView } from "@rneui/themed";
 import Follows from "./Follows";
 import Fans from "./Fans";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";

 export default function Relationship({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
-  const [index, setIndex] = useState(route.params.tab);
-  //修复ios使用了tab组件闪退问题
-  const windowWidth = Dimensions.get("window").width;
-  const tabWidth = windowWidth / 2;
-  const [indicatorX, setIndicatorX] = useState(route.params.tab * tabWidth);
+
+  //tab组件相关
+  const layout = useWindowDimensions();
+  const [index, setIndex] = useState(route.params?.tab ? route.params?.tab : 0);
+  const [routes] = useState([
+    { key: "follows", title: "关注" },
+    { key: "fans", title: "粉丝" },
+  ]);
+
+  const renderScene = useCallback(
+    SceneMap({
+      follows: () => <Follows />,
+      fans: () => <Fans />,
+    }),
+    []
+  );
+
+  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: 12,
+          ...tailwind("flex flex-1 items-center justify-end"),
+        }}
+      >
+        <NativeImage
+          source={require("../../assets/icon/others/pinkline.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-lg font-medium")}
+          renderIndicator={renderIndicator}
+        />
+      </View>
+    ),
+    []
+  );
+
  return (
    <View
      style={{
@ -22,58 +84,14 @@ export default function Relationship({ navigation, route }) {
        ...tailwind("flex flex-1"),
      }}
    >
-      <View style={tailwind("flex pb-1 flex-row justify-between items-center")}>
-        <View style={tailwind("flex w-full")}>
-          <Tab
-            value={index}
-            onChange={(e) => {
-              setIndex(e);
-              setIndicatorX(e * tabWidth);
-            }}
-            dense
-            indicatorStyle={{
-              ...tailwind("bg-[#FF7DCB] rounded-full"),
-              transform: [{ translateX: indicatorX }],
-            }}
-          >
-            <Tab.Item
-              titleStyle={
-                index === 0
-                  ? tailwind("text-white font-medium text-base")
-                  : tailwind("text-[#FFFFFF80] text-base font-medium")
-              }
-            >
-              关注
-            </Tab.Item>
-            <Tab.Item
-              titleStyle={
-                index === 1
-                  ? tailwind("text-white font-medium text-base")
-                  : tailwind("text-[#FFFFFF80] text-base font-medium")
-              }
-            >
-              粉丝
-            </Tab.Item>
-          </Tab>
-        </View>
-      </View>
-      <View style={tailwind("flex flex-1 w-full")}>
-        <TabView
-          value={index}
-          onChange={(e) => {
-            setIndex(e);
-            setIndicatorX(e * tabWidth);
-          }}
-          animationType="spring"
-        >
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <Follows />
-          </TabView.Item>
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <Fans />
-          </TabView.Item>
-        </TabView>
-      </View>
+      <TabView
+        navigationState={{ index, routes }}
+        swipeEnabled={true}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={setIndex}
+        initialLayout={{ width: layout.width }}
+      />
    </View>
  );
 }
--- a/screeens/Space/index.jsx
+++ b/screeens/Space/index.jsx
@ -2,24 +2,89 @@ import {
  View,
  TouchableOpacity,
  Image as NativeImage,
-  Dimensions,
+  Animated,
+  useWindowDimensions,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Tab, TabView } from "@rneui/themed";
 import SpaceList from "./SpaceList";
 import SpacePosts from "./SpacePosts";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";

 export default function Space({ navigation }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
-  const [index, setIndex] = useState(0);

-  //修复ios使用了tab组件闪退问题
-  const [indicatorX, setIndicatorX] = useState(0);
-  const windowWidth = Dimensions.get("window").width;
-  const tabWidth = windowWidth / 5;
+  //tab组件相关
+  const layout = useWindowDimensions();
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: "list", title: "空间" },
+    { key: "post", title: "动态" },
+  ]);
+
+  const renderScene = useCallback(
+    SceneMap({
+      list: () => <SpaceList />,
+      post: () => <SpacePosts />,
+    }),
+    []
+  );
+
+  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
@ -30,67 +95,14 @@ export default function Space({ navigation }) {
        ...tailwind("flex flex-1"),
      }}
    >
-      <View style={tailwind("flex pb-1 flex-row justify-between items-center")}>
-        <View style={tailwind("flex w-2/5")}>
-          <Tab
-            value={index}
-            onChange={(e) => {
-              setIndex(e);
-              setIndicatorX(e * tabWidth);
-            }}
-            dense
-            indicatorStyle={{
-              ...tailwind("h-1 w-10 ml-4 rounded-full"),
-              backgroundColor: "#FF7DCB",
-              transform: [{ translateX: indicatorX }],
-            }}
-          >
-            <Tab.Item
-              titleStyle={
-                index === 0
-                  ? tailwind("text-white text-2xl font-medium")
-                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
-              }
-            >
-              空间
-            </Tab.Item>
-            <Tab.Item
-              titleStyle={
-                index === 1
-                  ? tailwind("text-white text-2xl font-medium")
-                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
-              }
-            >
-              动态
-            </Tab.Item>
-          </Tab>
-        </View>
-        <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>
-      <View style={tailwind("flex flex-1 w-full")}>
-        <TabView
-          value={index}
-          onChange={(e) => {
-            setIndex(e);
-            setIndicatorX(e * tabWidth);
-          }}
-          animationType="spring"
-        >
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <SpaceList />
-          </TabView.Item>
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <SpacePosts />
-          </TabView.Item>
-        </TabView>
-      </View>
+      <TabView
+        navigationState={{ index, routes }}
+        swipeEnabled={true}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={setIndex}
+        initialLayout={{ width: layout.width }}
+      />
    </View>
  );
 }
--- a/screeens/SpaceSetting/SpaceMember/index.jsx
+++ b/screeens/SpaceSetting/SpaceMember/index.jsx
@ -1,12 +1,10 @@
 import {
  View,
-  Text,
-  TouchableOpacity,
  useWindowDimensions,
  Animated,
  Image as NativeImage,
 } from "react-native";
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { TabView, SceneMap, TabBar } from "react-native-tab-view";
--- a/screeens/Stream/index.jsx
+++ b/screeens/Stream/index.jsx
@ -2,24 +2,89 @@ import {
  View,
  TouchableOpacity,
  Image as NativeImage,
-  Dimensions,
+  Animated,
+  useWindowDimensions,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Tab, TabView } from "@rneui/themed";
 import FeedStream from "./FeedStream";
 import FollowStream from "./FollowStream";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";

 export default function Stream({ navigation }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
-  const [index, setIndex] = useState(0);

-  //修复ios使用了tab组件闪退问题
-  const [indicatorX, setIndicatorX] = useState(0);
-  const windowWidth = Dimensions.get("window").width;
-  const tabWidth = windowWidth / 5;
+  //tab组件相关
+  const layout = useWindowDimensions();
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: "feed", title: "推荐" },
+    { key: "follow", title: "关注" },
+  ]);
+
+  const renderScene = useCallback(
+    SceneMap({
+      feed: () => <FeedStream />,
+      follow: () => <FollowStream />,
+    }),
+    []
+  );
+
+  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
@ -30,67 +95,14 @@ export default function Stream({ navigation }) {
        ...tailwind("flex flex-1"),
      }}
    >
-      <View style={tailwind("flex pb-1 flex-row justify-between items-center")}>
-        <View style={tailwind("flex w-2/5")}>
-          <Tab
-            value={index}
-            onChange={(e) => {
-              setIndex(e);
-              setIndicatorX(e * tabWidth);
-            }}
-            dense
-            indicatorStyle={{
-              ...tailwind("h-1 w-10 ml-4 rounded-full"),
-              backgroundColor: "#FF7DCB",
-              transform: [{ translateX: indicatorX }],
-            }}
-          >
-            <Tab.Item
-              titleStyle={
-                index === 0
-                  ? tailwind("text-white text-2xl font-medium")
-                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
-              }
-            >
-              推荐
-            </Tab.Item>
-            <Tab.Item
-              titleStyle={
-                index === 1
-                  ? tailwind("text-white text-2xl font-medium")
-                  : { ...tailwind("text-2xl font-medium"), color: "#FFFFFF80" }
-              }
-            >
-              关注
-            </Tab.Item>
-          </Tab>
-        </View>
-        <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>
-      <View style={tailwind("flex flex-1 w-full")}>
-        <TabView
-          value={index}
-          onChange={(e) => {
-            setIndex(e);
-            setIndicatorX(e * tabWidth);
-          }}
-          animationType="spring"
-        >
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <FeedStream />
-          </TabView.Item>
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <FollowStream />
-          </TabView.Item>
-        </TabView>
-      </View>
+      <TabView
+        navigationState={{ index, routes }}
+        swipeEnabled={true}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={setIndex}
+        initialLayout={{ width: layout.width }}
+      />
    </View>
  );
 }
--- a/screeens/StreamerSpace/index.jsx
+++ b/screeens/StreamerSpace/index.jsx
@ -202,8 +202,10 @@ export default function StreamerSpace({ navigation, route }) {
    (props) => (
      <TabBar
        {...props}
+        activeColor="#FFFFFF"
+        inactiveColor="#FFFFFF80"
        style={tailwind("bg-transparent")}
-        labelStyle={tailwind("text-base font-medium")}
+        labelStyle={tailwind("text-lg font-medium")}
        renderIndicator={renderIndicator}
      />
    ),
--- a/screeens/WechatWaitingToAdd/index.jsx
+++ b/screeens/WechatWaitingToAdd/index.jsx
@ -1,19 +1,82 @@
-import { View, Dimensions } from "react-native";
-import React, { useState } from "react";
+import {
+  View,
+  Dimensions,
+  Animated,
+  useWindowDimensions,
+  Image as NativeImage,
+} from "react-native";
+import React, { useState, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Tab, TabView } from "@rneui/themed";
 import AlreadyAddWechat from "./AlreadyAddWechat";
 import HaveNotAddWechat from "./HaveNotAddWechat";
+import { TabView, SceneMap, TabBar } from "react-native-tab-view";

 export default function WechatWaitingToAdd({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
-  const [index, setIndex] = useState(route.params?.tab);
-  //修复ios使用了tab组件闪退问题
-  const [indicatorX, setIndicatorX] = useState(0);
-  const windowWidth = Dimensions.get("window").width;
-  const tabWidth = windowWidth / 2;
+
+  //tab组件相关
+  const layout = useWindowDimensions();
+  const [index, setIndex] = useState(route.params?.tab ? route.params?.tab : 0);
+  const [routes] = useState([
+    { key: "haveNotAddWechat", title: "待添加" },
+    { key: "alreadyAddWechat", title: "已完成" },
+  ]);
+
+  const renderScene = useCallback(
+    SceneMap({
+      haveNotAddWechat: () => <HaveNotAddWechat />,
+      alreadyAddWechat: () => <AlreadyAddWechat />,
+    }),
+    []
+  );
+
+  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: 12,
+          ...tailwind("flex flex-1 items-center justify-end"),
+        }}
+      >
+        <NativeImage
+          source={require("../../assets/icon/others/pinkline.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-lg font-medium")}
+          renderIndicator={renderIndicator}
+        />
+      </View>
+    ),
+    []
+  );
+
  return (
    <View
      style={{
@ -22,58 +85,14 @@ export default function WechatWaitingToAdd({ navigation, route }) {
        ...tailwind("flex flex-1"),
      }}
    >
-      <View style={tailwind("flex pb-1 flex-row justify-between items-center")}>
-        <View style={tailwind("flex w-full")}>
-          <Tab
-            value={index}
-            onChange={(e) => {
-              setIndex(e);
-              setIndicatorX(e * tabWidth);
-            }}
-            dense
-            indicatorStyle={{
-              ...tailwind("bg-[#FF7DCB] rounded-full"),
-              transform: [{ translateX: indicatorX }],
-            }}
-          >
-            <Tab.Item
-              titleStyle={
-                index === 0
-                  ? tailwind("text-white font-medium text-base")
-                  : tailwind("text-[#FFFFFF80] text-base font-medium")
-              }
-            >
-              待添加
-            </Tab.Item>
-            <Tab.Item
-              titleStyle={
-                index === 1
-                  ? tailwind("text-white font-medium text-base")
-                  : tailwind("text-[#FFFFFF80] text-base font-medium")
-              }
-            >
-              已完成
-            </Tab.Item>
-          </Tab>
-        </View>
-      </View>
-      <View style={tailwind("flex flex-1 w-full")}>
-        <TabView
-          value={index}
-          onChange={(e) => {
-            setIndex(e);
-            setIndicatorX(e * tabWidth);
-          }}
-          animationType="spring"
-        >
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <HaveNotAddWechat />
-          </TabView.Item>
-          <TabView.Item style={tailwind("w-full flex-1")}>
-            <AlreadyAddWechat />
-          </TabView.Item>
-        </TabView>
-      </View>
+      <TabView
+        navigationState={{ index, routes }}
+        swipeEnabled={true}
+        renderScene={renderScene}
+        renderTabBar={renderTabBar}
+        onIndexChange={setIndex}
+        initialLayout={{ width: layout.width }}
+      />
    </View>
  );
 }