React Fade Out анимация с помощью крючков - PullRequest
Новая
       5

React Fade Out анимация с помощью крючков

1 голос
/ 03 февраля 2020

Это приложение React Native. Я реализую компонент «обложка», который отображает изображение, как только видео загружено, изображение исчезает и вместо него воспроизводится видео. Вот мой код: 

export default function Cover() {
    const [playVideo, setPlayVideo] = useState(false);
    const [coverOpacityAnimation] = useState(new Animated.Value(1))

    useEffect(() => {
        if (!playVideo) return;
        Animated.timing(coverOpacityAnimation, { 
            toValue: 0, 
            duration: 1000
        }).start()
    }, [playVideo])

    return (
        <View>
            <Animated.View style={{opacity: coverOpacityAnimation}}>
                <Image source={{uri: data.cover}} />
            </Animated.View>
            <Video 
                source={{uri: 'https://videostorage.net/public/video.mp4'}}
                onReadyForDisplay={() => setPlayVideo(true)} />
        </View>
    );
}

Проблема, с которой я сталкиваюсь, заключается в том, что при вызове setPayVideo(true) из компонента Video не происходит затухание, изображение просто исчезает, а видео воспроизводится. Если я это сделаю: 

    useEffect(() => {
        Animated.timing(coverOpacityAnimation, { 
            toValue: 0, 
            duration: 1000
        }).start()
    })

Анимация работает как положено. Мне нужно запустить его из видео onReadyForDisplay. Новое в крючках - помогите:)

...