From 3508f92c6386116e5363075ed27104ead62d803d Mon Sep 17 00:00:00 2001 From: yezian Date: Thu, 21 Mar 2024 18:25:31 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A9=BA=E9=97=B4=E5=8A=9F=E8=83=BD=E5=88=9D?= =?UTF-8?q?=E6=AD=A5=E6=90=AD=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.jsx | 42 +++ components/Empty/index.jsx | 8 +- components/SpaceCard/index.jsx | 61 +++++ package.json | 2 + screeens/HomeTab/index.jsx | 12 +- screeens/Posts/index.jsx | 10 - screeens/Space/SpaceList/index.jsx | 111 ++++++++ screeens/Space/SpacePosts/index.jsx | 10 + screeens/Space/index.jsx | 96 +++++++ screeens/SpaceIntroduce/index.jsx | 226 ++++++++++++++++ screeens/StreamerSpace/index.jsx | 383 ++++++++++++++++++++++++++++ yarn.lock | 12 + 12 files changed, 958 insertions(+), 15 deletions(-) create mode 100644 components/SpaceCard/index.jsx create mode 100644 screeens/Space/SpaceList/index.jsx create mode 100644 screeens/Space/SpacePosts/index.jsx create mode 100644 screeens/Space/index.jsx create mode 100644 screeens/SpaceIntroduce/index.jsx create mode 100644 screeens/StreamerSpace/index.jsx diff --git a/App.jsx b/App.jsx index ee89653..90e7eef 100644 --- a/App.jsx +++ b/App.jsx @@ -37,6 +37,8 @@ import Search from "./screeens/Search"; import CreatePost from "./screeens/CreatePost"; import WebWithHeader from "./screeens/WebWithHeader"; import WebWithoutHeader from "./screeens/WebWithoutHeader"; +import SpaceIntroduce from "./screeens/SpaceIntroduce"; +import StreamerSpace from "./screeens/StreamerSpace"; import UpdateModal from "./components/UpdateModal"; import StreamerNavigatorModal from "./components/StreamerNavigatorModal"; import { Icon } from "@rneui/themed"; @@ -571,6 +573,46 @@ export default function App() { title: "", })} /> + ({ + headerLeft: () => ( + navigation.goBack()}> + + + ), + headerRight: () => ( + + ), + headerTransparent: true, + title: "", + })} + /> + ({ + headerLeft: () => ( + navigation.goBack()}> + + + ), + headerRight: () => ( + + ), + headerTransparent: true, + title: "", + })} + /> ) : ( <> diff --git a/components/Empty/index.jsx b/components/Empty/index.jsx index 92d44b0..78a2af5 100644 --- a/components/Empty/index.jsx +++ b/components/Empty/index.jsx @@ -20,6 +20,8 @@ export default function Empty({ type }) { return require("../../assets/images/icon_emptyinternet.png"); case "nodata": return require("../../assets/images/icon_emptydata.png"); + case "nospace": + return require("../../assets/icon/others/nodata.png"); } }; const text = (type) => { @@ -38,12 +40,16 @@ export default function Empty({ type }) { return "网络好像出错了，试着下拉刷新一下吧！"; case "nodata": return "这里空空如也哦～"; + case "nospace": + return "暂时没有加入的空间哦"; } }; return ( - {text(type)} + + {text(type)} + ); } diff --git a/components/SpaceCard/index.jsx b/components/SpaceCard/index.jsx new file mode 100644 index 0000000..f740dde --- /dev/null +++ b/components/SpaceCard/index.jsx @@ -0,0 +1,61 @@ +import { + View, + Text, + TouchableOpacity, + Image as NativeImage, +} from "react-native"; +import React from "react"; +import { useTailwind } from "tailwind-rn"; +import { Image } from "expo-image"; +import { useNavigation } from "@react-navigation/native"; + +const placeholder = "https://via.placeholder.com/1024x1024.png"; + +export default function SpaceCard({ data }) { + const navigation = useNavigation(); + const tailwind = useTailwind(); + const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; + + return ( + navigation.navigate("StreamerSpace")} + style={tailwind("w-full px-1 mt-2")} + > + + + + + + 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 + + + + + + ); +} diff --git a/package.json b/package.json index 3d2bce2..29dd0d7 100644 --- a/package.json +++ b/package.json @@ -58,11 +58,13 @@ "react-native": "0.72.6", "react-native-gifted-chat": "^2.4.0", "react-native-image-zoom-viewer": "^3.0.1", + "react-native-pager-view": "6.2.0", "react-native-picker-select": "^8.1.0", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-svg": "13.9.0", "react-native-swiper": "^1.6.0", + "react-native-tab-view": "^3.5.2", "react-native-toast-message": "^2.1.6", "react-native-web": "~0.19.6", "react-native-webview": "13.2.2", diff --git a/screeens/HomeTab/index.jsx b/screeens/HomeTab/index.jsx index 5f30136..bd4c9a1 100644 --- a/screeens/HomeTab/index.jsx +++ b/screeens/HomeTab/index.jsx @@ -5,6 +5,7 @@ import { useTailwind } from "tailwind-rn"; import Stream from "../Stream"; import My from "../My"; import Posts from "../Posts"; +import Space from "../Space"; import { get } from "../../utils/storeInfo"; import { Icon } from "@rneui/themed"; import { useSafeAreaInsets } from "react-native-safe-area-context"; @@ -73,6 +74,7 @@ export default function HomeTab({ navigation, route }) { )} > navigation.navigate("SpaceIntroduce")} style={tailwind("flex flex-col items-center basis-1/3")} > @@ -133,6 +135,8 @@ export default function HomeTab({ navigation, route }) { ); }, []); + const EmptyComponent = () => <>; + return ( ({ @@ -169,7 +173,7 @@ export default function HomeTab({ navigation, route }) { /> ); } else { return ( ); } @@ -193,7 +197,7 @@ export default function HomeTab({ navigation, route }) { {isCreatePostTabVisible && ( - {isStreamer && ( - navigation.navigate("CreatePost")} - style={tailwind("absolute right-3 bottom-5 rounded-full")} - > - - - )} ); } diff --git a/screeens/Space/SpaceList/index.jsx b/screeens/Space/SpaceList/index.jsx new file mode 100644 index 0000000..0ec9efd --- /dev/null +++ b/screeens/Space/SpaceList/index.jsx @@ -0,0 +1,111 @@ +import { View, Text, RefreshControl, TouchableOpacity } from "react-native"; +import React, { useState, useEffect, useCallback } from "react"; +import { useTailwind } from "tailwind-rn"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import Toast from "react-native-toast-message"; +import Empty from "../../../components/Empty"; +import { FlashList } from "@shopify/flash-list"; +import { useNavigation } from "@react-navigation/native"; +import SpaceCard from "../../../components/SpaceCard"; + +export default function SpaceList() { + const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; + + const tailwind = useTailwind(); + const insets = useSafeAreaInsets(); + + const navigation = useNavigation(); + + const data = [ + { + mid: 11, + }, + { + mid: 22, + }, + { + mid: 33, + }, + { + mid: 44, + }, + ]; + + const renderItem = ({ item }) => ; + + //数据为空时的组件 + const EmptyComponent = useCallback(() => { + return ( + + + navigation.navigate("Search")} + style={{ + width: 190, + height: 46, + ...tailwind( + "flex items-center justify-center bg-[#2E2E2E] mt-3 rounded-full" + ), + }} + > + + 搜索空间 + + + navigation.navigate("Stream")} + style={{ + width: 190, + height: 46, + ...tailwind( + "flex items-center justify-center bg-[#2E2E2E] mt-2 rounded-full" + ), + }} + > + + 查看推荐 + + + + ); + }, []); + + //下拉刷新 + const [refreshing, setRefreshing] = useState(false); + const handleRefresh = async () => { + setRefreshing(true); + setRefreshing(false); + }; + + return ( + + + item.mid} + renderItem={renderItem} + estimatedItemSize={287} + initialNumToRender={12} + numColumns={2} + refreshControl={ + handleRefresh()} + /> + } + onEndReached={() => {}} + ListEmptyComponent={EmptyComponent} + /> + + + ); +} diff --git a/screeens/Space/SpacePosts/index.jsx b/screeens/Space/SpacePosts/index.jsx new file mode 100644 index 0000000..9c65020 --- /dev/null +++ b/screeens/Space/SpacePosts/index.jsx @@ -0,0 +1,10 @@ +import { View, Text } from "react-native"; +import React from "react"; + +export default function SpacePosts() { + return ( + + SpacePosts + + ); +} diff --git a/screeens/Space/index.jsx b/screeens/Space/index.jsx new file mode 100644 index 0000000..85c7cfb --- /dev/null +++ b/screeens/Space/index.jsx @@ -0,0 +1,96 @@ +import { + View, + TouchableOpacity, + Image as NativeImage, + Dimensions, +} from "react-native"; +import React, { useState } 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"; + +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; + + 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/SpaceIntroduce/index.jsx b/screeens/SpaceIntroduce/index.jsx new file mode 100644 index 0000000..6bb658a --- /dev/null +++ b/screeens/SpaceIntroduce/index.jsx @@ -0,0 +1,226 @@ +import { + View, + Text, + Image as NativeImage, + TouchableOpacity, + Dimensions, + ScrollView, +} from "react-native"; +import React, { useEffect } from "react"; +import { useTailwind } from "tailwind-rn"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import Toast from "react-native-toast-message"; +import { Image } from "expo-image"; +import { useHeaderHeight } from "@react-navigation/elements"; + +const placeholder = "https://via.placeholder.com/1024x1024.png"; + +export default function SpaceIntroduce({ navigation, route }) { + const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; + + const tailwind = useTailwind(); + const insets = useSafeAreaInsets(); + const headerHeight = useHeaderHeight(); + + //设置header右侧按钮功能 + useEffect(() => { + navigation.setOptions({ + headerRight: () => ( + console.log("space setting")}> + + + ), + }); + }, []); + + return ( + + + + + + + + + + + 阿巴阿巴 + + + + + + 666666 + + + + + + 24 + + + + + console.log("check wechat")} + style={tailwind("flex flex-col items-center ml-auto")} + > + + + 查看微信 + + + + + + + + 空间介绍 + + + + + + 阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿 + + + + + + + + + + + + + + + + 付费须知 + + + + + + 阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿 + + + + + console.log("join")} + style={tailwind( + "flex flex-row items-center justify-center h-12 rounded-full px-10 bg-[#FF669E]" + )} + > + + + 99元立即加入 + + + + + + ); +} diff --git a/screeens/StreamerSpace/index.jsx b/screeens/StreamerSpace/index.jsx new file mode 100644 index 0000000..55576a7 --- /dev/null +++ b/screeens/StreamerSpace/index.jsx @@ -0,0 +1,383 @@ +import { + View, + Text, + Image as NativeImage, + TouchableOpacity, + useWindowDimensions, + Animated, + FlatList, + PanResponder, + ActivityIndicator, +} from "react-native"; +import React, { useState, useEffect, useCallback, useRef } from "react"; +import { useTailwind } from "tailwind-rn"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import Toast from "react-native-toast-message"; +import { Image } from "expo-image"; +import { useHeaderHeight } from "@react-navigation/elements"; +import { TabView, SceneMap, TabBar } from "react-native-tab-view"; +import Empty from "../../components/Empty"; + +const placeholder = "https://via.placeholder.com/1024x1024.png"; + +export default function StreamerSpace({ navigation, route }) { + const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; + const tailwind = useTailwind(); + const insets = useSafeAreaInsets(); + const headerHeight = useHeaderHeight(); + + const layout = useWindowDimensions(); + const [index, setIndex] = useState(0); + const [routes] = useState([ + { key: "all", title: "全部" }, + { key: "tiefen", title: "铁粉专享" }, + { key: "chaofen", title: "超粉专享" }, + ]); + + const data = [ + { mid: 111 }, + { mid: 222 }, + { mid: 333 }, + { mid: 444 }, + { mid: 555 }, + { mid: 666 }, + { mid: 777 }, + { mid: 888 }, + ]; + + const PostComponent = () => ( + + ); + const renderItem = ({ item }) => ; + + const AllRoute = () => ( + { + if (event.nativeEvent.contentOffset.y === 0) + viewTranslateYRef.current = -199; + }} + ListFooterComponent={() => ( + + + + )} + ListEmptyComponent={} + /> + ); + const TiefenRoute = () => ( + + ); + const ChaofenRoute = () => ( + + ); + + const renderScene = SceneMap({ + all: AllRoute, + tiefen: TiefenRoute, + chaofen: ChaofenRoute, + }); + + const renderIndicator = (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 = (props) => ( + + ); + + //设置header右侧按钮功能 + useEffect(() => { + navigation.setOptions({ + headerRight: () => ( + console.log("space setting")}> + + + ), + }); + }, []); + + const panResponder = useRef( + PanResponder.create({ + onStartShouldSetPanResponder: () => { + if (viewTranslateYRef.current === -200) return false; + return true; + }, + onPanResponderMove: (_, gesture) => { + const { dy } = gesture; + if (dy < 0) { + pan.setValue(Math.max(dy + viewTranslateYRef.current, -200)); + } else { + pan.setValue(Math.min(dy + viewTranslateYRef.current, 0)); + } + }, + onPanResponderRelease: (_, gesture) => { + const { dy } = gesture; + if (dy < 0) { + viewTranslateYRef.current = Math.max( + dy + viewTranslateYRef.current, + -200 + ); + } else { + viewTranslateYRef.current = Math.min( + dy + viewTranslateYRef.current, + 0 + ); + } + }, + }) + ).current; + + const pan = useRef(new Animated.Value(0)).current; + const viewTranslateYRef = useRef(null); + + return ( + + + + + + + + + + 阿巴阿巴阿巴阿巴阿巴阿巴 + + + + + + 666666 + + + + + + 24 + + + + + + 分享 + + + + console.log("check wechat")} + style={tailwind("flex flex-col items-center")} + > + + + 查看微信 + + + console.log("become tiefen")} + style={tailwind("flex flex-col items-center")} + > + + + + 成为铁粉 + + + (88/999) + + + + console.log("become chaofen")} + style={tailwind("flex flex-col items-center")} + > + + + 成为超粉 + + + console.log("report")} + style={tailwind("flex flex-col items-center")} + > + + + 举报 + + + + + + + + console.log("check wechat")} + style={tailwind("flex flex-col items-center")} + > + + + 查看微信 + + + console.log("become tiefen")} + style={tailwind("flex flex-col items-center")} + > + + + + 成为铁粉 + + + (88/999) + + + + console.log("become chaofen")} + style={tailwind("flex flex-col items-center")} + > + + + 成为超粉 + + + + + ); +} diff --git a/yarn.lock b/yarn.lock index 766fda2..a3feb2e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6142,6 +6142,11 @@ react-native-lightbox-v2@0.9.0: resolved "https://registry.npmmirror.com/react-native-lightbox-v2/-/react-native-lightbox-v2-0.9.0.tgz#b97be4d892ebb959069c451948b11da390bc46d8" integrity sha512-Fc5VFHFj2vokS+OegyTsANKb1CYoUlOtAv+EBH5wtpJn1b5cey6jVXH7136G5+8OC9JmKWSgKHc5thFwOoZTUg== +react-native-pager-view@6.2.0: + version "6.2.0" + resolved "https://registry.npmmirror.com/react-native-pager-view/-/react-native-pager-view-6.2.0.tgz#51380d93fbe47f6380dc71d613a787bf27a4ca37" + integrity sha512-pf9OnL/Tkr+5s4Gjmsn7xh91PtJLDa6qxYa/bmtUhd/+s4cQdWQ8DIFoOFghwZIHHHwVdWtoXkp6HtpjN+r20g== + react-native-parsed-text@0.0.22: version "0.0.22" resolved "https://registry.npmmirror.com/react-native-parsed-text/-/react-native-parsed-text-0.0.22.tgz#a23c756eaa5d6724296814755085127f9072e5f5" @@ -6197,6 +6202,13 @@ react-native-swiper@^1.6.0: dependencies: prop-types "^15.5.10" +react-native-tab-view@^3.5.2: + version "3.5.2" + resolved "https://registry.npmmirror.com/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz#2789b8af6148b16835869566bf13dc3b0e6c1b46" + integrity sha512-nE5WqjbeEPsWQx4mtz81QGVvgHRhujTNIIZiMCx3Bj6CBFDafbk7XZp9ocmtzXUQaZ4bhtVS43R4FIiR4LboJw== + dependencies: + use-latest-callback "^0.1.5" + react-native-toast-message@^2.1.6: version "2.1.6" resolved "https://registry.npmmirror.com/react-native-toast-message/-/react-native-toast-message-2.1.6.tgz#322827c66901fa22cb3db614c7383cc717f5bbe2"