wishpal_ironfan
/
tiefen_space_app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增消息页面

This commit is contained in:
al 2024-08-30 13:58:27 +08:00
parent 219f51ca30
commit 0d752ffc47
7 changed files with 506 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.jsx
View File

@ -47,7 +47,7 @@ import SpaceIntroduce from "./screeens/SpaceIntroduce";
import StreamerSpace from "./screeens/StreamerSpace";
import CreateSpace from "./screeens/CreateSpace";
import SpaceSetting from "./screeens/SpaceSetting";
import NoticeDetail from "./screeens/Message/NoticeDetail";
import NoticeDetail from "./screeens/NoticeDetail";
import SpaceSearch from "./screeens/SpaceSetting/SpaceSearch";
import ShareSpace from "./screeens/ShareSpace";
import EditSpacePost from "./screeens/EditSpacePost";

9
screeens/HomeTab/index.jsx
View File

@ -1,7 +1,8 @@
import React, { useState, useEffect, useCallback } from "react";
import { Image, TouchableOpacity, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Stream from "../Stream";
// import Stream from "../Stream";
import NoticeNav from "../NoticeDetail";
import My from "../My";
import Posts from "../Posts";
import Space from "../Space";
@ -121,10 +122,10 @@ export default function HomeTab({ navigation, route }) {
/>
)}
<Tab.Screen
name="Stream"
component={Stream}
name="NoticeNav"
component={NoticeNav}
options={{
title: "发现",
title: "消息",
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
if (focused) {

47
screeens/NoticeDetail/ActiveNotice/index.js Normal file
View File

@ -0,0 +1,47 @@
import { ScrollView } from "react-native";
import React, { useState, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import NoticeItem from "../components/NoticeItem";
import { Icon } from "@rneui/themed";
export default function ActiveNotice({ navigation }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
return (
<ScrollView style={tailwind("p-4")}>
<NoticeItem
hasLink={{ url: "", text: "直达帖子" }}
leftIcon={
<Icon type="ionicon" name="sparkles" size={24} color="#ff75c8" />
}
/>
<NoticeItem
hasLink={{ url: "", text: "直达帖子" }}
leftIcon={
<Icon type="ionicon" name="sparkles" size={24} color="#ff75c8" />
}
/>
<NoticeItem
leftIcon={
<Icon type="ionicon" name="sparkles" size={24} color="#ff75c8" />
}
/>
<NoticeItem
leftIcon={
<Icon type="ionicon" name="sparkles" size={24} color="#ff75c8" />
}
/>
<NoticeItem
leftIcon={
<Icon type="ionicon" name="sparkles" size={24} color="#ff75c8" />
}
/>
<NoticeItem
leftIcon={
<Icon type="ionicon" name="sparkles" size={24} color="#ff75c8" />
}
/>
</ScrollView>
);
}

234
screeens/NoticeDetail/NoticeNav/index.jsx Normal file
View File

@ -0,0 +1,234 @@
import {
View,
TouchableOpacity,
Image as NativeImage,
Text,
} from "react-native";
import React, { useState, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function Message({ navigation }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
return (
<View
style={{
paddingTop: insets.top,
paddingLeft: insets.left,
paddingRight: insets.right,
...tailwind("flex flex-1"),
}}
>
{/* 广告轮播 */}
<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>
);
}

66
screeens/NoticeDetail/SystemNotice/index.jsx Normal file
View File

@ -0,0 +1,66 @@
import { ScrollView } from "react-native";
import React, { useState, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import NoticeItem from "../components/NoticeItem";
import { Icon } from "@rneui/themed";
export default function SystemNotice({ navigation }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
return (
<ScrollView style={tailwind("p-4")}>
<NoticeItem
leftIcon={
<Icon
type="ionicon"
hasLink={null}
name="megaphone"
size={24}
color="white"
/>
}
/>
<NoticeItem
hasLink={{ url: "", text: "直达帖子" }}
leftIcon={
<Icon type="ionicon" name="megaphone" size={24} color="white" />
}
/>
<NoticeItem
leftIcon={
<Icon
type="ionicon"
hasLink={null}
name="megaphone"
size={24}
color="white"
/>
}
/>
<NoticeItem
leftIcon={
<Icon
type="ionicon"
hasLink={null}
name="megaphone"
size={24}
color="white"
/>
}
/>
<NoticeItem
hasLink={{ url: "", text: "直达帖子" }}
leftIcon={
<Icon type="ionicon" name="megaphone" size={24} color="white" />
}
/>
<NoticeItem
hasLink={{ url: "", text: "直达帖子" }}
leftIcon={
<Icon type="ionicon" name="megaphone" size={24} color="white" />
}
/>
</ScrollView>
);
}

96
screeens/NoticeDetail/components/NoticeItem/index.jsx Normal file
View File

@ -0,0 +1,96 @@
import {
View,
TouchableOpacity,
Image as NativeImage,
Text,
} from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function NoticeItem({ leftIcon, hasLink }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
return (
<View>
<View style={tailwind("flex flex-row")}>
{/* 头像 */}
<View
style={{
...tailwind(
"flex justify-center items-center rounded-full p-2 mr-2"
),
width: 42,
height: 42,
backgroundColor: "#ffffff1a",
}}
>
{/* <Icon type="ionicon" name="megaphone" size={24} color="white" /> */}
{leftIcon}
</View>
<View style={tailwind("flex-1")}>
{/* 内容 */}
<View>
{/* 文本内容 */}
<View>
<Text style={tailwind("text-base text-white font-medium mr-2")}>
您的个人资料已审核通过。
</Text>
</View>
{/* 链接跳转 */}
{hasLink && (
<TouchableOpacity
onPressIn={() => {}}
style={{
...tailwind("rounded-xl p-2 flex flex-row items-center my-2"),
backgroundColor: "#ffffff1a",
}}
>
<View
style={{
...tailwind("mr-2 bg-white rounded-xl"),
width: 100,
height: 100,
}}
>
{/* <NativeImage
// style={{ transform: [{ scale: 0.9 }] }}
width={120}
height={120}
source={require("../../../assets/icon.png")}
/> */}
</View>
<View
style={{
...tailwind("flex justify-center flex-1"),
alignItems: "center",
}}
>
<Text
style={tailwind("text-base text-white font-medium mr-2")}
>
{hasLink.text}
</Text>
</View>
</TouchableOpacity>
)}
</View>
{/* 时间 */}
<View>
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
11:00
</Text>
</View>
</View>
</View>
<View
style={{
...tailwind("my-4"),
height: 1,
width: "100%",
backgroundColor: "#ffffff1a",
}}
></View>
</View>
);
}

57
screeens/NoticeDetail/index.jsx Normal file
View File

@ -0,0 +1,57 @@
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Icon } from "@rneui/themed";
import ActiveNotice from "./ActiveNotice";
import SystemNotice from "./SystemNotice";
import NoticeNav from "./NoticeNav";
const SpaceSettingStack = createNativeStackNavigator();
export default function NoticeDetail({ navigation, route }) {
return (
<SpaceSettingStack.Navigator>
<SpaceSettingStack.Screen
name="NoticeNav"
component={NoticeNav}
options={({ navigation }) => ({
headerShown: false,
})}
/>
<SpaceSettingStack.Screen
name="SystemNotice"
component={SystemNotice}
options={({ navigation }) => ({
headerLeft: () => (
<Icon
type="ionicon"
name="chevron-back"
size={32}
color="white"
onPress={() => navigation.goBack()}
/>
),
title: "系统通知",
headerTitleStyle: { color: "white" },
headerStyle: { backgroundColor: "#07050A" },
})}
/>
<SpaceSettingStack.Screen
name="ActiveNotice"
component={ActiveNotice}
options={({ navigation }) => ({
headerLeft: () => (
<Icon
type="ionicon"
name="chevron-back"
size={32}
color="white"
onPress={() => navigation.goBack()}
/>
),
title: "活动信息",
headerTitleStyle: { color: "white" },
headerStyle: { backgroundColor: "#07050A" },
})}
/>
</SpaceSettingStack.Navigator>
);
}