React Native如何将Lottie文件解析到状态？Expo加载动画报错求助

咱们先搞定你遇到的那个JSON解析错误——你看到的Unhandled promise rejection: SyntaxError，根源是直接用result._bodyText来解析JSON的方式不对。fetch返回的Response对象里，_bodyText是内部私有属性，它的格式可能不是你预期的纯JSON字符串，直接丢给JSON.parse自然会报错。

修正后的异步加载代码 #

直接用fetch提供的response.json()方法就好，它会自动帮你完成响应体读取和JSON解析，而且是标准的异步操作，比手动处理靠谱多了：

_loadAnimationAsync = async () => {
  try {
    const response = await fetch(
      'https://cdn.rawgit.com/airbnb/lottie-react-native/635163550b9689529bfffb77e489e4174516f1c0/example/animations/Watermelon.json'
    );
    // 用response.json()自动解析JSON，不用碰内部的_bodyText
    const animationData = await response.json();
    // 把解析后的动画数据存入组件状态，状态更新完成后再播放动画
    this.setState(
      { animation: animationData },
      this._playAnimation
    );
  } catch (error) {
    // 加上try/catch捕获错误，避免出现未处理的Promise拒绝
    console.error('加载或解析Lottie动画失败:', error);
  }
};

关于如何把Lottie文件解析到应用状态 #

上面的代码其实已经完成了这个流程，我再拆解下关键步骤，让你更清楚：

• 第一步：获取动画文件：用fetch请求远程的Lottie JSON文件（如果是本地文件，后面会说另一种方式）。
• 第二步：解析JSON：通过response.json()把响应体转换成JavaScript对象，这一步是异步的，所以要加await。
• 第三步：存入状态：调用this.setState把解析好的animationData存入组件的animation状态字段。
• 第四步：触发播放：在setState的第二个参数（回调函数）里调用_playAnimation，确保状态更新完成后再播放动画，不然可能会因为状态还没更新导致动画加载失败。

如果你用的是本地Lottie文件（比如放在项目的assets文件夹里），可以用Expo的Asset模块来加载，速度更快也更稳定：

import { Asset } from 'expo-asset';

_loadLocalAnimationAsync = async () => {
  try {
    // 加载本地的Lottie JSON文件
    const animationAsset = Asset.fromModule(require('./assets/watermelon.json'));
    await animationAsset.downloadAsync();
    // 解析本地文件的内容
    const animationData = await fetch(animationAsset.localUri).then(res => res.json());
    this.setState({ animation: animationData }, this._playAnimation);
  } catch (error) {
    console.error('加载本地Lottie动画失败:', error);
  }
};

内容的提问来源于stack exchange，提问作者oflcad