tiefen_space_app/components/FriendshipModal/index.jsx

import {
  View,
  Text,
  Modal,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Alert,
} from "react-native";
import React, { useState, useMemo } from "react";
import { useTailwind } from "tailwind-rn";
import { LinearProgress, Icon } from "@rneui/themed";
import * as Clipboard from "expo-clipboard";

/*
data格式：
 {
    nowFriendshipNum:int,
    totalFriendshipNum:int,
    wechat:string
 }
 */

export default function FriendShipModal({ visible, setVisible, data }) {
  const tailwind = useTailwind();
  const friendshipProgress = useMemo(
    () => Math.floor((data.nowFriendshipNum / data.totalFriendshipNum) * 100),
    [data]
  );
  const [isWechatShow, setIsWechatShow] = useState(false);
  return (
    <Modal
      visible={visible}
      transparent={true}
      statusBarTranslucent
      animationType="fade"
    >
      <TouchableWithoutFeedback onPress={() => setVisible(false)}>
        <View
          style={{
            backgroundColor: "rgba(0,0,0,0.3)",
            ...tailwind("flex-1 justify-center items-center"),
          }}
        >
          <View style={tailwind("items-start bg-white rounded-lg p-4 w-3/4")}>
            <View style={tailwind("flex-row items-end")}>
              <Text style={tailwind("text-base")}>当前亲密度为：</Text>
              <Text style={tailwind("text-2xl text-red-400")}>
                {`${friendshipProgress}%`}
              </Text>
            </View>
            <LinearProgress
              style={tailwind("flex-row w-full h-2 mt-2 rounded-full")}
              value={friendshipProgress / 100}
              color="#f87171"
              variant="determinate"
            />
            <Text
              style={tailwind("text-sm text-red-400")}
            >{`${data.nowFriendshipNum}/${data.totalFriendshipNum}  亲密值`}</Text>
            <Text style={tailwind("text-sm text-gray-400 mt-2")}>
              1金币=1亲密值，亲密值达到
              <Text style={tailwind("text-red-400")}>
                {data.totalFriendshipNum}
              </Text>
              即可解锁她的微信哦！
            </Text>
            {friendshipProgress >= 100 ? (
              <TouchableOpacity
                style={{
                  ...tailwind(
                    "w-full p-2 rounded-full mt-2 flex-row justify-center items-center"
                  ),
                  backgroundColor: isWechatShow ? "#9ca3af" : "#4ade80",
                }}
                onPress={async () => {
                  if (!isWechatShow) {
                    setIsWechatShow(true);
                  } else {
                    await Clipboard.setStringAsync(data.wechat);
                    Alert.alert(null, "复制成功");
                    setIsWechatShow(false);
                  }
                }}
              >
                <Text style={tailwind("text-base text-white text-center")}>
                  {isWechatShow ? data.wechat : "查看微信"}
                </Text>
                {isWechatShow && (
                  <Icon
                    type="ionicon"
                    name="copy"
                    color="#ffffff"
                    size={12}
                    containerStyle={tailwind("ml-2")}
                  />
                )}
              </TouchableOpacity>
            ) : (
              <TouchableOpacity
                activeOpacity={1}
                style={tailwind("w-full p-2 bg-gray-300 rounded-full mt-2")}
              >
                <Text style={tailwind("text-base text-white text-center")}>
                  暂未解锁
                </Text>
              </TouchableOpacity>
            )}
            <Text style={tailwind("text-sm text-red-600 mt-2 font-semibold")}>
              温馨提示
            </Text>
            <Text style={tailwind("text-xs text-red-400 mt-1")}>
              1、亲密度代表了熟悉程度,循序渐进的积累更有助于稳固彼此的亲密关系哦！
              {"\n"}
              2、平台禁止一切诈骗、涉黄等违法行为。{"\n"}
              3、如主播在直播任何场合以陪玩、送礼等方式进行诱导用户添加个人联系方式、打赏、私下交易，进行违法行为，一经发现永久封禁，请谨慎判断，以防人身或财产损失。请用户注意财产安全，蓬防网络诈骗。此外，用户在第三方平台与主播产生的任何风险与财产损失与平台无关。
            </Text>
            <View style={tailwind("items-center justify-center w-full")}>
              <Text
                style={tailwind(
                  "text-xs text-red-600 mt-2 font-semibold text-center"
                )}
              >
                24小时内未成功添加微信请联系客服
              </Text>
              <Text
                style={tailwind(
                  "text-xs text-red-600 font-semibold text-center"
                )}
              >
                若发现主播违规行为请联系客服进行举报
              </Text>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
}