Как использовать таймеры в React Hook? - PullRequest
Новая
       5

Как использовать таймеры в React Hook?

0 голосов
/ 02 февраля 2020

Я занимаюсь разработкой приложения с реактивной поддержкой и пытаюсь установить анимацию для экрана spla sh. Я хочу перейти к следующему экрану через 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))
    }, []);

1 Ответ

0 голосов
/ 02 февраля 2020

Перемещение таймера внутри useEffect вызова: 

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