React Native 如何使用 Lottie JSON 文件？

Question

大家好，我想将 Lottie 与 React Native 结合使用来展示一杯装满的水。

我找到了一些看起来不错的现成 Lottie 文件，我想在我的应用程序中使用它们。

我安装了 Lottie 并 link 编辑了它（使用 rn-link 并且我手动尝试了它..）。

我有一个错误显示 TypeError: Cannot read 属性 "Commands" of undefined。 - 但在更改来源后它消失了。我现在遇到的问题是它只显示一个白屏，什么也没有发生。

我什至使用了从 Lottie Docs (https://airbnb.io/lottie/#/react-native) 中获取的官方代码

我尝试了 2 个不同的动画 (1: https://lottiefiles.com/15421-glass-of-water , 2: https://lottiefiles.com/5922-water-loading?lang=de ) - 它们在我的资产文件夹中，也在 android/assets 文件夹中！

代码如下：

    import React from 'react';
    import { Animated, Easing } from 'react-native';
    import LottieView from 'lottie-react-native';

import Lottiewater from "../assets/Lottiewater.json";
import LottieGlas from "../assets/5922-water-loading.json"

    export default class Water extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          progress: new Animated.Value(0),
        };
      }

      componentDidMount() {
        Animated.timing(this.state.progress, {
          toValue: 1,
          duration: 5000,
          easing: Easing.linear,
          useNativeDriver: true
        }).start();
      }

      render() {
        return (
          <LottieView source={require('../assets/Lottiewater.json')} progress={this.state.progress} />
          <LottieView source={LottieGlas} progress={this.state.progress} autoSize />
        );
      }
    }


    // OR the code below! 



import Lottiewater from "../assets/Lottiewater.json";
import LottieGlas from "../assets/5922-water-loading.json"

import React from 'react';
import LottieView from 'lottie-react-native';

export default class Water extends React.Component {
  componentDidMount() {
    this.animation.play();
    // Or set a specific startFrame and endFrame with:
    // this.animation.play(30, 120);
  }

  render() {
    return (
      <LottieView
        ref={animation => {
          this.animation = animation;
        }}
            // source={require('../assets/Lottiewater.json')}
            source={Lottiewater}
          />
        );
      }
    }

Answer 1

好的，所以我修复了它 - 对我来说，问题是我没有再次构建应用程序。所以关闭模拟器并重新启动 Android Studio 以重建为我修复它。

React Native 如何使用 Lottie JSON 文件？

React Native How to use Lottie JSON file?

javascript

reactjs

react-native

animation

lottie