384 lines
11 KiB
JavaScript
384 lines
11 KiB
JavaScript
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 = () => (
|
|
<View style={tailwind("w-full h-24 mt-4 bg-white rounded-2xl")}></View>
|
|
);
|
|
const renderItem = ({ item }) => <PostComponent />;
|
|
|
|
const AllRoute = () => (
|
|
<FlatList
|
|
data={data}
|
|
renderItem={renderItem}
|
|
initialNumToRender={4}
|
|
onScroll={(event) => {
|
|
if (event.nativeEvent.contentOffset.y === 0)
|
|
viewTranslateYRef.current = -199;
|
|
}}
|
|
ListFooterComponent={() => (
|
|
<View style={{ paddingBottom: 50 }}>
|
|
<ActivityIndicator style={tailwind("my-4")} size="large" />
|
|
</View>
|
|
)}
|
|
ListEmptyComponent={<Empty type="nodata" />}
|
|
/>
|
|
);
|
|
const TiefenRoute = () => (
|
|
<View style={{ flex: 1, backgroundColor: "#673ab7" }} />
|
|
);
|
|
const ChaofenRoute = () => (
|
|
<View style={{ flex: 1, backgroundColor: "#84cc16" }} />
|
|
);
|
|
|
|
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 (
|
|
<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 = (props) => (
|
|
<TabBar
|
|
{...props}
|
|
style={tailwind("bg-transparent")}
|
|
labelStyle={tailwind("text-base font-medium")}
|
|
renderIndicator={renderIndicator}
|
|
/>
|
|
);
|
|
|
|
//设置header右侧按钮功能
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
headerRight: () => (
|
|
<TouchableOpacity onPress={() => console.log("space setting")}>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/setting.png")}
|
|
/>
|
|
</TouchableOpacity>
|
|
),
|
|
});
|
|
}, []);
|
|
|
|
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 (
|
|
<View
|
|
style={{
|
|
paddingLeft: insets.left,
|
|
paddingRight: insets.right,
|
|
...tailwind("flex-1"),
|
|
}}
|
|
>
|
|
<View style={tailwind("absolute top-0 left-0")}>
|
|
<Image
|
|
source={placeholder}
|
|
contentFit="cover"
|
|
transition={1000}
|
|
placeholder={blurhash}
|
|
cachePolicy="disk"
|
|
style={{
|
|
aspectRatio: "15/13",
|
|
...tailwind("w-full"),
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
backgroundColor: "#000000B2",
|
|
...tailwind("absolute w-full h-full"),
|
|
}}
|
|
></View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
marginTop: headerHeight,
|
|
...tailwind("flex flex-row items-center px-4 h-24"),
|
|
}}
|
|
>
|
|
<Image
|
|
style={tailwind(
|
|
"w-[4.6rem] h-[4.6rem] rounded-full border-2 border-white"
|
|
)}
|
|
source={placeholder}
|
|
placeholder={blurhash}
|
|
contentFit="cover"
|
|
transition={1000}
|
|
cachePolicy="disk"
|
|
/>
|
|
<View style={tailwind("flex flex-col shrink mx-2 justify-between")}>
|
|
<Text
|
|
style={{ fontSize: 22, ...tailwind("text-white font-medium") }}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
阿巴阿巴阿巴阿巴阿巴阿巴
|
|
</Text>
|
|
<View style={tailwind("flex-row flex-wrap mt-1.5")}>
|
|
<View
|
|
style={tailwind(
|
|
"flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full"
|
|
)}
|
|
>
|
|
<NativeImage source={require("../../assets/icon/12DP/ID.png")} />
|
|
<Text style={tailwind("text-white text-xs font-medium ml-0.5")}>
|
|
666666
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={tailwind(
|
|
"flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full"
|
|
)}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/12DP/edit.png")}
|
|
/>
|
|
<Text style={tailwind("text-white text-xs font-medium ml-0.5")}>
|
|
24
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={tailwind(
|
|
"flex items-center justify-center ml-auto h-8 px-4 bg-[#FF669E] rounded-full"
|
|
)}
|
|
>
|
|
<Text style={tailwind("text-white text-sm font-medium")}>分享</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={{ gap: 22, ...tailwind("flex flex-row px-6 mt-2") }}>
|
|
<TouchableOpacity
|
|
onPress={() => console.log("check wechat")}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/wechat_bg.png")}
|
|
/>
|
|
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
|
查看微信
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => console.log("become tiefen")}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/tiefen_bg.png")}
|
|
/>
|
|
<View style={tailwind("flex flex-col items-center")}>
|
|
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
|
成为铁粉
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
...tailwind("text-[#FFFFFF80] font-medium mt-0.5"),
|
|
}}
|
|
>
|
|
(88/999)
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => console.log("become chaofen")}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/chaofen_bg.png")}
|
|
/>
|
|
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
|
成为超粉
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => console.log("report")}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/report_bg.png")}
|
|
/>
|
|
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
|
举报
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<Animated.View
|
|
style={{
|
|
transform: [
|
|
{
|
|
translateY: pan,
|
|
},
|
|
],
|
|
height: layout.height - headerHeight - 72 - insets.bottom + 50,
|
|
...tailwind("flex rounded-t-3xl bg-[#07050A] mt-6 px-4"),
|
|
}}
|
|
{...panResponder.panHandlers}
|
|
>
|
|
<TabView
|
|
navigationState={{ index, routes }}
|
|
swipeEnabled={false}
|
|
renderScene={renderScene}
|
|
renderTabBar={renderTabBar}
|
|
onIndexChange={setIndex}
|
|
initialLayout={{ width: layout.width }}
|
|
/>
|
|
</Animated.View>
|
|
<View
|
|
style={{
|
|
...tailwind(
|
|
"absolute bottom-0 flex flex-row w-full py-3 px-6 justify-around border-t border-[#FFFFFF26] bg-[#07050A]"
|
|
),
|
|
height: 72 + insets.bottom,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={() => console.log("check wechat")}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/wechat.png")}
|
|
/>
|
|
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
|
查看微信
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => console.log("become tiefen")}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/tiefen.png")}
|
|
/>
|
|
<View style={tailwind("flex flex-col items-center")}>
|
|
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
|
成为铁粉
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
...tailwind("text-[#FFFFFF80] font-medium mt-0.5"),
|
|
}}
|
|
>
|
|
(88/999)
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => console.log("become chaofen")}
|
|
style={tailwind("flex flex-col items-center")}
|
|
>
|
|
<NativeImage
|
|
source={require("../../assets/icon/others/chaofen.png")}
|
|
/>
|
|
<Text style={tailwind("text-white text-xs font-medium mt-0.5")}>
|
|
成为超粉
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|