Reactjs 如何在react native中创建动画屏幕

我正在尝试制作一个类似于这张图片的动画屏幕，但我没有正确完成。b我想要我上传的这张照片。我不擅长动画，请帮助我改进我的代码。我被困在动画中

这就是我试过的

import React, { Component } from 'react'
import { View, Image, Animated, Easing } from 'react-native'

const backgroundImage = require("../../../assets/icons/post.jpeg")
export default class Splash extends Component {
constructor(props) {
    super(props)
    this.state = { spinAnim: new Animated.Value(0) }
}

componentDidMount() {
    this.handleAnimation()
}

handleAnimation = () => {
    console.log("rree")
    Animated.timing(
        this.state.spinAnim,
        {
            toValue: 1,
            duration: 500,
            easing: Easing.linear,
            useNativeDriver: true
        }
    ).start();
}

render() {
    const spin = this.state.spinAnim.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    });
    return (
        <View>
            <View style={{ flex: 1 }}>
                <Animated.Image
                    source={backgroundImage}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: 40,
                        top: 100,
                        height: 100,
                        width: 100,
                        transform: [
                            { rotate: spin },
                        ]
                    }}
                />
            </View>
        </View>
    )
}
}

import React，{Component}来自“React”
从“react native”导入{视图、图像、动画、动画}
const backgroundImage=require（“../../../assets/icons/post.jpeg”）
导出默认类Splash扩展组件{
建造师（道具）{
超级（道具）
this.state={spinAnim:new Animated.Value（0）}
}
componentDidMount（）{
这个.handleAnimation（）
}
handleAnimation=（）=>{
控制台日志（“rree”）
时间(
这个，州，斯皮尼姆，
{
toValue:1，
持续时间：500，
放松：放松，线性，
useNativeDriver：真的吗
}
).start（）；
}
render（）{
const spin=this.state.spinAnim.interpolate({
输入范围：[0，1]，
输出范围：['0deg'，'360deg']
});
返回(
)
}
}

如果你想使用一个软件包，你可以使用Lottie，expo也支持它

---

它创建了非常好看的带有后期效果的本地动画。在youtube上搜索我看到了一个非常干净的教程。祝你好运

如果你想使用软件包，你可以使用乐天，世博会也支持它

它创建了非常好看的带有后期效果的本地动画。在youtube上搜索我看到了一个非常干净的教程。祝你好运

我认为你应该使用图书馆。在这个库中，你有很多你想要使用的动画和转场。它很容易使用

import * as Animatable from 'react-native-animatable';

<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>

import*作为“react native Animatable”中的动画；
把我放大，斯科蒂

在这个库中，您可以使用更多的道具，如动画结束时，您可以根据需要调用函数。

我认为您应该使用库。在这个库中，你有很多你想要使用的动画和转场。它很容易使用

import * as Animatable from 'react-native-animatable';

<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>

import*作为“react native Animatable”中的动画；
把我放大，斯科蒂

---

在这个库中，你可以使用更多的道具，比如

onAnimationEnd

当动画结束时，你可以调用一个函数，如果你想的话。

你试过洛蒂了吗？@vrushi没有！我没有尝试过洛蒂库，因为我没有json数据，我只有图像。你尝试过洛蒂库吗？@vrushi没有！我没有尝试洛蒂图书馆，因为我没有json数据，我只有图像。谢谢。但是我没有JSON数据，我只有图片。谢谢。但我没有JSON数据，只有图片。