Пользовательская анимация Lott ie не работает в React Native - PullRequest
0 голосов
/ 09 марта 2020

React Native Версия: response-native: 0.59.8

Lott ie Версия: "lott ie -react-native": "^ 3.3.2"

Анимация работает с использованием этой анимации: https://assets2.lottiefiles.com/datafiles/Hhw0wgYmETDTkxW/data.json

Но не этот (мой пользовательский): https://assets9.lottiefiles.com/packages/lf20_NJ8xgn.json

React Native Code:


    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,
      },
    });

1 Ответ

0 голосов
/ 09 марта 2020

Изменить свой лот ie версия

Установка (React Native == 0.59.x)

Установить лот ie -react-native (3.0.2) и лот ie - 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 link lottie-ios
react-native link lottie-react-native

В случае Expo на данный момент работает с версией 2 лота ie Expo-lottie

...