React native 如何将JSON文件作为源提供给LottieView

我正在用React Native构建一个应用程序，在其中我使用了LottieFiles。如果我为它提供本地存储的

.json

文件，它可以正常工作：

<LottieView style={styles.container} source={require('../Assets/Animations/city.json')} autoPlay loop />

我可以看到一个很长的JSON响应，它看起来像Lottie JSON文件，然后我使用

jsonRet

作为：

<LottieView source={jsonRet} autoPlay loop />

<LottieView source={jsonRet} autoPlay loop />

然后我把它放在

LottieView

中，如下所示：

<LottieView source={jsonRet} autoPlay loop />

<LottieView source={jsonRet} autoPlay loop />

错误：

不变违例：[77，“LottieAnimationView”，1，“loop”：true，“progress”：0，“speed”：1，“resizeMode”：“contain”，“sourceJson”：“{}”，“onAnimationFinish”：true，“onLayout”：true，“aspectRatio”：“position”：“absolute”，“left”：0，“right”：0，“top”：0，“bottom”：0}]不能用作本机方法参数

及

错误：HostFunction中出现异常：来自JS的错误调用：字段大小不同

如上所述，您可以从API或类似的东西获取JSON，并按如下方式使用它：

让somejson=fetch（“”）
render（）{
{
！somejson？空：
} 
}

如果您没有任何API可从中获取，您可能可以：

首先：使用或从某处获取.JSON文件

第二：使用如下内容读取JSON文件：

    const [jsonRet, setJsonRet] = useState({});

    getData = () => {
        fetch('https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json()).then(data => {
            console.log('DATA IS: ' + JSON.stringify(data));
            setJsonRet(data)
        }).catch(err => {
            console.error(err)
        });
    }

    getData()

const customData=require（'./customData.json'）

如前所述

然后，按照答案开头所说的使用它

[编辑]

您得到的错误位于代码的

fetch

部分，您可以这样做：

    const [jsonRet, setJsonRet] = useState({});

    getData = () => {
        fetch('https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json()).then(data => {
            console.log('DATA IS: ' + JSON.stringify(data));
            setJsonRet(data)
        }).catch(err => {
            console.error(err)
        });
    }

    getData()

异步函数getLottieJSON（）{ 返回取回（“https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json", { 标题：{ “接受”：“应用程序/json”， “内容类型”：“应用程序/json”， } }) .then（（response）=>response.json（）） 。然后（（json）=>{ 返回json； }) .catch（（错误）=>{ 返回（错误） }); } 然后，在异步函数上调用它，可能是：

let somejson=wait getLottieJSON（）

---

更多关于

Fetch

函数的信息。

我做了

let cityJSON=Fetch（'GET'，'https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json');

然后

{！cityJSON？null:}

但它给出了相同的错误和一些新的警告，如

可能未处理的承诺拒绝

修改了我的答案，希望能有所帮助！我明白你的意思，并尝试了编辑后的版本，但仍然不起作用。首先，这个URL

https://assets3.lottiefiles.com/packages/lf20_0apkn3k1.json

不是返回的API它是一个简单的JSON文件，然后

wait

给出了一个错误删除它给了我四个错误。。。第一个是

[TypeError:read]

（在fetch.umd.js中），第二个是读取HostFunction中的

异常：来自js字段大小的错误调用不同。

第三个是

[77，“lottieeanimationview”，241，{“loop”…]不可用作本机方法参数。

第四个参数与第三个参数相同。它似乎应该可以工作，因为它是一个简单的JSON文件，但似乎不是那样工作的。您能再试一次吗？再次更新我的答案！