Question

我正在开发带有react-native的App，并且试图为其启动屏幕设置动画。我想在3秒后导航到下一个屏幕。我想知道如何使用带有useEffect（）之类的反应挂钩的计时器（如setTimeOut（））。这是我的代码：

const SplashScreen = props => {
    const opacityVal = new Animated.Value(0);
    const fadeAnime = () => {
        Animated.timing(opacityVal, {
            toValue: 1,
            duration: 2000,
            useNativeDriver: true,
        }).start()
    }
    let timer = setTimeout(() => props.navigation.navigate({ routeName: 'UserAuthenication'}), 2000);

    useEffect(fadeAnime, [opacityVal]);
    useEffect(()=>{
        return(() => clearTimeout(timer))
    }, []);
    return(
        <View style={styles.MainContainer}>
           <Animated.View style={{opacity: opacityVal}}>
              <TouchableOpacity style={styles.AnimeContainer}>
                 <Image source={require('../Pics/SplashScreenPic.jpg')} style={styles.ImageContainer}/>
              </TouchableOpacity>
           </Animated.View>
        </View>

    );
};

我试图做这样的工作，这在代码中很明显，但是没有用：

let timer = setTimeout(() => props.navigation.navigate({ routeName: 'UserAuthenication'}), 2000);
 useEffect(()=>{
        return(() => clearTimeout(timer))
    }, []);

Answer 1

在HRDetectorApp调用中移动计时器：

useEffect

如何在React挂钩中使用计时器？

1 个答案: