时间戳

首页 > 解决方案 > 如何在本机反应中使用 uri 播放 Lottie 动画？

react-native - 如何在本机反应中使用 uri 播放 Lottie 动画？

问题描述

我如何从服务器（uri）播放 Lottie 动画？我可以从我的项目资产中播放动画，但是当我使用 source={{uri:"https://...data here..."}} 时，我遇到了一个错误...即使我将 json 文件下载到手机并尝试然后从手机存储中播放，但也遇到了错误！这里的代码：

<LottieView style={{ width: "28%", marginTop: "5%", alignContent: "center", alignItems: "center", 
 alignSelf: "center" }}
 source={{uri:"file://///data/user/0/com.duststudio/files/vv/test2.json"}} 
 autoPlay
 loop />

我真的需要它...如果有人知道该怎么做，我会非常高兴和感激:)

标签： react-nativeanimationreact-native-androidlottie

解决方案

我找到了...我刚刚找到了方法 :') 你只需要获取 Lottie Animation 的 JSON 然后为它设置一个状态，看看这个：

 import React, { useState, useEffect } from 'react';
    import { Text, View, TouchableOpacity } from 'react-native';
    import LottieView from 'lottie-react-native';


   export default function App(){
     const [LottieAnim, setLottieAnim] = useState()
    
     useEffect(() => {
            fetch('https://test.ir/test.json', {
                method: "GET",
            })
                .then((response) => response.json())
                .then((responseData) => {
                    console.log(responseData);
                    setLottieAnim(responseData)
                })
                .catch((error) => {
                    console.log(error);
                })
        }, [])

return(

        <View style={{ flex: 1 }}>
              {LottieAnim ? <LottieView source={LottieAnim} style={{ width: "50%" }} autoPlay loop /> : (null)}
         </View>

)}

推荐阅读