React Native Animated时序未按预期工作

Question

我无法使动画正常工作，它无法正常运行，我的组件在Animated.timing()的结尾按预期消失了，但我应该获得的滑动效果却无法正常工作：< / p>

import { /*many things*/, Animated } from 'react-native';
// other imports

const Dashboard = ({/*destructured props*/}) => {

        // many consts

        const SlideOutLeft = new Animated.Value(10);

        useEffect(() => {

            if(user.dashboardMessage) {

                setSuccessText(user.dashboardMessage);
                user.dashboardMessage = false;
                setTimeout(() => {
                    Animated.timing(
                        SlideOutLeft,
                        {
                            toValue: 500,
                            duration: 350,
                        }
                    ).start(() => {
                        setSuccessText("");
                    });
                }, 3000);
            }
            if(onboarding.messageSuccess) {
                setSuccessText(onboarding.messageSuccess);
                onboarding.messageSuccess = false;
                setTimeout(() => {
                    Animated.timing(
                    SlideOutLeft,
                    {
                        toValue: 500,
                        duration: 350,
                    }
                    ).start(() => {
                        setSuccessText("");
                    });

                }, 3000);
            }
            if(partners.messageSuccess) {
                setSuccessText(partners.messageSuccess);
                partners.messageSuccess = false;
                setTimeout(() => {
                    Animated.timing(
                        SlideOutLeft,
                        {
                            toValue: 500,
                            duration: 350,
                        }
                    ).start(() => {
                        setSuccessText("");
                    }); 
                }, 3000);
            }


        }, [user.dashboardMessage, onboarding.messageSuccess, partners.messageSuccess]);
        return (
            <Container>
                <View style={BottomNavigatorStyles.MainView}>
                    {successText !== "" &&
                        <Animated.View style={[Styles.Message, 
                            {backgroundColor: '#82DB35', translateX: SlideOutLeft}]}>
                            <Text style={Styles.WhiteSemiBold12}>
                                {successText}
                            </Text>
                        </Animated.View>
                    }
                    {errorText !== "" &&
                        <Animated.View style={[Styles.Message, 
                            {backgroundColor: '#E6007E', translateX: SlideOutLeft}]}>
                            <Text style={Styles.WhiteSemiBold12}>
                                {errorText}
                            </Text>
                        </Animated.View>
                    }
                </View>
                // too many other things
            </Container>
        );
};

setSuccessText在start()内正常工作，并且translateX正确获得了初始值（10），但是当我将successText设置为时，Animated.View不会移动并消失。 ""

更令人沮丧的是，我在interpolate上有一个translateY带有另一个动画的动画，在另一个Animated.View的这个组件中工作得很好。

P.S .： 500不是我想要的值，它只是用于测试