React Native 如何使用 Lottie JSON 文件？

Question

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

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

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

我有一个错误，显示所述类型错误：无法读取未定义的属性“命令”。 - 但是在更改来源后它消失了。我现在遇到的问题是它只显示一个白屏，什么都没有发生。

我什至在使用取自 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 为我重建修复它。