如何在 React Native 中使用 uri 播放 Lottie 动画？

Question

我如何在 React Native 中从服务器 (uri) 播放 Lottie 动画？我可以从我的项目资产中播放动画但是当我使用 source={{uri:"https://...data here..."}} 我遇到错误...即使我下载了 json 文件到 phone 并尝试从 phone 存储播放，但也遇到错误！这里的代码：

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

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

Answer 1

我找到了...我刚刚找到了方法:') 你只需要获取 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>

)}

如何在 React Native 中使用 uri 播放 Lottie 动画？

how to play Lottie animations with uri in react native?

react-native

animation

react-native-android

lottie