tiefen_space_app/components/ImageViewer/index.jsx

import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  ActivityIndicator,
  Platform,
} from "react-native";
import React, { useState, useCallback, useEffect } from "react";
import { ImageViewer as OriginImageViewer } from "react-native-image-zoom-viewer";
import { Icon } from "@rneui/themed";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import saveImage from "../../utils/saveImage";
import Toast from "react-native-toast-message";
import { get } from "../../utils/storeInfo";
import { useNavigation } from "@react-navigation/native";
import MyModal from "../MyModal";
import { Image } from "expo-image";
import { Button } from "@rneui/themed";
import { LinearGradient } from "expo-linear-gradient";

//imageUrls      [{ url: string }]
//index          int
//lockedStartIndex    int
//onPressUnlockBtn  () => void

export function ImageViewer({
  isShow,
  onClose,
  onChange,
  imageUrls,
  index,
  lockedStartIndex,
  onPressUnlockBtn,
}) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  const navigation = useNavigation();

  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    setIsVisible(isShow);
  }, [isShow]);

  const closeImageViewer = () => {
    setIsVisible(false);
    onClose && onClose();
  };

  const checkRole = useCallback(async () => {
    const account = await get("account");
    const role = account.role;
    const isVip = account.is_a_member;
    if (role !== 0 || isVip === 1) return true;
    return false;
  }, []);

  const MenusComponent = useCallback(
    ({ cancel, saveToLocal }) => (
      <Modal
        visible={true}
        transparent={true}
        statusBarTranslucent
        animationType="fade"
      >
        <TouchableOpacity
          onPress={cancel}
          activeOpacity={1}
          style={tailwind("flex flex-1 bg-[#00000080]")}
        >
          <TouchableOpacity
            activeOpacity={1}
            style={{
              paddingBottom: insets.bottom,
              paddingLeft: insets.left,
              paddingRight: insets.right,
              ...tailwind(
                "absolute bottom-0 left-0 h-32 w-full bg-[#13121F] rounded-t-2xl"
              ),
            }}
          >
            <View style={tailwind("flex flex-1 flex-row items-center px-4")}>
              <TouchableOpacity
                onPress={async () => {
                  const isVip = await checkRole();
                  if (isVip) {
                    saveToLocal();
                    return;
                  }
                  closeImageViewer();
                  navigation.navigate("WebWithoutHeader", {
                    uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
                  });
                }}
                style={tailwind("flex flex-col items-center px-4")}
              >
                <Icon type="ionicon" name="image" size={30} color="white" />
                <Text
                  style={tailwind("text-sm text-[#FFFFFF80] font-medium mt-1")}
                >
                  保存(会员特权)
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={cancel}
                style={tailwind("flex flex-col items-center px-4")}
              >
                <Icon
                  type="ionicon"
                  name="close-circle"
                  size={30}
                  color="white"
                />
                <Text
                  style={tailwind("text-sm text-[#FFFFFF80] font-medium mt-1")}
                >
                  取消
                </Text>
              </TouchableOpacity>
            </View>
          </TouchableOpacity>
        </TouchableOpacity>
      </Modal>
    ),
    []
  );

  const [isVipModalVisible, setIsVipModalVisible] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const hanldSaveImage = async (index) => {
    const isVip = await checkRole();
    if (!isVip) {
      setIsVipModalVisible(true);
      return;
    }
    if (isSaving) return;
    setIsSaving(true);
    await saveImage(imageUrls[index].url);
    setIsSaving(false);
  };

  return (
    <Modal visible={isVisible} statusBarTranslucent transparent={true}>
      <OriginImageViewer
        imageUrls={imageUrls}
        index={index}
        onClick={closeImageViewer}
        onSwipeDown={closeImageViewer}
        onChange={onChange ? (index) => onChange(index) : () => null}
        enableSwipeDown
        backgroundColor="#07050A"
        renderImage={(props) => {
          if (index >= lockedStartIndex) {
            return (
              <View>
                <Image
                  {...props}
                  blurRadius={Platform.OS === "ios" ? 100 : 10}
                />
                <View
                  style={tailwind(
                    "absolute flex justify-center items-center top-0 left-0 bg-[#00000080] w-full h-full"
                  )}
                >
                  <Button
                    onPress={() => {
                      closeImageViewer();
                      onPressUnlockBtn();
                    }}
                    ViewComponent={LinearGradient}
                    radius="999"
                    size="md"
                    linearGradientProps={{
                      colors: ["#FF668B", "#FF66F0"],
                      start: { x: 0, y: 0.5 },
                      end: { x: 1, y: 0.5 },
                    }}
                    titleStyle={tailwind("text-base font-medium")}
                    containerStyle={tailwind("w-3/4 px-4")}
                  >
                    立即解锁
                  </Button>
                </View>
              </View>
            );
          }
          return <Image {...props} />;
        }}
        renderFooter={(index) => (
          <TouchableOpacity
            onPress={() => hanldSaveImage(index)}
            style={{
              marginLeft: 20,
              marginBottom: insets.bottom,
              ...tailwind(
                "flex justify-center items-center w-12 h-12 bg-[#FFFFFF1A] rounded-full"
              ),
            }}
          >
            {isSaving && <ActivityIndicator size="small" />}
            {!isSaving && (
              <Icon
                type="ionicon"
                name="save-outline"
                size={20}
                color="white"
              />
            )}
          </TouchableOpacity>
        )}
        onSave={(url) => {
          saveImage(url);
        }}
        saveToLocalByLongPress
        menus={MenusComponent}
        loadingRender={() => <ActivityIndicator size="large" />}
      />
      <Toast />
      <MyModal
        visible={isVipModalVisible}
        setVisible={setIsVipModalVisible}
        title="是否开通会员？"
        content="会员可无限制保存图片/视频，一次开通永久有效。"
        cancel={() => {
          setIsVipModalVisible(false);
        }}
        confirm={() => {
          setIsVipModalVisible(false);
          closeImageViewer();
          navigation.navigate("WebWithoutHeader", {
            uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
          });
        }}
      />
    </Modal>
  );
}