tiefen_space_app/components/Banner/index.jsx

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;
}