React Native组件Props变化时重启动画的实现方案

你的核心问题是当新通知文本传入时，动画没有重新触发，这是因为原代码的useEffect依赖为空数组，仅在组件首次挂载时执行一次动画。结合setValue(0)重置动画的思路，我们可以这样修改代码：

修改后的完整代码 #

import { useState, useEffect, useRef } from 'react';
import { Animated, View, Text, StyleSheet } from 'react-native';

export default function Notification({ notification }) {
    if (!notification) {
        return null;
    }

    const fadeAnimation = useRef(new Animated.Value(0)).current;

    useEffect(() => {
        // 重置动画初始值为0，确保每次新通知都从透明状态开始
        fadeAnimation.setValue(0);
        
        // 创建动画序列
        const animation = Animated.sequence([
            Animated.timing(fadeAnimation, {
                toValue: 1,
                duration: 500,
                useNativeDriver: true,
            }),
            Animated.delay(3000),
            Animated.timing(fadeAnimation, {
                toValue: 0,
                duration: 500,
                useNativeDriver: true,
            })
        ]);

        // 启动动画
        animation.start();

        // 清理函数：停止当前动画，避免新通知到来时旧动画干扰
        return () => {
            animation.stop();
        };
    }, [notification]); // 依赖加入notification，每次通知变化时触发动画

    return (
        <Animated.View style={{ opacity: fadeAnimation }}>
            <View style={styles.notification}>
                <Text style={styles.text}>{notification}</Text>
            </View>
        </Animated.View>
    );
}

const styles = StyleSheet.create({
    notification: {
        padding: 12,
        backgroundColor: 'rgba(0,0,0,0.7)',
        borderRadius: 8,
        position: 'absolute',
        top: 40,
        left: 20,
        right: 20,
    },
    text: {
        color: 'white',
        textAlign: 'center',
    },
});

关键修改点说明 #

• 依赖数组添加notification：每次传入新的通知文本时，useEffect会重新执行，触发新的动画流程。
• 动画前调用setValue(0)：强制将动画值重置为0，保证新通知从完全透明的状态开始淡入，不会继承上一次动画的中间状态。
• 改用useRef存储Animated.Value：避免每次组件渲染时重新创建动画实例，既提升性能，又能保持动画状态的持续性。
• 添加动画清理逻辑：在useEffect的返回函数中调用animation.stop()，防止旧动画还在执行时新动画启动，造成动画混乱和内存泄漏。

内容的提问来源于stack exchange，提问作者mostsignificant