reactjs - 自定义 Lottie 动画在 React Native 中不起作用

Question

反应原生版本：反应原生：0.59.8

Lottie 版本：“lottie-react-native”：“^3.3.2”

动画正在使用此动画：https ://assets2.lottiefiles.com/datafiles/Hhw0wgYmETDTkxW/data.json

但不是这个（我的自定义）：https ://assets9.lottiefiles.com/packages/lf20_NJ8xgn.json

反应本机代码：

    import React from 'react';
    import { Button, StyleSheet, View } from 'react-native';
    import LottieView from "lottie-react-native";

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

      resetAnimation = () => {
        this.animation.reset();
        this.animation.play();
      };

      render() {
        return (
          <View style={styles.animationContainer}>
            <LottieView
              ref={animation => {
                this.animation = animation;
              }}
              style={{
                width: 400,
                height: 400,
                backgroundColor: '#eee',
              }}
              source={require('./assets/gradientBall.json')}
              // OR find more Lottie files @ https://lottiefiles.com/featured
              // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
            />
            <View style={styles.buttonContainer}>
              <Button title="Restart Animation" onPress={this.resetAnimation} />
            </View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      animationContainer: {
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
      },
      buttonContainer: {
        paddingTop: 20,
      },
    });

标签： reactjsreact-nativeanimationlottie

Answer 1

更改您的乐透版本

安装（React Native == 0.59.x）

安装 lottie-react-native (3.0.2) 和 lottie-ios (3.0.3)：

yarn add lottie-react-native@3.0.2
yarn add lottie-ios@3.0.3

或者

npm i --save lottie-react-native@3.0.2
npm i --save lottie-ios@3.0.3

使用 react-native 链接将库添加到您的项目中：

react-native link lottie-ios
react-native link lottie-react-native

在 Expo 的情况下，它适用于 lottie 的第 2 版