添加banner
This commit is contained in:
parent
b9df8af95c
commit
06808d0afe
|
@ -1,30 +1,74 @@
|
|||
import { Text, View, Dimensions } from "react-native";
|
||||
import { Text, View, Dimensions, TouchableOpacity } from "react-native";
|
||||
import React from "react";
|
||||
import Swiper from "react-native-swiper";
|
||||
import { Image } from "expo-image";
|
||||
import { useTailwind } from "tailwind-rn";
|
||||
|
||||
export default function Banner({ urls }) {
|
||||
import * as Linking from "expo-linking";
|
||||
import { goToPage } from "../../utils/tools";
|
||||
export default function Banner({
|
||||
navigation,
|
||||
banners,
|
||||
width = Dimensions.get("window").width - 40,
|
||||
height = 160,
|
||||
}) {
|
||||
const tailwind = useTailwind();
|
||||
const screenWidth = Dimensions.get("window").width;
|
||||
|
||||
return (
|
||||
<Swiper
|
||||
autoplay
|
||||
width={screenWidth}
|
||||
height={(screenWidth * 2) / 7}
|
||||
width={width}
|
||||
height={height}
|
||||
paginationStyle={tailwind("bottom-2")}
|
||||
activeDotStyle={tailwind("bg-fuchsia-400")}
|
||||
>
|
||||
{urls.map((url) => (
|
||||
<View key={url} style={tailwind("px-2 py-1")}>
|
||||
{/* <View
|
||||
style={tailwind("flex flex-row justify-between w-full h-full bg-white")}
|
||||
>
|
||||
<Text style={tailwind("text-white")}>1</Text>
|
||||
</View>
|
||||
<View style={tailwind("flex flex-row justify-between w-full h-full")}>
|
||||
<Text style={tailwind("text-white")}>2</Text>
|
||||
</View>
|
||||
<View style={tailwind("flex flex-row justify-between w-full h-full")}>
|
||||
<Text style={tailwind("text-white")}>3</Text>
|
||||
</View> */}
|
||||
{banners.map((banner, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={tailwind("w-full h-full")}
|
||||
onPress={() => {
|
||||
console.log("Pressed", banner?.link);
|
||||
const linkAndParams = goToPage(banner?.link);
|
||||
console.log(linkAndParams);
|
||||
if (typeof linkAndParams === "string") {
|
||||
try {
|
||||
// 尝试启动微信客户端
|
||||
Linking.openURL(linkAndParams).catch(() => {
|
||||
// 启动微信客户端失败,弹出提示安装对话框
|
||||
Alert.alert(
|
||||
"错误提醒",
|
||||
"打开链接失败,请返回重试或者联系在线客服",
|
||||
[{ text: "确认", style: "cancel" }],
|
||||
{ cancelable: false }
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
// 启动微信客户端失败,继续加载URL
|
||||
console.error(error);
|
||||
}
|
||||
} else {
|
||||
navigation.navigate(...linkAndParams);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
source={url}
|
||||
source={banner.url}
|
||||
contentFit="cover"
|
||||
transition={1000}
|
||||
cachePolicy="disk"
|
||||
style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</Swiper>
|
||||
);
|
||||
|
|
|
@ -36,7 +36,7 @@ const WebSocketComponent = ({ getData, state, changeCount }) => {
|
|||
async function connect_socket() {
|
||||
const appInfo = await get("app_info");
|
||||
const base = await baseRequest();
|
||||
if (socket && socket.readyState === 1) return;
|
||||
if (socket && socket?.readyState === 1) return;
|
||||
// 创建WebSocket连接
|
||||
socket = new WebSocket(
|
||||
`${process.env.EXPO_PUBLIC_WEBSOCKET_URL}/ws?b_mid=${base.b_mid}&b_did=${base.b_did}&b_dt=1&b_token=${base.b_token}&b_ch${appInfo.b_ch}`
|
||||
|
@ -60,10 +60,12 @@ const WebSocketComponent = ({ getData, state, changeCount }) => {
|
|||
try {
|
||||
const data = JSON.parse(temp);
|
||||
if (data.t === 2 && data.msg.ping_interval) {
|
||||
if (socket.readyState == WebSocket.OPEN) socket.send("ping");
|
||||
if (socket && socket?.readyState == WebSocket.OPEN)
|
||||
socket.send("ping");
|
||||
interval = setInterval(() => {
|
||||
// 发送 ping 给服务器
|
||||
if (socket.readyState == WebSocket.OPEN) socket.send("ping");
|
||||
if (socket && socket?.readyState == WebSocket.OPEN)
|
||||
socket.send("ping");
|
||||
// 响应服务器的 ping
|
||||
// socket.on("ping", () => {
|
||||
// socket.senrd("pong");
|
||||
|
|
|
@ -108,6 +108,9 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
|
|||
const body = {
|
||||
mid: base.b_mid,
|
||||
};
|
||||
const receive = await requireAPI("POST", "/api/notification/receive", {
|
||||
body,
|
||||
});
|
||||
const _data = await requireAPI(
|
||||
"POST",
|
||||
"/api/notification/get_unread_count",
|
||||
|
@ -128,7 +131,7 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
|
|||
(acc, cur) => acc + cur.unread_cnt,
|
||||
0
|
||||
);
|
||||
|
||||
dispatch(getNoticeCount(noticeCount));
|
||||
setData(_data.data);
|
||||
setInfoItems((old) => {
|
||||
const newInfoItems = [...old];
|
||||
|
|
|
@ -5,6 +5,7 @@ import { useTailwind } from "tailwind-rn";
|
|||
import { formatDate, goToPage } from "../../../../utils/tools";
|
||||
import { Image } from "expo-image";
|
||||
import Toast from "react-native-toast-message";
|
||||
import * as Linking from "expo-linking";
|
||||
export default function NoticeItem({ navigation, leftIcon, hasLink, data }) {
|
||||
const tailwind = useTailwind();
|
||||
// const currentLink = useMemo(() => {
|
||||
|
@ -64,30 +65,64 @@ export default function NoticeItem({ navigation, leftIcon, hasLink, data }) {
|
|||
}
|
||||
if (data?.hyperlinks) {
|
||||
// const linkStr = goToPage(data?.hyperlinks[0]?.params);
|
||||
const linkAndParams = goToPage(data?.hyperlinks[0]?.params);
|
||||
console.log("linkAndParams", data?.hyperlinks);
|
||||
|
||||
if (linkAndParams) {
|
||||
if (typeof linkAndParams === "object") {
|
||||
navigation.navigate(...linkAndParams);
|
||||
} else {
|
||||
if (linkAndParams.indexOf("JoinStreamer") != -1) {
|
||||
navigation.navigate("StreamerVerification", {
|
||||
screen: "JoinStreamer",
|
||||
});
|
||||
} else if (
|
||||
linkAndParams.indexOf(
|
||||
"CompleteStreamerInformation"
|
||||
) != -1
|
||||
) {
|
||||
navigation.navigate("StreamerVerification", {
|
||||
screen: "CompleteStreamerInformation",
|
||||
});
|
||||
return;
|
||||
}
|
||||
navigation.navigate(linkAndParams);
|
||||
}
|
||||
const links = data?.hyperlinks;
|
||||
let link = null;
|
||||
if (links.length > 1) {
|
||||
link = links.filter(
|
||||
(it) => it.inward_action_type === "app"
|
||||
)[0]?.params;
|
||||
} else {
|
||||
link = links[0]?.params;
|
||||
}
|
||||
const linkAndParams = goToPage({
|
||||
url: link,
|
||||
action: links[0]?.inward_action_type,
|
||||
});
|
||||
console.log("links", linkAndParams);
|
||||
console.log("linkAndParams", {
|
||||
url: link,
|
||||
action: links[0]?.inward_action_type,
|
||||
});
|
||||
if (typeof linkAndParams === "string") {
|
||||
try {
|
||||
// 尝试启动微信客户端
|
||||
Linking.openURL(linkAndParams).catch(() => {
|
||||
// 启动微信客户端失败,弹出提示安装对话框
|
||||
Alert.alert(
|
||||
"错误提醒",
|
||||
"打开链接失败,请返回重试或者联系在线客服",
|
||||
[{ text: "确认", style: "cancel" }],
|
||||
{ cancelable: false }
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
// 启动微信客户端失败,继续加载URL
|
||||
console.error(error);
|
||||
}
|
||||
} else {
|
||||
navigation.navigate(...linkAndParams);
|
||||
}
|
||||
// if (linkAndParams) {
|
||||
// if (typeof linkAndParams === "object") {
|
||||
// navigation.navigate(...linkAndParams);
|
||||
// } else {
|
||||
// // if (linkAndParams.indexOf("JoinStreamer") != -1) {
|
||||
// // navigation.navigate("StreamerVerification", {
|
||||
// // screen: "JoinStreamer",
|
||||
// // });
|
||||
// // } else if (
|
||||
// // linkAndParams.indexOf(
|
||||
// // "CompleteStreamerInformation"
|
||||
// // ) != -1
|
||||
// // ) {
|
||||
// // navigation.navigate("StreamerVerification", {
|
||||
// // screen: "CompleteStreamerInformation",
|
||||
// // });
|
||||
// // return;
|
||||
// // }
|
||||
// navigation.navigate(linkAndParams);
|
||||
// }
|
||||
// }
|
||||
// console.log(linkStr);
|
||||
|
||||
// if (linkStr.indexOf("JoinStreamer") != -1) {
|
||||
|
|
|
@ -13,11 +13,16 @@ import { get } from "../../../utils/storeInfo";
|
|||
import baseRequest from "../../../utils/baseRequest";
|
||||
import { generateSignature } from "../../../utils/crypto";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import Banner from "../../../components/Banner";
|
||||
import requireAPI from "../../../utils/requireAPI";
|
||||
import * as Linking from "expo-linking";
|
||||
import { goToPage } from "../../../utils/tools";
|
||||
export default function HostList() {
|
||||
const navigation = useNavigation();
|
||||
const tailwind = useTailwind();
|
||||
const screenWidth = Dimensions.get("window").width;
|
||||
const [hostList, setHostList] = useState([]);
|
||||
const [bannerList, setBannerList] = useState([]);
|
||||
useEffect(() => {
|
||||
const getHostList = async () => {
|
||||
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
||||
|
@ -45,10 +50,53 @@ export default function HostList() {
|
|||
console.error(error);
|
||||
}
|
||||
};
|
||||
const getBannerList = async () => {
|
||||
try {
|
||||
const _data = await requireAPI(
|
||||
"POST",
|
||||
"/api/activity_banner/list",
|
||||
null,
|
||||
true
|
||||
);
|
||||
if (_data.ret === -1) {
|
||||
Toast.show({
|
||||
icon: "fail",
|
||||
content: _data.msg,
|
||||
position: "top",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const bannerList = _data.data.list.map((item) => {
|
||||
const links = item?.hyperlinks;
|
||||
let link = null;
|
||||
if (links.length > 1) {
|
||||
link = links.filter((it) => it.inward_action_type === "app")[0]
|
||||
?.url;
|
||||
} else {
|
||||
link = links[0]?.url;
|
||||
}
|
||||
return {
|
||||
link: {
|
||||
url: link,
|
||||
action: links[0]?.inward_action_type,
|
||||
},
|
||||
url: item?.image.images[0]?.urls[0],
|
||||
id: item?.id,
|
||||
};
|
||||
});
|
||||
setBannerList(bannerList);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
getHostList();
|
||||
getBannerList();
|
||||
}, []);
|
||||
return (
|
||||
<View style={tailwind("flex-1 px-4 mt-2")}>
|
||||
<View style={tailwind("flex-1 px-4")}>
|
||||
<View style={tailwind("mb-4")}>
|
||||
<Banner banners={bannerList} navigation={navigation} />
|
||||
</View>
|
||||
<View style={tailwind("flex flex-row justify-between items-center")}>
|
||||
<Text style={tailwind("text-white text-xl font-medium")}>猜你想看</Text>
|
||||
<TouchableOpacity
|
||||
|
@ -70,14 +118,42 @@ export default function HostList() {
|
|||
<View>
|
||||
{hostList.length > 0 &&
|
||||
hostList.map((item, index) => (
|
||||
<ListItem
|
||||
key={item.mid}
|
||||
containerStyle={tailwind("p-0 bg-[#07050A]")}
|
||||
>
|
||||
<ListItem key={index} containerStyle={tailwind("p-0 bg-[#07050A]")}>
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
navigation.navigate("SpaceIntroduce", { mid: item.mid })
|
||||
}
|
||||
onPress={() => {
|
||||
const links = item?.hyperlinks;
|
||||
let link = null;
|
||||
if (links.length > 1) {
|
||||
link = links.filter(
|
||||
(it) => it.inward_action_type === "app"
|
||||
)[0]?.url;
|
||||
} else {
|
||||
link = links[0]?.url;
|
||||
}
|
||||
const linkAndParams = goToPage({
|
||||
action: links[0]?.inward_action_type,
|
||||
url: link,
|
||||
});
|
||||
if (typeof linkAndParams === "string") {
|
||||
try {
|
||||
// 尝试启动微信客户端
|
||||
Linking.openURL(linkAndParams).catch(() => {
|
||||
// 启动微信客户端失败,弹出提示安装对话框
|
||||
Alert.alert(
|
||||
"错误提醒",
|
||||
"打开链接失败,请返回重试或者联系在线客服",
|
||||
[{ text: "确认", style: "cancel" }],
|
||||
{ cancelable: false }
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
// 启动微信客户端失败,继续加载URL
|
||||
console.error(error);
|
||||
}
|
||||
} else {
|
||||
navigation.navigate(...linkAndParams);
|
||||
}
|
||||
}}
|
||||
style={tailwind("flex-row py-3")}
|
||||
>
|
||||
<Image
|
||||
|
@ -102,42 +178,46 @@ export default function HostList() {
|
|||
/>
|
||||
)}
|
||||
|
||||
<View
|
||||
style={tailwind(
|
||||
"flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
|
||||
)}
|
||||
>
|
||||
<NativeImage
|
||||
source={
|
||||
item.gender
|
||||
? require("../../../assets/icon/12DP/female.png")
|
||||
: require("../../../assets/icon/12DP/male.png")
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={tailwind(
|
||||
"text-white text-xs font-medium ml-0.5"
|
||||
)}
|
||||
>
|
||||
{item.age}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={tailwind(
|
||||
"flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
|
||||
)}
|
||||
>
|
||||
<NativeImage
|
||||
source={require("../../../assets/icon/12DP/location.png")}
|
||||
/>
|
||||
<Text
|
||||
style={tailwind(
|
||||
"text-white text-xs font-medium ml-0.5"
|
||||
)}
|
||||
>
|
||||
{item.city}
|
||||
</Text>
|
||||
</View>
|
||||
{!!item.age && (
|
||||
<>
|
||||
<View
|
||||
style={tailwind(
|
||||
"flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
|
||||
)}
|
||||
>
|
||||
<NativeImage
|
||||
source={
|
||||
item.gender
|
||||
? require("../../../assets/icon/12DP/female.png")
|
||||
: require("../../../assets/icon/12DP/male.png")
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={tailwind(
|
||||
"text-white text-xs font-medium ml-0.5"
|
||||
)}
|
||||
>
|
||||
{item.age}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={tailwind(
|
||||
"flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
|
||||
)}
|
||||
>
|
||||
<NativeImage
|
||||
source={require("../../../assets/icon/12DP/location.png")}
|
||||
/>
|
||||
<Text
|
||||
style={tailwind(
|
||||
"text-white text-xs font-medium ml-0.5"
|
||||
)}
|
||||
>
|
||||
{item.city}
|
||||
</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={tailwind("text-sm text-[#FFFFFF80]")}
|
||||
|
|
|
@ -753,7 +753,7 @@ export default function Search({ navigation, route }) {
|
|||
}}
|
||||
style={{
|
||||
...tailwind(
|
||||
"pl-4 flex-1 rounded-xl flex-row items-center justify-around"
|
||||
"flex-1 rounded-xl flex-row items-center justify-around"
|
||||
),
|
||||
borderColor: "#ff75c8",
|
||||
borderWidth: filtersValue.comprehensiveUsed.used ? 1 : 0,
|
||||
|
|
|
@ -73,14 +73,14 @@ export default function Stream({ navigation }) {
|
|||
tabStyle={{ width: "auto" }}
|
||||
renderIndicator={renderIndicator}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
{/* <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> */}
|
||||
</View>
|
||||
),
|
||||
[]
|
||||
|
|
|
@ -54,8 +54,9 @@ export function debounce(fn, delay) {
|
|||
};
|
||||
}
|
||||
// 跳转页面
|
||||
export function goToPage(link) {
|
||||
let linkArr = link.split("?");
|
||||
export function goToPage({ url, action }) {
|
||||
if (action !== "app") return url;
|
||||
let linkArr = url.split("?");
|
||||
const params = linkArr[1]?.split("&");
|
||||
|
||||
if (!params) return linkArr[0];
|
||||
|
|
Loading…
Reference in New Issue