首页 > 解决方案 > react-lottie:动画不会显示

问题描述

使用 react-lottie 版本 1.2.3 在 React Web 应用程序中尝试动画。

它成功编译,没有任何错误消息,但动画不会从 json 文件中显示。

我关注了React Lottie 不显示动画不显示(网络),建议替换animationData: animationDataanimationData: animationData.default. 两种都试过了,但是没有用。

有任何想法吗?

import React,{Component} from 'react';
import Lottie from 'react-lottie';
import animationData from './lottie/lottie_page_not_found.json';

class PageNotFound extends Component {
  render(){
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData.default,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
    };

    return(
      <div>
         <h1 style={{display: 'flex', justifyContent: 'center'}}>Page Not Found</h1>
          <Lottie
            options={defaultOptions}
            height={400}
            width={400}
          />
       </div>
    );
  }
}

export default PageNotFound;

标签: reactjslottie

解决方案


推荐阅读