Ошибка React-Spring: «анимированная» библиотека из response-spring возвращает недопустимый тип элемента ERROR - PullRequest
Новая
       16

Ошибка React-Spring: «анимированная» библиотека из response-spring возвращает недопустимый тип элемента ERROR

0 голосов
/ 12 января 2020

Я пытаюсь сделать простую анимацию, в которой мое изображение исчезнет.

Код ниже Я импортирую {useSpring, animated} from 'react-spring'. Я создаю простое использование пружинной функции logoLoadingScreen. Затем я добавляю функцию в стили для IMAGE; однако анимация не отображается. 

import React from 'react';
import {useSpring, animated} from 'react-spring'
import {View,Text,StyleSheet,Image} from 'react-native';

const logoReParty = () =>{
    require('../img/img1.jpg')
}

const logoLoadingScreen = () => {

    //react Native ANIMATION from 'react-spring'
    const fade = useSpring({
        from:{
            opacity: 0
        },
        to: {
            opacity: 1
        }
    });


    return <View>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </View>
};

Кроме того, я опробовал этот метод ниже, чтобы использовать «анимированную» библиотеку для переноса содержимого VIEW. Однако я получаю сообщение об ошибке stating 'Invariant Violation: Element type is invalid expected a string or a class/function but got: undefined. 

    return <animated.View>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </animated.View>
};

Как я могу показать анимацию постепенного исчезновения на изображении с помощью response-spring? Кроме того, как я могу показать анимацию исчезновения для всего экрана?

Спасибо:)

ОБНОВЛЕНИЕ

Как упомянуто ниже, я создал новый const AnimatedView = animated (Посмотреть). Однако непрозрачность экрана не меняется, и я не вижу изменений в анимации. 

const AnimatedView = animated(View);

const logoLoadingScreen = () => {

    //react Native ANIMATION from 'react-spring'
    const fade = useSpring({
        from:{
            opacity: 0
        },
        to: {
            opacity: 0.2
        }
    });


    return <AnimatedView style={logoLoadingScreen}>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </AnimatedView>
};

Какова возможная причина, по которой анимация не появляется на экране? К вашему сведению: больше нет ошибок, но вместо этого на экране не отображается анимация. Еще раз спасибо за вашу помощь! ^^

решено

Добавьте стиль постепенного исчезновения, который решил мою проблему с наличием анимации. 

return <AnimatedView style={logoLoadingScreen,fade}>

СПАСИБО ЗА ТО, КТО МЕНЯ ПОМОГ: :)

Ответы [ 2 ]

1 голос
/ 12 января 2020

Только анимированные элементы html доступны как постоянные. Например, div доступен как animated.div. Для реагирования нативных и для ваших собственных компонентов таких констант нет. Вы должны создать новый компонент с анимацией. И вы должны использовать этот новый вместо простого просмотра.

Создайте новый компонент: 

const AnimatedView = animated(View)

return <AnimatedView style={logoLoadingScreen, ...fade}>
1 голос
/ 12 января 2020

добавить импорт

import { Animated} from 'react-native'

изменить 

return <Animated.View>
...