101 lines
3.4 KiB
JavaScript
101 lines
3.4 KiB
JavaScript
import { View, Text, Alert, 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";
|
||
import * as Linking from "expo-linking";
|
||
import { goToPage } from "../../utils/tools";
|
||
export default function Banner({
|
||
navigation,
|
||
banners,
|
||
width = Dimensions.get("window").width - 32,
|
||
height = Math.ceil(((Dimensions.get("window").width - 32) * 3) / 7),
|
||
}) {
|
||
const tailwind = useTailwind();
|
||
|
||
return !!banners.length ? (
|
||
<Swiper
|
||
autoplay
|
||
width={width}
|
||
height={height}
|
||
paginationStyle={tailwind("bottom-2")}
|
||
activeDotStyle={tailwind("bg-[#FF669E]")}
|
||
>
|
||
{/* <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}
|
||
activeOpacity={1}
|
||
style={{ ...tailwind("h-full"), width: "calc(100vw - 5rem)" }}
|
||
onPress={() => {
|
||
const linkAndParams = goToPage(banner?.link);
|
||
const link = banner?.link;
|
||
|
||
if (typeof linkAndParams === "string") {
|
||
if (
|
||
link?.action === "webViewHeaderInward" ||
|
||
link?.action === "webViewHeaderOutward"
|
||
) {
|
||
navigation.navigate("WebWithHeader", {
|
||
title: "",
|
||
uri: linkAndParams,
|
||
});
|
||
return;
|
||
} else if (
|
||
link?.action === "webViewWithOutHeaderInward" ||
|
||
link?.action === "webViewWithOutHeaderOutward"
|
||
) {
|
||
navigation.navigate("WebWithoutHeader", {
|
||
title: "",
|
||
uri: linkAndParams,
|
||
});
|
||
return;
|
||
}
|
||
try {
|
||
// 尝试启动微信客户端
|
||
Linking.openURL(linkAndParams).catch(() => {
|
||
// 启动微信客户端失败，弹出提示安装对话框
|
||
Alert.alert(
|
||
"错误提醒",
|
||
"打开链接失败，请返回重试或者联系在线客服",
|
||
[{ text: "确认", style: "cancel" }],
|
||
{ cancelable: false }
|
||
);
|
||
});
|
||
} catch (error) {
|
||
// 启动微信客户端失败，继续加载URL
|
||
console.error(error);
|
||
}
|
||
} else {
|
||
navigation.navigate(...linkAndParams);
|
||
}
|
||
}}
|
||
>
|
||
<View style={tailwind("h-full rounded-lg overflow-hidden")}>
|
||
<Image
|
||
source={banner.url}
|
||
contentFit="cover"
|
||
transition={1000}
|
||
cachePolicy="disk"
|
||
style={{
|
||
...tailwind("h-full rounded-lg overflow-hidden"),
|
||
width: "calc(100vw - 5rem)",
|
||
}}
|
||
/>
|
||
</View>
|
||
</TouchableOpacity>
|
||
))}
|
||
</Swiper>
|
||
) : null;
|
||
}
|