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

Question

我正在使用 react-native 开发一个应用程序，并且我正在尝试为其启动屏幕设置动画。我想在 3 秒后导航到下一个屏幕。我想知道如何将计时器（如 setTimeOut()）与像 useEffect() 这样的反应钩子一起使用。这是我的代码：

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

在useEffect 调用中移动计时器：

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