144 lines
3.9 KiB
JavaScript
144 lines
3.9 KiB
JavaScript
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>
|
||
);
|
||
}
|