diff --git a/assets/images/icon_emptydata.png b/assets/images/icon_emptydata.png deleted file mode 100644 index b9170dd..0000000 Binary files a/assets/images/icon_emptydata.png and /dev/null differ diff --git a/assets/images/icon_emptyinternet.png b/assets/images/icon_emptyinternet.png deleted file mode 100644 index 8952138..0000000 Binary files a/assets/images/icon_emptyinternet.png and /dev/null differ diff --git a/assets/images/icon_emptylocation.png b/assets/images/icon_emptylocation.png deleted file mode 100644 index ea84218..0000000 Binary files a/assets/images/icon_emptylocation.png and /dev/null differ diff --git a/assets/images/icon_emptymessage.png b/assets/images/icon_emptymessage.png deleted file mode 100644 index 18ea70e..0000000 Binary files a/assets/images/icon_emptymessage.png and /dev/null differ diff --git a/assets/images/icon_emptypost.png b/assets/images/icon_emptypost.png deleted file mode 100644 index f5f6e3e..0000000 Binary files a/assets/images/icon_emptypost.png and /dev/null differ diff --git a/assets/images/icon_emptysearch.png b/assets/images/icon_emptysearch.png deleted file mode 100644 index 9acbeb2..0000000 Binary files a/assets/images/icon_emptysearch.png and /dev/null differ diff --git a/components/Empty/index.jsx b/components/Empty/index.jsx index 264d160..2773e57 100644 --- 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": diff --git a/screeens/Login/index.jsx b/screeens/Login/index.jsx index 79b5dcf..3e3f570 100644 --- 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: () => , + 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 ( + + + + ); + }, []); + + const renderTabBar = useCallback( + (props) => ( + + + + ), + [] + ); return ( Keyboard.dismiss()}> @@ -32,56 +90,15 @@ export default function Login() { ...tailwind("flex flex-1"), }} > - {/* tab栏 */} - { - 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")} - > - - 验证码登陆 - - - 账号密码登陆 - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - animationType="spring" - disableSwipe - > - - - - - - - + navigationState={{ index, routes }} + swipeEnabled={true} + renderScene={renderScene} + renderTabBar={renderTabBar} + onIndexChange={setIndex} + initialLayout={{ width: layout.width }} + style={tailwind("mt-32")} + /> ); diff --git a/screeens/My/index.jsx b/screeens/My/index.jsx index 776c652..7b79212 100644 --- a/screeens/My/index.jsx +++ b/screeens/My/index.jsx @@ -433,27 +433,6 @@ export default function My({ navigation }) { /> )} - {/* {data?.streamer_ext?.zones && ( - - navigation.navigate("StreamerSpace", { mid: data?.mid }) - } - style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")} - > - - - 我的空间 - - - 创作者功能 - - - - )} */} navigation.navigate("StreamerPosts", { mid: data?.mid }) diff --git a/screeens/Posts/index.jsx b/screeens/Posts/index.jsx index bf4169c..a05dc65 100644 --- 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: () => , + follow: () => , + }), + [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 ( + + + + ); + }, []); + + const renderTabBar = useCallback( + (props) => ( + + + navigation.navigate("Search")} + > + + + + ), + [] + ); + return ( - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - dense - indicatorStyle={{ - ...tailwind("h-1 w-10 ml-4 rounded-full"), - backgroundColor: "#FF7DCB", - transform: [{ translateX: indicatorX }], - }} - > - - 推荐 - - - 关注 - - - - navigation.navigate("Search")} - > - - - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - animationType="spring" - > - - - - - - - - + ); } diff --git a/screeens/Relationship/index.jsx b/screeens/Relationship/index.jsx index ad56d79..20b9643 100644 --- 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: () => , + 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 ( + + + + ); + }, []); + + const renderTabBar = useCallback( + (props) => ( + + + + ), + [] + ); + return ( - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - dense - indicatorStyle={{ - ...tailwind("bg-[#FF7DCB] rounded-full"), - transform: [{ translateX: indicatorX }], - }} - > - - 关注 - - - 粉丝 - - - - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - animationType="spring" - > - - - - - - - - + ); } diff --git a/screeens/Space/index.jsx b/screeens/Space/index.jsx index 85c7cfb..1c3bf83 100644 --- 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: () => , + post: () => , + }), + [] + ); + + 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 ( + + + + ); + }, []); + + const renderTabBar = useCallback( + (props) => ( + + + navigation.navigate("Search")} + > + + + + ), + [] + ); return ( - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - dense - indicatorStyle={{ - ...tailwind("h-1 w-10 ml-4 rounded-full"), - backgroundColor: "#FF7DCB", - transform: [{ translateX: indicatorX }], - }} - > - - 空间 - - - 动态 - - - - navigation.navigate("Search")} - > - - - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - animationType="spring" - > - - - - - - - - + ); } diff --git a/screeens/SpaceSetting/SpaceMember/index.jsx b/screeens/SpaceSetting/SpaceMember/index.jsx index b098685..c4334e7 100644 --- 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"; diff --git a/screeens/Stream/index.jsx b/screeens/Stream/index.jsx index d720880..14fa6c1 100644 --- 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: () => , + follow: () => , + }), + [] + ); + + 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 ( + + + + ); + }, []); + + const renderTabBar = useCallback( + (props) => ( + + + navigation.navigate("Search")} + > + + + + ), + [] + ); return ( - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - dense - indicatorStyle={{ - ...tailwind("h-1 w-10 ml-4 rounded-full"), - backgroundColor: "#FF7DCB", - transform: [{ translateX: indicatorX }], - }} - > - - 推荐 - - - 关注 - - - - navigation.navigate("Search")} - > - - - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - animationType="spring" - > - - - - - - - - + ); } diff --git a/screeens/StreamerSpace/index.jsx b/screeens/StreamerSpace/index.jsx index fb1b70a..c02dde1 100644 --- a/screeens/StreamerSpace/index.jsx +++ b/screeens/StreamerSpace/index.jsx @@ -202,8 +202,10 @@ export default function StreamerSpace({ navigation, route }) { (props) => ( ), diff --git a/screeens/WechatWaitingToAdd/index.jsx b/screeens/WechatWaitingToAdd/index.jsx index c16981a..a9e5d85 100644 --- 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: () => , + 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 ( + + + + ); + }, []); + + const renderTabBar = useCallback( + (props) => ( + + + + ), + [] + ); + return ( - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - dense - indicatorStyle={{ - ...tailwind("bg-[#FF7DCB] rounded-full"), - transform: [{ translateX: indicatorX }], - }} - > - - 待添加 - - - 已完成 - - - - - - { - setIndex(e); - setIndicatorX(e * tabWidth); - }} - animationType="spring" - > - - - - - - - - + ); }