418 lines
13 KiB
JavaScript
418 lines
13 KiB
JavaScript
import {
|
|
View,
|
|
TouchableOpacity,
|
|
Image as NativeImage,
|
|
Text,
|
|
Animated,
|
|
useWindowDimensions,
|
|
} from "react-native";
|
|
import React, { useState, useRef, useCallback } from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { Badge } from "@rneui/themed";
|
|
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
|
|
import MessageList from "../components/MessageList";
|
|
export default function NoticeNav({ navigation }) {
|
|
const [data, setData] = useState([]);
|
|
const [openNotices, setOpenNotices] = useState(false);
|
|
const tailwind = useTailwind();
|
|
const insets = useSafeAreaInsets();
|
|
const mesListEl = useRef(null);
|
|
|
|
//tab组件相关
|
|
const layout = useWindowDimensions();
|
|
const [index, setIndex] = useState(0);
|
|
const [routes] = useState([{ key: "list", title: "消息" }]);
|
|
const renderScene = useCallback(
|
|
SceneMap({
|
|
list: () => <MessageList navigation={navigation} ref={mesListEl} />,
|
|
}),
|
|
[]
|
|
);
|
|
const handleReadAll = useCallback(() => {
|
|
mesListEl.current.readAllMsg();
|
|
}, []);
|
|
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}
|
|
/>
|
|
<View style={tailwind("flex-row items-center")}>
|
|
<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>
|
|
<TouchableOpacity
|
|
style={tailwind(
|
|
"flex items-center justify-center w-9 h-9 mr-4 bg-[#FFFFFF1A] rounded-full"
|
|
)}
|
|
onPress={handleReadAll}
|
|
>
|
|
<NativeImage
|
|
source={require("../../../assets/icon/32DP/remove.png")}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</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>
|
|
// <View
|
|
// style={{
|
|
// paddingTop: insets.top,
|
|
// paddingLeft: insets.left,
|
|
// paddingRight: insets.right,
|
|
// ...tailwind("flex flex-1 p-4 mt-4"),
|
|
// }}
|
|
// >
|
|
// {/* 广告轮播 */}
|
|
// <View></View>
|
|
// {/* 官方消息 */}
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("flex flex-col rounded-2xl mt-3.5 border-2"),
|
|
// // backgroundColor: "#ffffff6d",
|
|
// }}
|
|
// >
|
|
// <TouchableOpacity
|
|
// onPress={() => navigation.navigate("SystemNotice")}
|
|
// style={{
|
|
// ...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
|
|
// backgroundColor: "#ffffff1a",
|
|
// }}
|
|
// >
|
|
// <View style={tailwind("px-4")}>
|
|
// <NativeImage
|
|
// source={require("../../../assets/icon/32DP/contact.png")}
|
|
// />
|
|
// </View>
|
|
// <View
|
|
// style={tailwind(
|
|
// "flex flex-row justify-between items-center flex-1"
|
|
// )}
|
|
// >
|
|
// <View style={tailwind("flex flex-col")}>
|
|
// <View style={tailwind("flex flex-row items-center mb-2")}>
|
|
// <Text
|
|
// style={tailwind("text-base text-white font-medium mr-2")}
|
|
// >
|
|
// 系统通知
|
|
// </Text>
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("font-medium mr-2 px-1 rounded-full"),
|
|
// backgroundColor: "#ffffff6d",
|
|
// }}
|
|
// >
|
|
// <Text style={tailwind("text-xs text-white")}>官方</Text>
|
|
// </View>
|
|
// </View>
|
|
// <Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
|
|
// 官方消息通知
|
|
// </Text>
|
|
// </View>
|
|
// <View style={{ ...tailwind("w-12"), width: 60 }}>
|
|
// <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
|
// 11:00
|
|
// </Text>
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("rounded-full bg-[#FF669E]"),
|
|
// width: 20,
|
|
// height: 20,
|
|
// }}
|
|
// >
|
|
// <Text
|
|
// style={{
|
|
// ...tailwind("text-white font-medium"),
|
|
// flexWrap: "nowrap",
|
|
// lineHeight: 20,
|
|
// textAlign: "center",
|
|
// }}
|
|
// numberOfLines={1}
|
|
// >
|
|
// 1
|
|
// </Text>
|
|
// </View>
|
|
// </View>
|
|
// </View>
|
|
// </TouchableOpacity>
|
|
// <TouchableOpacity
|
|
// onPress={() => navigation.navigate("ActiveNotice")}
|
|
// style={{
|
|
// ...tailwind("flex flex-row items-center py-4 rounded-xl"),
|
|
// backgroundColor: "#ffffff1a",
|
|
// }}
|
|
// >
|
|
// <View style={tailwind("px-4")}>
|
|
// <NativeImage
|
|
// source={require("../../../assets/icon/32DP/contact.png")}
|
|
// />
|
|
// </View>
|
|
// <View
|
|
// style={tailwind(
|
|
// "flex flex-row justify-between items-center flex-1"
|
|
// )}
|
|
// >
|
|
// <View style={tailwind("flex flex-col")}>
|
|
// <View style={tailwind("flex flex-row items-center mb-2")}>
|
|
// <Text style={tailwind("text-base text-white font-medium mr-2")}>
|
|
// 活动消息
|
|
// </Text>
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("font-medium mr-2 px-1 rounded-full"),
|
|
// backgroundColor: "#ffffff6d",
|
|
// }}
|
|
// >
|
|
// <Text style={tailwind("text-xs text-white")}>官方</Text>
|
|
// </View>
|
|
// </View>
|
|
// <Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
|
|
// 展示相关活动推送信息
|
|
// </Text>
|
|
// </View>
|
|
// <View style={{ ...tailwind("w-12"), width: 60 }}>
|
|
// <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
|
// 11:00
|
|
// </Text>
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("rounded-full bg-[#FF669E]"),
|
|
// width: 20,
|
|
// height: 20,
|
|
// }}
|
|
// >
|
|
// <Text
|
|
// style={{
|
|
// ...tailwind("text-white font-medium"),
|
|
// flexWrap: "nowrap",
|
|
// lineHeight: 20,
|
|
// textAlign: "center",
|
|
// }}
|
|
// numberOfLines={1}
|
|
// >
|
|
// 99
|
|
// </Text>
|
|
// </View>
|
|
// </View>
|
|
// </View>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// {/* 私聊消息 */}
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("flex flex-col rounded-2xl mt-3.5 border-2"),
|
|
// }}
|
|
// >
|
|
// <TouchableOpacity
|
|
// onPress={() =>
|
|
// navigation.navigate("MessageDetail", {
|
|
// mid: 1,
|
|
// })
|
|
// }
|
|
// style={{
|
|
// ...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
|
|
// backgroundColor: "#333333",
|
|
// }}
|
|
// >
|
|
// <View style={tailwind("px-4")}>
|
|
// <NativeImage
|
|
// source={require("../../../assets/icon/32DP/contact.png")}
|
|
// />
|
|
// </View>
|
|
// <View
|
|
// style={tailwind(
|
|
// "flex flex-row justify-between items-center flex-1"
|
|
// )}
|
|
// >
|
|
// <View style={tailwind("flex flex-col")}>
|
|
// <View style={tailwind("flex flex-row items-center mb-2")}>
|
|
// <Text
|
|
// style={tailwind("text-base text-white font-medium mr-2")}
|
|
// >
|
|
// 铁粉空间官网
|
|
// </Text>
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("font-medium mr-2 px-1 rounded-full"),
|
|
// backgroundColor: "#ffffff6d",
|
|
// }}
|
|
// >
|
|
// <Text style={tailwind("text-xs text-white")}>官方客服</Text>
|
|
// </View>
|
|
// </View>
|
|
// <Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
|
|
// 请回复您的相关消息
|
|
// </Text>
|
|
// </View>
|
|
// <View style={{ ...tailwind("w-12"), width: 60 }}>
|
|
// <Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
|
// 11:00
|
|
// </Text>
|
|
// <View
|
|
// style={{
|
|
// ...tailwind("rounded-full bg-[#FF669E]"),
|
|
// width: 20,
|
|
// height: 20,
|
|
// }}
|
|
// >
|
|
// <Text
|
|
// style={{
|
|
// ...tailwind("text-white font-medium"),
|
|
// flexWrap: "nowrap",
|
|
// lineHeight: 20,
|
|
// textAlign: "center",
|
|
// }}
|
|
// numberOfLines={1}
|
|
// >
|
|
// 1
|
|
// </Text>
|
|
// </View>
|
|
// </View>
|
|
// </View>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// </View>
|
|
);
|
|
}
|
|
|
|
const MessageItem = ({
|
|
title,
|
|
newestContent,
|
|
time,
|
|
count,
|
|
backgroundColor,
|
|
paddingVertical,
|
|
navigation,
|
|
badge,
|
|
icon,
|
|
}) => {
|
|
const tailwind = useTailwind();
|
|
return (
|
|
<View
|
|
style={{
|
|
...tailwind("flex flex-row items-center mb-2 rounded-xl"),
|
|
backgroundColor,
|
|
paddingVertical,
|
|
}}
|
|
>
|
|
<View style={tailwind("px-4")}>
|
|
<NativeImage style={{ width: 28, height: 29 }} source={icon} />
|
|
</View>
|
|
<View
|
|
style={tailwind("flex flex-row justify-between items-center flex-1")}
|
|
>
|
|
<View style={tailwind("flex flex-col")}>
|
|
<View style={tailwind("flex flex-row items-center mb-2")}>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-base text-white font-medium mr-2"),
|
|
maxWidth: 190,
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{title}
|
|
</Text>
|
|
{badge && (
|
|
<View
|
|
style={{
|
|
...tailwind("font-medium mr-2 px-1 rounded-full"),
|
|
backgroundColor: "#ffffff6d",
|
|
}}
|
|
>
|
|
<Text style={tailwind("text-xs text-white")}>{badge}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-xs"),
|
|
color: "#ffffff6d",
|
|
maxWidth: 220,
|
|
// overflow: "hidden",
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{newestContent}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
...tailwind("w-12 flex flex-col items-start"),
|
|
width: 60,
|
|
}}
|
|
>
|
|
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
|
{time}
|
|
</Text>
|
|
<Badge
|
|
value={count}
|
|
status="error"
|
|
badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|