tiefen_space_app/screeens/NoticeDetail/components/ScrollNotice/index.js

import {
  View,
  Image as NativeImage,
  Text,
  Animated,
  Easing,
  TouchableOpacity,
  Alert,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import * as Linking from "expo-linking";

export default function ScrollNotice({
  navigation,
  length,
  content,
  url,
  action,
}) {
  const tailwind = useTailwind();
  const [fadeAnim] = useState(new Animated.Value(length * 75 + 4));
  let animation = Animated.timing(fadeAnim, {
    toValue: -(length * 75),
    duration: 15000,
    delay: 0,
    easing: Easing.linear,
    useNativeDriver: true,
    useNativeDriverForTransform: true, // 如果动画涉及transform属性，则需要此设置
  });
  useEffect(() => {
    return () => {
      animation && animation.stop();
      animation = null;
    };
  }, []);

  const runAnimation = () => {
    animation &&
      animation.start(() => {
        // 动画完成时的回调，重置动画值并再次运行动画以实现循环
        fadeAnim.setValue(length * 75); // 重置动画值（如果需要）
        runAnimation(); // 再次运行动画
      });
  };

  useEffect(() => {
    content.length > 10 && runAnimation(); // 组件挂载时开始动画
    // 注意：这里没有清理函数，因为动画是无限循环的。
    // 如果你需要在组件卸载时停止动画，你需要实现一个机制来跟踪组件的状态，并在适当时调用`stopAnimation`。
  }, [fadeAnim]);
  return (
    <View
      style={{
        ...tailwind("bg-[#301024] border-2 px-4 py-3 rounded-xl flex-row"),
        borderColor: "#FF518F26",
      }}
    >
      <View
        style={{
          ...tailwind("mr-2 "),
        }}
      >
        <NativeImage
          source={require("../../../../assets/icon/others/notice.png")}
        />
      </View>
      <TouchableOpacity
        onPress={() => {
          if (typeof url === "string") {
            if (
              action === "webViewHeaderInward" ||
              action === "webViewHeaderOutward"
            ) {
              navigation.navigate("WebWithHeader", {
                title: "",
                uri: url,
              });
              return;
            } else if (
              action === "webViewWithOutHeaderInward" ||
              action === "webViewWithOutHeaderOutward"
            ) {
              navigation.navigate("WebWithoutHeader", {
                title: "",
                uri: url,
              });
              return;
            }
            try {
              // 尝试启动微信客户端
              Linking.openURL(url).catch(() => {
                // 启动微信客户端失败，弹出提示安装对话框
                Alert.alert(
                  "错误提醒",
                  "打开链接失败，请返回重试或者联系在线客服",
                  [{ text: "确认", style: "cancel" }],
                  { cancelable: false }
                );
              });
            } catch (error) {
              // 启动微信客户端失败，继续加载URL
              console.error(error);
            }
          } else {
            navigation.navigate(...url);
          }
        }}
        style={{
          ...tailwind("flex-1"),
          overflow: "hidden",
        }}
      >
        <Animated.View
          style={{
            width: length * 75,
            // opacity: fadeAnim,
            transform: [
              {
                translateX: content.length > 10 ? fadeAnim : 0,
              },
            ],
            // transform: [
            //   {
            //     translateX: -(length * 75),
            //   },
            // ],
            // paddingBottom: 5,
          }}
        >
          <Text
            numberOfLines={1}
            style={{
              ...tailwind("text-white text-[#FF669E]"),
            }}
          >
            {content}
          </Text>
        </Animated.View>
      </TouchableOpacity>
    </View>
  );
}