javascript - React-Spring错误: 'animated' library from react-spring returns ERROR element type is invalid

Question

我正在尝试制作一个简单的动画，我的图像会淡入其中。

我正在导入下面的代码{useSpring, animated} from 'react-spring' 。我创建了简单的 useSpring 函数 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>
};

如何使用react-spring在图像上显示淡入淡出动画？另外，如何在整个屏幕上显示淡入淡出动画？

谢谢:)

更新

<小时/>

就像下面提到的，我创建了新的 const AnimatedView =animated(View)。然而，屏幕的不透明度没有改变，我看到动画也没有改变。

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}>

感谢那些帮助过我的人:)

Answer 1

只有 html 元素可以作为动画常量进行访问。例如，div 可以作为animated.div 进行访问。对于 React Native 和您自己的组件来说，没有这样的常量。您必须创建一个带有动画的新组件。而且您必须使用这个新 View 而不是普通 View 。

创建一个新组件:

const AnimatedView = animated(View)

return <AnimatedView style={logoLoadingScreen, ...fade}>